Sobre
Desenvolvido por mim como um projeto personalizado para meu irmão, o Lobby 3D é uma plataforma de e-commerce robusta construída com Next.js App Router v15 e TypeScript, projetada para oferecer uma experiência técnica e funcional para arquitetos, designers 3D, artistas e desenvolvedores de jogos. O site permite que usuários explorem, filtrem e baixem arquivos digitais como modelos 3D, HDRIs, texturas, IES lights, materiais, sets e backgrounds, tudo isso gerenciado por uma arquitetura moderna e escalável.
A autenticação foi implementada com JOSE para JWT e bcrypt para criptografia de senhas, garantindo segurança nas sessões de usuário, que são mantidas via cookies. Utilizei o Nodemailer para enviar e-mails de verificação no cadastro, com um fluxo de validação que atualiza o status do usuário no banco de dados via uma rota API dedicada (/api/verify). O backend é impulsionado pelo Prisma ORM com um banco MySQL hospedado na Hostinger, enquanto o deploy do site é feito na Vercel, aproveitando sua integração nativa com Next.js. Para pagamentos, integrei a Stripe, gerenciando assinaturas, cancelamentos e alterações, com rotas específicas em /api/stripe (incluindo webhooks e criação de links para o portal do cliente).
A estrutura do front-end é organizada em uma landing page com seções dinâmicas (gerenciadas via DatoCMS para conteúdo editável) e páginas individuais como "Planos", "Sobre" e "Lobby+", esta última com um formulário de contato processado por uma server action em /actions/contact.ts. A navegação é facilitada por uma navbar com um campo de busca que exibe resultados em tempo real e um footer consistente. A página principal, chamada "Acervo", é o coração do site: ela apresenta uma sidebar para filtros avançados (planos, tags, cores, categorias e subcategorias expansíveis) e uma segunda navbar para alternar entre tipos de arquivos. Os arquivos são exibidos em cards clicáveis, que levam a páginas individuais com zoom nas imagens, downloads condicionais (baseados no plano do usuário), uma seção de arquivos semelhantes e opções para favoritar (salvo em /api/favorite).
O site oferece três planos: Free (30 downloads diários), Essencial (R$30, 60 downloads e acesso a arquivos exclusivos) e Premium (R$40, downloads ilimitados e acesso total). Os arquivos são hospedados na AWS S3, com URLs pré-assinadas geradas via /lib/s3.ts, enquanto os metadados (títulos, tags, categorias, etc.) são armazenados no MySQL e gerenciados pelo Prisma. Para validação de formulários, utilizei ZOD, centralizado em /lib/definitions.ts, garantindo consistência nos dados enviados ao backend.
A experiência do usuário é enriquecida com uma popup de perfil (acessada via ícone na navbar), exibindo nome, e-mail, plano atual e botões para gerenciar a assinatura (via Stripe), logout e acessar a página de favoritos. O middleware (middleware.ts) controla o acesso a rotas como /dashboard (exclusiva para administradores) e formulários de login/cadastro, redirecionando usuários autenticados adequadamente.
Para administradores, desenvolvi uma Dashboard com tabelas dinâmicas para gerenciar arquivos, categorias, subcategorias, tags, palavras-chave e solicitações de contato. Cada tabela inclui filtros por coluna, botões de edição por linha e um formulário "novo" acionado por um botão no topo, tudo processado por server actions genéricas e específicas (ex.: /actions/genericAction.ts, /actions/file.ts). O DatoCMS centraliza o conteúdo informativo (títulos, descrições, links), permitindo atualizações sem alterações no código.
O projeto é estruturado em pastas como src/app, components, config, helpers, lib, types e actions, com APIs em /api (ex.: /api/download, /api/saveFile) e um arquivo middleware.ts para controle de rotas. Adicionei loadings, feedback de carregamento, uma página notFound e metadados otimizados para SEO. Todo o código foi escrito em TypeScript, com tipagem rigorosa, e a integração com ferramentas como Prisma, Stripe e AWS S3 foi cuidadosamente planejada para garantir desempenho e escalabilidade.
O Lobby 3D é um exemplo do meu domínio em desenvolvimento full-stack, combinando front-end interativo, backend seguro e uma infraestrutura moderna, tudo pensado para atender às necessidades de criadores de conteúdo 3D.
Habilidades
- NextJs
- Typescript
- MySql
- DatoCms
- Prisma
- Node