/nextjs-fullstack-to-do-list

Projeto fullstack simples em Typescript para atualização de conhecimentos em NextJS e seu ecossistema.

Primary LanguageTypeScriptMIT LicenseMIT

Boas vindas ao repositório de ParaTo-Do's!

Visite o projeto em seu estado atual em: https://paratodos.vercel.app/


Técnologias usadas

Quality Control:

SonarCloud

Databases, Backend e Frontend:

TypeScript NodeJS Postgres Prisma Chakra cypress ESLint Next JS JWT

Deploy:

Supabase Vercel

Habilidades

Nesse projeto, fui capaz de desenvolver uma aplicação fullstack simples, porém robusta com:

  • Diversas etapas de Error Boundaries (utiizando respostas validadas em Backend em Toasts no Frontend).
  • Arquitetura backend em MVC com Middlewares de validações.
  • Deploy de banco de dados PostgreSQL com abstração em ORM Prisma em Supabase.
  • Autenticação e handshakes de autenticação dinamicos, dentro de API prórpria, com JWT e particularidades Server Side do NextJS.
  • Armazenamento de informações em Cookies e criação de Sessões de Controle de Usuário.
  • Frontend componentizado, estilizado em ChakraUI e responsivo.
  • Aplicações de conhecimento em OOP e SOLID, como principio de Single Responsabity e OCP em Classes do Backend e principos de Liskov na criação de Middlewares.
  • Funções padrões de frontend, como estado de formulários, validador de senhas, aplicação em tela cheia, dark mode e light mode.
  • Desenvolvimento de diversas Design Patterns, como Factories e Observers para manipulçao de objetos, seus eventos e seus estados.
  • Testes E2E em padrão TDD dentro do Cypress.

Rodando o Projeto:

Browser / URL

Acesse o Link:

https://para-to-dos-rafaelpermec.vercel.app

Localmente

Dê o fork no projeto e clone-o para sua maquina digitando o comando em seu terminal:

git clone git@github.com:rafaelPermec/nextjs-fullstack-to-do-list.git

Entre com o comando em seu terminal, para entrar no diretório principal e instalar as dependências do projeto:

cd nextjs-fullstack-to-do-list && npm install

Faça um arquivo .env com suas credenciais, como no exemplo:

DATABASE_URL=string
NODE_ENV=development
TOKEN_SECRET=string

DATABASE_TOKEN é a hash ou URL para subir o banco de dados no local desejado.

Digite um dos comandos abaixo em seu terminal e vá até http://localhost:3000!

npm run start

|| ou ||

npm run dev

Cenário de Testes

ESLint

Para garantir a qualidade do código, utilizei neste projeto os linters ESLint nos padrões do NextJS. Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível e de fácil manutenção! Para rodá-lo localmente no projeto, execute o comando abaixo:

  npm run lint

Cypress

Cypress é uma ferramenta de teste de front-end desenvolvida para a web. Você pode rodar o cypress localmente para verificar se seus requisitos estão passando, para isso execute um dos seguintes comandos: Para executar os testes apenas no terminal:

npm run test

ou

npx cypress run

Para executar os testes e vê-los rodando em uma janela de navegador:

npm run cy:open

ou

npx cypress open

Após executar um dos dois comandos acima, será aberta uma janela de navegador e então basta clicar no nome do arquivo de teste que quiser executar (project.spec.js), ou para executar todos os testes clique em Run all specs