Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cleiltonrocha/habits
A web and mobile application developed with React JS, TypeScript, Vite, Fastify, Node, Prisma, Radix UI, and React Native on mobile. This application was built during the NLW Setup, an event promoted by Rocketseat.
https://github.com/cleiltonrocha/habits
axios expo fastify nativewind nodejs react-native reactjs tailwindcss typescript
Last synced: 4 days ago
JSON representation
A web and mobile application developed with React JS, TypeScript, Vite, Fastify, Node, Prisma, Radix UI, and React Native on mobile. This application was built during the NLW Setup, an event promoted by Rocketseat.
- Host: GitHub
- URL: https://github.com/cleiltonrocha/habits
- Owner: CleiltonRocha
- Created: 2023-03-03T14:52:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-11T23:15:16.000Z (10 months ago)
- Last Synced: 2024-01-12T13:36:44.279Z (10 months ago)
- Topics: axios, expo, fastify, nativewind, nodejs, react-native, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 7.48 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Sobre •
Habits •
Instalação •
Tecnologias •
## Sobre
Projeto desenvolvido durante a NLW Setup, evento criado pela Rocketseat. Um evento 100% online e GRATUITO, com conteúdo exclusivo e INÉDITO.
Ocorreu do dia 16 ao dia 20 de Janeiro de 2023 e teve como intuito mostrar na prática o poder da stack NodeJS + ReactJS + React Native e como essas tecnologias podem te levar até os seus maiores objetivos como programador.
## Habits
O Habits é um app para monitoramento de tarefas diárias para auxiliar seus usuários a rastrear suas atividades realizadas e não realizadas.
O fluxo da aplicação é simples: o usuário cadastra os hábitos desejados indicando em quais dias da semana deverão ser realizados e todos os dias ele terá uma listas de hábitos de acordo com o dia atual, aonde ele irá indicar o status de cada hábito e a aplicação irá gerar um progresso diário que será ilustrado na barra de progresso e também nas cores dos quadrados que representam os dias onde cores mais claras representam números maiores de hábitos completos.
A aplicação possui, além do backend, aplicação web e mobile, as quais serão ilustradas a seguir.
### Habits - Aplicação web
Ao acessar a home da aplicação web o usuário irá se deparar com a página abaixo aonde será exibido um botão para cadastro de um novo hábito e vários quadrados os quais representam dias passados, dia atual e dia futuro. Como podemos ver a seguir, cada dia possui uma cor diferente, onde:
- Cinza indica que nenhum hábito foi realizado.
- Cores mais escuras indicam pouco progresso nos hábitos diários.
- Cores mais claras indicam muito progresso nos hábitos diários.
- Cinza com opacidade reduzida indica dias futuros e não são clicáveis.
Ao clicar no botão `Novo hábito`, o modal abaixo será exibido para o usuário inserir um título e os dias da semana em que o novo hábito deve ser realizado:
Ao clicar em algum dos dias as informações dele serão exibidas, por exemplo: a sua data numérica, o dia da semana, a barra de progresso e a lista de hábitos que devem ser realizados no respectivo dia da semana, conforme imagem a seguir:
### Habits - Aplicação mobile
Abaixo mostro um vídeo de como funciona a aplicação mobile. Basicamente são as mesmas funcionalidades da web.
https://github.com/CleiltonRocha/habits/assets/101843883/211638b3-a96e-454c-8ce9-fd09d1dd0088
## Instalação
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
[Git](https://git-scm.com), [Node.js](https://nodejs.org/en/).
Além disso é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/).
> ⚠ Antes de executar o frontend e mobile verificar o IP da sua máquina e configurar no arquivo de setup do axios presente na pasta lib dos respectivos projetos
### 🎲 Rodando o Back End (servidor)
```bash
# Clone este repositório
$ git clone [email protected]:CleiltonRocha/habits.git
# Acesse a pasta do projeto no terminal/cmd
$ cd habits
# Vá para a pasta server
$ cd server
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev
# O servidor inciará na porta 3333 - acesse
```
### 🖥️ Rodando o Front End (Web)
```bash
# Clone este repositório
$ git clone [email protected]:CleiltonRocha/habits.git
# Acesse a pasta do projeto no terminal/cmd
$ cd habits
# Vá para a pasta web
$ cd web
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev
# O servidor inciará na porta 5173 - acesse
```
### 📱 Rodando o App (Mobile)
```bash
# Clone este repositório
$ git clone [email protected]:CleiltonRocha/habits.git
# Acesse a pasta do projeto no terminal/cmd
$ cd habits
# Vá para a pasta mobile
$ cd mobile
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Execute a aplicação
$ yarn start
# Será aberto no terminal o menu do Expo onde poderá scanear o QR Code para executar o app diretamente no seu celular ou as opções de executar no emulador android ou iOS
```
## Tecnologias
[](https://skillicons.dev)