Projeto desenvolvido entre os dias 16 a 22 de Janeiro de 2023 no 11º evento NLW da Rocketseat - SETUP - Habits - Trilha Ignite
Criar três aplicações para Habits - de bons hábitos se faz uma vida saudável!
- server - API Rest de consulta e registros dos hábitos;
- web - aplicação frontend de navegação no desktop;
- mobile - aplicação frontend para dispositivos móveis;
A API Rest foi desenvolvida em Node com Typescript e as ferramentas Fastify (servidor), Prisma (ORM / SQLite), Zod (validações), ESLint e Prettier.
O frontend para Web / desktop foi desenvolvido em Typescript com React.js, gerado pelo Vite.js, uma poderosa ferramenta para criação e compilação de aplicações web, Radix-UI para importar componentes React acessíveis e sem estilos, TailwindCSS para estilização, Phoshor Icons para utilização de ícones. Também incorporei o ESLint e Prettier.
A aplicação em dispositivos móveis foi desenvolvida em React Native usando a ferramenta Expo para criar e buildar a aplicação tanto para dispositivos Android quanto iOS. A estilização foi aprimorada com NativeWind que utiliza o TailwindCSS no React Native. Claro, não poderia faltar ESLint e Prettier.
Este projeto demandou mais de 10h de vídeos aulas da Rocketseat e mais de 34h de trabalho desenvolvendo o projeto.
É necessário ter o Node na versão 16 LTS instalado em sua máquina.
Comece primeiro com o servere depois siga com as aplicações frontend.
De dentro da pasta server, instale as dependências:
npm install
Utilize o Prisma para criar o banco de dados em SQLite:
npx prisma generate
Se necessário, gere o banco de dados e as tabelas:
npx prisma migrate
Carregue os dados de exemplo:
npx db seed
Finalmente, inicie o servidor:
npm run dev
Observe se a mensagem abaixo está sendo exibida no seu terminal e indicando no seu terminal.
HTTP Server listing on port <http://>{ your ip address }:3333
Observação:
Toda vez que a aplicação server é executada são modificados os arquivos .env das aplicações web e mobile com o respectivo IP de sua máquina para que elas executem perfeitamente. Mas você poderá editá-los com o IP correto de sua máquina
Através de outro terminal, entre na pasta web e instale as dependências:
npm install
Para iniciar o servidor através do Vite execute:
npm run dev
Entre na página através do caminho http://localhost:5173/.
Para executar a aplicação Mobile é necessário ter o ExpoGo instalado no seu dispositivo Android ou iPhone. Obviamente, seu dispositivo deverá estar na mesma rede Wifi de seu roteador. Você também poderá usá-lo através de um emulador Android, se preferir.
De outro terminal, entre na pasta web. Instale as dependências:
npm install
Depois inicie o servidor Expo:
npx expo start --clear
Com o aplicativo ExpoGo aberto em seu dispositivo móvel, escaneie o QR code exibido.
Agradeço à Rocketseat por esta incrível experiência de fazer aplicações full-stack gratuitamente. A trilha Ignite é super desafiadora! Pensei que não daria conta... Foram 5 video-aulas super completas, com os incríveis instrutores Diego Fernandes e Rodigo Gonçalves. Aproveitei para relembrar o React e aprender novas ferramentas. Agradeço demais por esta oportunidade e que venham outras. Parabéns Rocketseat 🚀!