Next.js
Next.js é um framework React que permite funcionalidades como renderização do lado do servidor e geração de sites estáticos para aplicativos React. É mantido pela Vercel e se tornou uma escolha popular para desenvolvimento web moderno. Veja mais na documentação.
React
React é uma biblioteca JavaScript para construir interfaces de usuário. É mantida pelo Facebook e uma comunidade de desenvolvedores individuais e empresas. O React permite que os desenvolvedores construam componentes reutilizáveis e gerenciem o estado em aplicativos de página única. Veja mais na documentação.
Formik
Formik é uma biblioteca que ajuda a construir, validar e manipular formulários em aplicativos React. Simplifica a gestão do estado do formulário e reduz a quantidade de código repetitivo que os desenvolvedores precisam escrever. Veja mais na documentação.
Yup
Yup é uma biblioteca JavaScript que permite a construção de esquemas de validação de forma expressiva e fácil de ler. É frequentemente usado com Formik para validar formulários em aplicativos React. Veja mais na documentação.
nookies
Nookies é uma biblioteca que torna o trabalho com cookies no Next.js mais simples, tanto no lado do cliente quanto do servidor. Veja mais na documentação.
socket.io-client
Socket.io-client é o cliente JavaScript para o Socket.io, uma biblioteca que permite comunicações em tempo real bidirecionais. É amplamente utilizado para criar aplicativos de chat, jogos e para atualizações em tempo real. Veja mais na documentação.
react-toastify
React-toastify permite adicionar notificações ao seu aplicativo React de maneira fácil. Suporta todos os tipos de notificações: info, success, error e warning. Veja mais na documentação.
react-icons
React-icons fornece uma lista de ícones SVG acessíveis prontos para serem usados em projetos React. Agrupa várias bibliotecas de ícones como FontAwesome, Bootstrap e Material Design. Veja mais na documentação.
TailwindCSS
TailwindCSS é um framework CSS de utilitário-first que permite aos desenvolvedores construir designs personalizados sem sair do HTML. É altamente configurável e pode ser extendido facilmente. Veja mais na documentação.
storybook
Storybook é uma ferramenta open source para desenvolver componentes de UI para React, Vue, Angular e muito mais, em um ambiente isolado. Permite que os desenvolvedores visualizem diferentes estados de seus componentes e desenvolvam-os fora do aplicativo principal. Veja mais na documentação.
Jest
Jest é um framework de teste JavaScript mantido pelo Facebook. É amplamente utilizado para testar aplicativos React e possui uma integração fácil com várias bibliotecas e frameworks. Veja mais na documentação.
ESLint
ESLint é uma ferramenta de linting para JavaScript que analisa o código para procurar problemas. Ele não só verifica erros comuns, mas também pode ser configurado para seguir guias de estilo ou regras personalizadas. Além disso, o ESLint é altamente extensível, com uma ampla gama de plugins disponíveis para diversas necessidades, como integração com frameworks populares, bibliotecas e práticas recomendadas. Veja mais na documentação.
MSW
MSW (Mock Service Worker) é uma ferramenta para simular um servidor backend REST ou GraphQL durante o desenvolvimento de frontend. Ele permite aos desenvolvedores testar como seus aplicativos reagem a diferentes respostas do servidor sem ter que conectar-se a um servidor real. Veja mais na documentação.
@storybook/addon-essentials
Addon-essentials é um conjunto de addons do Storybook mais populares que ajudam a melhorar a experiência de desenvolvimento e documentação dos componentes. Veja mais na documentação.
@storybook/react
Storybook para React é uma UI de desenvolvimento para componentes React. Com ele, você pode visualizar diferentes estados de seus componentes e módulos de forma interativa. Veja mais na documentação.
@testing-library/react
A Testing Library oferece uma abordagem para testar componentes React que se assemelha mais à forma como os usuários interagem com o seu aplicativo. Ela incentiva a escrita de testes que utilizam seus componentes como os usuários fariam. Veja mais na documentação.
@typescript-eslint/parser e @typescript-eslint/eslint-plugin
Estes são plugins e parsers que permitem ao ESLint lintar código TypeScript. Ajudam a garantir que o código TypeScript siga as melhores práticas e seja consistente. Veja mais na documentação.
babel-jest
Babel-jest é um transformador Jest que utiliza Babel para transformar seu código JavaScript antes de executar os testes. Veja mais na documentação.
cz-conventional-changelog
O Commitizen com o adapter cz-conventional-changelog fornece convenções de commit consistentes, facilitando a geração automática de changelogs e a versionamento semântico. Veja mais na documentação.
eslint-config-prettier e eslint-plugin-prettier
Estas ferramentas fazem a integração do Prettier com o ESLint. O ESLint verifica problemas de código, enquanto o Prettier foca no estilo/formato. Com estas ferramentas, é possível usar ambos em harmonia no seu projeto. Veja mais na documentação.
msw-storybook-addon
Esta extensão permite que você utilize Mock Service Worker (MSW) em suas histórias do Storybook, facilitando a simulação de estados de carregamento, erro e sucesso em suas histórias. Veja mais na documentação.
prettier
Prettier é um formatador de código que suporta várias linguagens e integra-se com a maioria dos editores. Ele ajuda a manter o código consistentemente formatado. Veja mais na documentação.
ts-jest
ts-jest é um transformador Jest para TypeScript. Com ele, é possível testar projetos TypeScript diretamente usando Jest. Veja mais na documentação.
# arquivo .env.local
NEXT_PUBLIC_ENVIRONMENT=development
NEXT_PUBLIC_APP_NAME="Eu automatizei"
NEXT_PUBLIC_TOKEN_PREFIX=eu_automatizei
NEXT_PUBLIC_API_URL=http://localhost:3001
NEXT_PUBLIC_PORT=3000# Instalação de pacotes
$ npm i nome-do-pacote
# ou
$ bun i nome-do-pacote
# ou
$ yarn add nome-do-pacote
# Para testar, lembre-se que NextJs não abre automaticamente o navegador igual o ReactJs,
# você deve abrir http://localhost:3000/ após o comando bem sucedido no terminal.
# 1- Lembre-se sempre de criar a sua branch e não utilizar a main 👌
# 2- Instale o mongoDb, é com ele que o backend esta feito, a string de conexão esta
# no arquivo .env.local com o nome NEXT_PUBLIC_DB_URL e não precisa de senha, pois você está em dev 👌
# Modo desenvolvimento com (Hot Reload)
$ npm run dev
# ou
$ bun dev
# ou
$ yarn dev
# Gerando o build e testando local (Sem Hot Reload)
# Fica mais rápido o teste no navegador por ser o build
$ npm run build:start
# ou
$ bun build:start
# ou
$ yarn build:start
# Testando o build antes de fazer deploy, por boas práticas faça isso, e todos os warnings são mostrados
# e se houver erro no projeto tbm, com isso você evita quebrar a esteira no deploy.
$ npm run build
# ou
$ bun build
# ou
$ yarn build