Sobre • Habits • Tecnologias • Instalações • Funcionalidades • Autor • Licença
🚀 Projeto fullstack de app de monitoramento de hábitos com calendário mostrando hábitos por dia com tonalidades de cores diferentes para identificar a conclusão de hábitos a cada dia. Possibilidade de criação e edição de conclusão de hábitos diariamente.
BACKEND:
- TypeScript
- TSX
- Fastify
- Prisma
- Zod
FRONTEND:
- ViteJs
- ReactJs
- TypeScript
- Tailwindcss
- Radix
- Axios
MOBILE:
- React-Native
- Expo
- TypeScript
- NativeWind
- Axios
Possui as funcionalidades de:
- Calendário interativo com identificação de dia atual;
- Identificação de conclusão de hábitos nos dias, quanto mais azul menos hábitos concluídos no dia;
- Possibilidade de criação de novos hábitos marcando os dias que o mesmo será monitorado;
- Edição (toggle) de hábitos por dia entre concluído e a concluir.
- Barra de progresso de hábitos por dia. Concluídos Vs a concluir.
Projeto foi realizado no NLW-Setup da Rocketseat.
| ✨ Habits | |
|---|---|
| ✨ Nome | Gestão de Hábitos completa com NodeJs (Back-end), ReactJs (Front-end) e React-Native (Mobile) |
| 🏷️ Tecnologias | React-native, ReactJs, Expo, Prisma, Tailwindcss, NativeWind, NodeJs, JavaScript, TypeScript, HTML5, CSS3, Axios, SQLite3, Figma, Eslint, Prettier |
As seguintes ferramentas foram usadas na construção do projeto
Criar pasta server dentro do projeto
mkdir server cd serverInicia um projeto e cria package.json
npm init -yInstalar typescript na dependência de desenvolvimento
npm i typescript -D # Cria tsconfig.json npx tsc --initInstalar TSX na dependência de desenvolvimento
# dependência tsx para compilar .ts para .js (node agora consegue rodar arquivos .ts) npm i tsx -DInstalar Zod na dependência de produção
# biblioteca de validação e tipagem TypeScript (https://zod.dev) npm install zodInstalar Fastify na dependência de produção | Cria rotas HTTP
npm i fastify # cors é a segurança do backend, basicamente é quem esta autorizado a consumir dados no meu backend npm i @fastify/corsInstalando Prisma (ORM)
npm i prisma -D npm i @prisma/clientInstalando gerador de diagrama para DB Prisma
npm i -D prisma-erd-generator @mermaid-js/mermaid-cli # adicionar o código abaixo em schema.prisma generator erd { provider = "prisma-erd-generator" }Instalar Dayjs na dependência de produção
# biblioteca de manipulação de datas npm install dayjsCria um projeto com ViteJs
npm create vite@latest # Project name: » web | Select a framework: » React | Select a variant: » TypeScript npm installInstalando arquitetura Tailwindcss
npm install -D tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss # Criar arquivo .prettierrc.json na raiz do projetoCriando tailwind.config.cjs
npx tailwindcss init -pEditando tailwind.config.cjs
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], }Adicionando configuração Tailwindcss em src/styles/global.css
@tailwind base; @tailwind components; @tailwind utilitiesInstalando biblioteca de ícones Phosphor
npm install phosphor-reactInstalando faker para gerar números aleatórios
npm install @faker-js/fakerInstalar Dayjs na dependência de produção
# biblioteca de manipulação de datas npm install dayjsInstalar componentes do Radix
npm install @radix-ui/react-dialog npm install @radix-ui/react-popover npm install @radix-ui/react-checkboxInstalar CLSX para criar condicionais em className
npm install clsxInstalando biblioteca de Axios para comunicação Http
npm install axiosInstalando expo-cli globalmente
npm install -g expo-cli # verificando a versão instalada expo --versionCriar projeto React Native | Blank | TypeScript
npx create-expo-app mobile --template # Choose a template: » Blank (TypeScript)Instalando expo-font e font Inter do Google
npx expo install expo-font @expo-google-fonts/interInstalando biblioteca de navegação entre telas react-navigation
npm install @react-navigation/native npx expo install react-native-screens react-native-safe-area-context npm install @react-navigation/native-stackInstalando react-native-reanimated para animações
npx expo install react-native-reanimated # vá em babel.config.js e atualize os plugins plugins: ["nativewind/babel", "react-native-reanimated/plugin"],Instalando NativeWind no ambiente de produção (Tailwindcss em React-native)
npm install nativewindInstalando arquitetura Tailwindcss
npm install -D tailwindcss prettier prettier-plugin-tailwindcss # Criar arquivo .prettierrc.json na raiz do projetoCriando tailwind.config.cjs
npx tailwindcss initEditando tailwind.config.cjs
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], }Editando babel.config.js
// babel.config.js module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], plugins: ["nativewind/babel"], // <===== }; };Criando types para className
// crie um arquivo em uma pasta @types/app.d.ts em src // adicione no app.d.ts o script abaixo /// <reference types="nativewind/types" />Instalando biblioteca para ler imagens SGV
npx expo install react-native-svg npm install -D react-native-svg-transformer # Obs. tem que criar arquivo na raiz do projeto (metro.config.js)Criando arquivo na raiz do projeto (metro.config.js)
const { getDefaultConfig } = require("expo/metro-config"); module.exports = (() => { const config = getDefaultConfig(__dirname); const { transformer, resolver } = config; config.transformer = { ...transformer, babelTransformerPath: require.resolve("react-native-svg-transformer"), }; config.resolver = { ...resolver, assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), sourceExts: [...resolver.sourceExts, "svg"], }; return config; })();Criando types para svg
// crie um arquivo em uma pasta @types/svg.d.ts em src // adicione no svg.d.ts o script abaixo declare module "*.svg" { import React from "react"; import { SvgProps } from "react-native-svg"; const content: React.FC<SvgProps>; export default content; }Instalando faker para gerar números aleatórios
npm install @faker-js/fakerInstalar Dayjs na dependência de produção
# biblioteca de manipulação de datas npm install dayjsInstalando biblioteca de Axios para comunicação Http
npm install axiosInstalar CLSX para criar condicionais em className
npm install clsx# development (http://localhost:3000/) | tsx watch src/server.ts cd server npm run devcd server # Criando BD prisma SQLite npx prisma init --datasource-provider SQLite # criando/atualizando as tabelas do BD no prisma npx prisma migrate dev # Enter a name for the new migration: » created tab Habits # prisma studio (Verificar tabelas e realizar CRUD manual) npx prisma studio # ou npx prisma studio -b firefox -p 5173 # -b firefox p/ especificar navegador # -p 5173 p/ especificar porta # ou npm run db # Gerando diagrama de banco de dados Prisma npx prisma generate # ou npm run diagrama # Criando Seed, lançamentos de dados para testes npx prisma db seed
cd mobile npx expo start # Iniciando com a cash limpa npx expo start --clearcd web npm run devEste projeto é MIT licensed.