Esta página permite o cliente fazer um agendamento de serviço em uma barbearia, escolhendo o melhor dia e horário.
Meu primeiro projeto fullstack tendo tido diversos desafios ao longo do caminho 🤪
Inicialmente o escopo do projeto era um pouco menor, como ter apenas o modo mobile, menos semantica, menos alertas, enfim era bem mais simples, dei uma aprimorada nele e não aprimorei ainda mais devido as limitações dos bancos de dados gratuitos disponíveis.
De toda forma foi uma boa experiência de aprendizado utilizando esse método de criação de aplicações web fullstack.
⚛️ Next.js: trouxe uma abordagem única neste projeto, divergindo das práticas convencionais tanto no frontend quanto no uso do Node.js no backend. A implementação do SSR (Server-Side Rendering) no Next.js permitiu a busca e manipulação direta de informações no banco de dados, eliminando a necessidade de criar uma API dedicada.
🔑 NextAuth: Implementar a autenticação Oauth simplificou significativamente o processo de login para o usuário, eliminando a exigência de preencher extensos formulários. Além disso, a integração do NextAuth com o Next.js simplificou o processo de implementação.
💎 Prisma: Mais uma vez, sua abstração foi fundamental, eliminando a necessidade de lidar diretamente com comandos SQL e tornando a implementação mais eficiente.
🛠 shadcn: Desempenhou um papel essencial como a principal biblioteca de componentes neste projeto, proporcionando uma significativa agilidade na implementação de diversas funcionalidades, componentes e na estilização. Sua robustez e versatilidade foram fundamentais para otimizar o desenvolvimento, contribuindo de maneira expressiva para a eficiência e qualidade geral do sistema.
Em resumo foi possível aprender e praticar:
- Uso do NextAuth e método de autenticação Oauth no Next.js
- shadcn e diversos de seus componentes e estilizações
- Typescript com o Prisma diretamente no Next.Js
Após clonar, baixar ou fazer um fork, utilize o comando abaixo para instalar as dependências do projeto:
npm install
Esse projeto te permite:
- Inserir dados no banco de dados através dos arquivos seed do projeto (utilize
npx prisma db seed
) - Utilizar autenticação Oauth para criar uma conta no site pelo google ou github
- Fazer agendamento de serviços em dias e horários desejados
- Visualizar agendamentos ou remover agendamentos confirmados nos locais
- Obter informações de determinada barbearia
💌 Para me mandar uma mensagem basta usar um dos botões abaixo!