TERRARIUM

Um prototipo de website de vendas de terrarios e acessorios de floricultura para um projeto da faculdade, utilizando typescript e mais algumas coisas que não lembro agora

Como rodar

Instale dependências (se você encontrar conflitos de peer-deps, use o script helper):

npm run install:legacy

Iniciar ambiente de desenvolvimento:

npm run dev

Construir para produção:

npm run build

Nota: npm run install:legacy utiliza --legacy-peer-deps para contornar conflitos de peer dependencies (ex.: versões antigas de algumas bibliotecas). É recomendável revisar e alinhar versões das dependências para evitar o uso dessa flag em produção.

Autenticação Firebase

O projeto usa Firebase Authentication para login, registro e recuperação de senha.

Funcionalidades de Autenticação

• Email/Senha: Login e registro com validação básica
• Google OAuth: Login rápido com Google
• Recuperação de Senha ("Esqueci a Senha"):
  • Usuário solicita link de reset via email
  • Firebase envia email com link de ação
  • Usuário clica no link (volta para o app com código de reset)
  • Modal de reset exibe com validação de força de senha
  • Validação obrigatória: mínimo 8 caracteres, 1 maiúscula, 1 minúscula, 1 número
  • Opção de auto-login automático após reset (fornecendo email)

Firebase (Firestore) setup

O projeto já contém inicialização do Firebase em src/lib/firebase.ts e exemplos de uso em src/services/*.

Passos para criar e ligar um Firestore ao projeto:

1. Crie um projeto no Firebase Console: https://console.firebase.google.com/

2. Ative o Firestore (modo de produção/segurança conforme precisar).

3. Adicione um Web App no projeto e pegue as configurações (apiKey, authDomain, projectId, storageBucket, appId).

4. No Netlify (frontend) adicione as variáveis de ambiente (Settings → Build & deploy → Environment):

   • VITE_FIREBASE_API_KEY
   • VITE_FIREBASE_AUTH_DOMAIN
   • VITE_FIREBASE_PROJECT_ID
   • VITE_FIREBASE_STORAGE_BUCKET
   • VITE_FIREBASE_MESSAGING_SENDER
   • VITE_FIREBASE_APP_ID

5. Para popular dados iniciais localmente (seed), crie uma Service Account no Firebase (Project Settings → Service accounts → Generate new private key) e salve o JSON com segurança.

6. No seu ambiente local, rode:

setx FIREBASE_SERVICE_ACCOUNT_PATH "C:\caminho\para\serviceAccount.json"
npm i
node scripts/seedFirestore.mjs

Isso insere alguns produtos, um pedido e um agendamento de exemplo no Firestore.

Testando Recuperação de Senha Localmente

Para testar o fluxo "Esqueci a Senha" em ambiente de desenvolvimento:

1. Com Firebase Emulator Suite (recomendado para testes):

   npm install -g firebase-tools
   firebase emulators:start

   • Acesse http://localhost:4200 para ver a console do emulator
   • Crie um usuário de teste na aba "Authentication"
   • O app automaticamente se conectará ao emulator (se configurado em src/lib/firebase.ts)

2. Com Firebase Production (requer SMTP configurado):

   • No Firebase Console, vá para Authentication → Templates → Email address verification
   • Configure um SMTP (via SendGrid, Mailgun, etc.) ou use a funcionalidade padrão do Firebase
   • Clique em "Esqueci a Senha" no LoginModal
   • Digite o email do usuário (ex: test@example.com)
   • Abra o email e clique no link
   • Você será redirecionado para o app com um modal de reset
   • Digite a nova senha (respeitando os requisitos: 8+ chars, maiúscula, minúscula, número)
   • Opcionalmente insira o email para auto-login
   • Clique em "Atualizar senha"

Componentes envolvidos:

• components/LoginModal.tsx — formulário de login com botão "Esqueci a Senha"
• components/ResetPasswordModal.tsx — modal de redefinição (validação de força, auto-login)
• App.tsx — detecta links de reset (oobCode + mode=resetPassword) e abre modal

Segurança:

• Em produção, configure regras do Firestore em vez de permitir leituras/escritas abertas.
• Nunca commite a chave do service account no repositório.
• Configure um domínio personalizado no Firebase para emails mais profissionais (Settings → Authorized domains)

Alternativa: PostgreSQL

Se preferir um banco relacional (Postgres) em vez do Firestore, incluímos um esquema SQL e um script de seed.

Arquivos adicionados:

• postgres/schema.sql — esquema das tabelas (users, products, orders, order_items, appointments).
• scripts/seedPostgres.mjs — script Node que insere dados de exemplo; usa a variável DATABASE_URL.

Passos para usar Postgres localmente:

1. Criar um banco Postgres (local ou em um provedor).
2. Executar o script postgres/schema.sql para criar as tabelas (psql ou interface do seu provedor).
3. Definir a variável de ambiente DATABASE_URL com a connection string (ex: postgres://user:pass@host:5432/dbname).
4. Rodar o seed:

setx DATABASE_URL "postgres://user:pass@host:5432/dbname"
npm i
node scripts/seedPostgres.mjs

Notas sobre integração:

• Os serviços do projeto ainda usam Firestore (veja src/services/*). Para migrar a aplicação para Postgres você precisará adaptar esses serviços para usar pg ou um ORM (Prisma/TypeORM). Eu posso ajudar a gerar essas camadas de acesso se desejar.

Deploy backend no Render (opção recomendada)

Se quiser um serviço Node persistente (para processar pagamentos, webhooks e lógica de servidor), Render é uma opção simples:

1. Adicione start script (já presente no package.json).
2. Crie uma conta em https://render.com e crie um novo Web Service apontando para este repositório.
   • Build Command: npm install && npm run build
   • Start Command: npm start
   • Defina as environment variables (MP_ACCESS_TOKEN, MP_PUBLIC_KEY, FIREBASE_SERVICE_ACCOUNT_PATH, DATABASE_URL, etc.) no painel do serviço.
3. Se preferir que o container também sirva o frontend, ative a variável de ambiente SERVE_STATIC=true no serviço (o servidor serve dist/ quando essa variável está setada).

Também há um Dockerfile multi-stage e Procfile para facilitar deploys em plataformas que usam containers ou Heroku-like.

Deploy com Docker

Para construir e rodar localmente:

docker build -t terrarium:latest .
docker run -e MP_ACCESS_TOKEN=yourtoken -e SERVE_STATIC=true -p 3001:3001 terrarium:latest

Isso iniciará o container na porta 3001 com frontend servido pelo mesmo processo.