{"id":13300729,"url":"https://github.com/JoyceFatima/nlw-setup","last_synced_at":"2025-03-10T11:33:00.129Z","repository":{"id":65706807,"uuid":"592771636","full_name":"JoyceFatima/nlw-setup","owner":"JoyceFatima","description":"Complete Habits Management with React (Front-end), React-Native (Mobile) and NodeJs (Back-end).","archived":false,"fork":false,"pushed_at":"2023-02-05T18:55:15.000Z","size":832,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-06T12:29:00.754Z","etag":null,"topics":["animation","axios","css3","eslint","expo","fastify","figma","html5","javascript","native-wind","node","prettier","prisma-orm","react","react-native","rocketseat","sqlite3","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoyceFatima.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-24T13:59:43.000Z","updated_at":"2023-03-05T03:09:06.000Z","dependencies_parsed_at":"2023-02-19T01:30:38.611Z","dependency_job_id":null,"html_url":"https://github.com/JoyceFatima/nlw-setup","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoyceFatima%2Fnlw-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoyceFatima%2Fnlw-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoyceFatima%2Fnlw-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoyceFatima%2Fnlw-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoyceFatima","download_url":"https://codeload.github.com/JoyceFatima/nlw-setup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242843502,"owners_count":20194374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","axios","css3","eslint","expo","fastify","figma","html5","javascript","native-wind","node","prettier","prisma-orm","react","react-native","rocketseat","sqlite3","tailwindcss","typescript","vite"],"created_at":"2024-07-29T17:43:04.004Z","updated_at":"2025-03-10T11:32:59.829Z","avatar_url":"https://github.com/JoyceFatima.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e \n\t Gestão de Hábitos completa com NodeJs (Back-end), ReactJs (Front-end) e React-Native (Mobile)\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#-sobre-o-projeto\"\u003eSobre\u003c/a\u003e •\n \u003ca href=\"#-habits\"\u003eHabits\u003c/a\u003e •\n \u003ca href=\"#-tecnologias\"\u003eTecnologias\u003c/a\u003e •\n \u003ca href=\"#-instalação\"\u003eInstalações\u003c/a\u003e •\n \u003ca href=\"#-funcionalidades\"\u003eFuncionalidades\u003c/a\u003e •\n \u003ca href=\"#-autor\"\u003eAutor\u003c/a\u003e • \n \u003ca href=\"#-licença\"\u003eLicença\u003c/a\u003e\n\u003c/p\u003e\n\n\u0026nbsp;\n![Capa](https://github.com/LivioAlvarenga/Nlw-Setup/blob/master/files/Monitor_laptop_Tablet_Celular-Fundos_limpos.png?raw=true#vitrinedev)\n\n![Capa](https://github.com/LivioAlvarenga/Nlw-Setup/blob/master/files/cover.png?raw=true)\n\n\u0026nbsp;\n\u003ca id=\"-sobre-o-projeto\"\u003e\u003c/a\u003e\n\n## 💻 Sobre o projeto\n\n🚀 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.\n\nBACKEND:\n\n- TypeScript\n- TSX\n- Fastify\n- Prisma\n- Zod\n\nFRONTEND:\n\n- ViteJs\n- ReactJs\n- TypeScript\n- Tailwindcss\n- Radix\n- Axios\n\nMOBILE:\n\n- React-Native\n- Expo\n- TypeScript\n- NativeWind\n- Axios\n\nPossui as funcionalidades de:\n\n- Calendário interativo com identificação de dia atual;\n- Identificação de conclusão de hábitos nos dias, quanto mais azul menos hábitos concluídos no dia;\n- Possibilidade de criação de novos hábitos marcando os dias que o mesmo será monitorado;\n- Edição (toggle) de hábitos por dia entre concluído e a concluir.\n- Barra de progresso de hábitos por dia. Concluídos Vs a concluir.\n\n![Imagens-Web](https://github.com/LivioAlvarenga/Nlw-Setup/blob/master/files/Imagens-Web.png?raw=true)\n\n![Imagens-Mobile](https://github.com/LivioAlvarenga/Nlw-Setup/blob/master/files/Imagens-Mobile.png?raw=true)\n\nProjeto foi realizado no NLW-Setup da Rocketseat.\n\n\u0026nbsp;\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#license\"\u003e\u003cimg src=\"https://img.shields.io/github/license/LivioAlvarenga/Nlw-Setup?color=ff0000\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/LivioAlvarenga/Nlw-Setup/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/LivioAlvarenga/Nlw-Setup\" alt=\"issue app\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/LivioAlvarenga/Nlw-Setup\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/count/LivioAlvarenga/Nlw-Setup\" alt=\"total amount of programming languages used in the project\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/LivioAlvarenga/Nlw-Setup\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/top/LivioAlvarenga/Nlw-Setup\" alt=\"most used language in the projects\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/LivioAlvarenga/Nlw-Setup\"\u003e\u003cimg src=\"https://img.shields.io/github/repo-size/LivioAlvarenga/Nlw-Setup\" alt=\"repository size\" /\u003e\u003c/a\u003e\n\u003cp\u003e\n\n---\n\n\u0026nbsp;\n\u003ca id=\"-habits\"\u003e\u003c/a\u003e\n\n\n| :sparkles: Habits |                                                                                                                                                    |\n| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| :sparkles: Nome       | **Gestão de Hábitos completa com NodeJs (Back-end), ReactJs (Front-end) e React-Native (Mobile)**                                                  |\n| :label: Tecnologias   | React-native, ReactJs, Expo, Prisma, Tailwindcss, NativeWind, NodeJs, JavaScript, TypeScript, HTML5, CSS3, Axios, SQLite3, Figma, Eslint, Prettier |\n\n---\n\n\u0026nbsp;\n\u003ca id=\"-tecnologias\"\u003e\u003c/a\u003e\n\n## 🛠 Tecnologias\n\nAs seguintes ferramentas foram usadas na construção do projeto\n\n\u0026nbsp;\n\n\u003cp align=\"center\"\u003e\n  \u003ca href= \"https://html5.org/\"\u003e\u003cimg alt=\"html 5 badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=E34F26\u0026logo=HTML5\u0026label=Markup Language\u0026message=HTML5\u0026color=E34F26\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://developer.mozilla.org/pt-BR/docs/Web/CSS\"\u003e\u003cimg alt=\"CSS 3 badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=1572B6\u0026logo=CSS3\u0026label=Style\u0026message=CSS3\u0026color=1572B6\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://tailwindcss.com/\"\u003e\u003cimg alt=\"Tailwind CSS badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=06b6d4\u0026logo=Tailwind CSS\u0026label=Style\u0026message=Tailwind CSS\u0026color=06b6d4\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://www.javascript.com/\"\u003e\u003cimg alt=\"JavaScript badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=F7DF1E\u0026logo=JavaScript\u0026label=Language\u0026message=JavaScript\u0026color=F7DF1E\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://www.typescriptlang.org/\"\u003e\u003cimg alt=\"TypeScript badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=3178c6\u0026logo=TypeScript\u0026label=Language\u0026message=TypeScript\u0026color=3178c6\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://nodejs.org/en/\"\u003e\u003cimg alt=\"Node.js badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=339933\u0026logo=Node.js\u0026label=Runtime Environment\u0026message=Node.js\u0026color=3139933\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://reactjs.org/\"\u003e\u003cimg alt=\"React badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=61dafb\u0026logo=React\u0026label=Framework\u0026message=React\u0026color=61dafb\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://reactnative.dev/\"\u003e\u003cimg alt=\"React Native badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=61dafb\u0026logo=React\u0026label=Framework\u0026message=React Native\u0026color=61dafb\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://expo.dev/\"\u003e\u003cimg alt=\"Expo badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=000020\u0026logo=Expo\u0026label=React tool\u0026message=Expo\u0026color=000020\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://www.fastify.io/\"\u003e\u003cimg alt=\"Fastify badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=000000\u0026logo=Fastify\u0026label=Framework\u0026message=Fastify\u0026color=000000\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://axios-http.com/\"\u003e\u003cimg alt=\"Axios badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=5a29e4\u0026logo=Axios\u0026label=HTTP Client\u0026message=Axios\u0026color=5a29e4\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://www.prisma.io/\"\u003e\u003cimg alt=\"Prisma badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=2d3748\u0026logo=Prisma\u0026label=ORM\u0026message=Prisma\u0026color=2d3748\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://www.sqlite.org/index.html\"\u003e\u003cimg alt=\"SQLite badge\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=003b57\u0026logo=SQLite\u0026label=Database\u0026message=SQLite\u0026color=003b57\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://www.figma.com/file/QQXvJRUjgkMA1gHHh63rFw/Habits-(i)-(Community)?t=ZIPBAGYzdRufIN0g-0\"\u003e\u003cimg alt=\"link projeto no figma\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=F24E1E\u0026logo=Figma\u0026label=Designer\u0026message=Figma\u0026color=F24E1E\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://code.visualstudio.com/download\"\u003e\u003cimg alt=\"vscode download\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=007ACC\u0026logo=Visual Studio Code\u0026label=IDE\u0026message=Visual Studio Code\u0026color=007ACC\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://github.com/prettier/prettier\"\u003e\u003cimg alt=\"code formatter prettier\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=F7B93E\u0026logo=Prettier\u0026label=Code Formatter\u0026message=Prettier\u0026color=F7B93E\"\u003e\u003c/a\u003e\n  \u003ca href= \"https://eslint.org/\"\u003e\u003cimg alt=\"code standardization eslint\" src=\"https://img.shields.io/static/v1?logoWidth=15\u0026logoColor=4B32C3\u0026logo=ESLint\u0026label=Code Standardization\u0026message=ESLint\u0026color=4B32C3\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u0026nbsp;\n\u003ca id=\"-instalação\"\u003e\u003c/a\u003e\n\n## ⚙️ Instalações\n\n### BACK-END | TypeScript - TSX - Fastify - Prisma - Zod\n\nCriar pasta server dentro do projeto\n\n```bash\nmkdir server\ncd server\n```\n\nInicia um projeto e cria package.json\n\n```bash\nnpm init -y\n```\n\nInstalar typescript na dependência de desenvolvimento\n\n```bash\nnpm i typescript -D\n# Cria tsconfig.json\nnpx tsc --init\n```\n\nInstalar TSX na dependência de desenvolvimento\n\n```bash\n# dependência tsx para compilar .ts para .js (node agora consegue rodar arquivos .ts)\nnpm i tsx -D\n```\n\nInstalar Zod na dependência de produção\n\n```bash\n# biblioteca de validação e tipagem TypeScript (https://zod.dev)\nnpm install zod\n```\n\nInstalar Fastify na dependência de produção | Cria rotas HTTP\n\n```bash\nnpm i fastify\n# cors é a segurança do backend, basicamente é quem esta autorizado a consumir dados no meu backend\nnpm i @fastify/cors\n```\n\nInstalando Prisma (ORM)\n\n```bash\nnpm i prisma -D\nnpm i @prisma/client\n```\n\nInstalando gerador de diagrama para DB Prisma\n\n```bash\nnpm i -D prisma-erd-generator @mermaid-js/mermaid-cli\n# adicionar o código abaixo em schema.prisma\ngenerator erd {\n  provider = \"prisma-erd-generator\"\n}\n```\n\nInstalar Dayjs na dependência de produção\n\n```bash\n# biblioteca de manipulação de datas\nnpm install dayjs\n```\n\n### FRONT-END | ViteJs - ReactJs - TypeScript - Tailwindcss - Radix - Axios\n\nCria um projeto com ViteJs\n\n```bash\nnpm create vite@latest\n# Project name: » web | Select a framework: » React | Select a variant: » TypeScript\nnpm install\n```\n\nInstalando arquitetura Tailwindcss\n\n```bash\nnpm install -D tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss\n# Criar arquivo .prettierrc.json na raiz do projeto\n```\n\nCriando tailwind.config.cjs\n\n```bash\nnpx tailwindcss init -p\n```\n\nEditando tailwind.config.cjs\n\n```bash\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\nAdicionando configuração Tailwindcss em src/styles/global.css\n\n```bash\n@tailwind base;\n@tailwind components;\n@tailwind utilities\n```\n\nInstalando biblioteca de ícones Phosphor\n\n```bash\nnpm install phosphor-react\n```\n\nInstalando faker para gerar números aleatórios\n\n```bash\nnpm install @faker-js/faker\n```\n\nInstalar Dayjs na dependência de produção\n\n```bash\n# biblioteca de manipulação de datas\nnpm install dayjs\n```\n\nInstalar componentes do Radix\n\n```bash\nnpm install @radix-ui/react-dialog\nnpm install @radix-ui/react-popover\nnpm install @radix-ui/react-checkbox\n```\n\nInstalar CLSX para criar condicionais em className\n\n```bash\nnpm install clsx\n```\n\nInstalando biblioteca de Axios para comunicação Http\n\n```bash\nnpm install axios\n```\n\n### MOBILE | React-Native - Expo - TypeScript - NativeWind - Axios\n\nInstalando expo-cli globalmente\n\n```bash\nnpm install -g expo-cli\n# verificando a versão instalada\nexpo --version\n```\n\nCriar projeto React Native | Blank | TypeScript\n\n```bash\nnpx create-expo-app mobile --template\n# Choose a template: » Blank (TypeScript)\n```\n\nInstalando expo-font e font Inter do Google\n\n```bash\nnpx expo install expo-font @expo-google-fonts/inter\n```\n\nInstalando biblioteca de navegação entre telas react-navigation\n\n```bash\nnpm install @react-navigation/native\nnpx expo install react-native-screens react-native-safe-area-context\nnpm install @react-navigation/native-stack\n```\n\nInstalando react-native-reanimated para animações\n\n```bash\nnpx expo install react-native-reanimated\n# vá em babel.config.js e atualize os plugins\nplugins: [\"nativewind/babel\", \"react-native-reanimated/plugin\"],\n```\n\nInstalando NativeWind no ambiente de produção (Tailwindcss em React-native)\n\n```bash\nnpm install nativewind\n```\n\nInstalando arquitetura Tailwindcss\n\n```bash\nnpm install -D tailwindcss prettier prettier-plugin-tailwindcss\n# Criar arquivo .prettierrc.json na raiz do projeto\n```\n\nCriando tailwind.config.cjs\n\n```bash\nnpx tailwindcss init\n```\n\nEditando tailwind.config.cjs\n\n```bash\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./App.{js,jsx,ts,tsx}\", \"./src/**/*.{js,jsx,ts,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\nEditando babel.config.js\n\n```bash\n// babel.config.js\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: [\"babel-preset-expo\"],\n    plugins: [\"nativewind/babel\"], // \u003c=====\n  };\n};\n```\n\nCriando types para className\n\n```ts\n// crie um arquivo em uma pasta @types/app.d.ts em src\n// adicione no app.d.ts o script abaixo\n/// \u003creference types=\"nativewind/types\" /\u003e\n```\n\nInstalando biblioteca para ler imagens SGV\n\n```bash\nnpx expo install react-native-svg\nnpm install -D react-native-svg-transformer\n# Obs. tem que criar arquivo na raiz do projeto (metro.config.js)\n```\n\nCriando arquivo na raiz do projeto (metro.config.js)\n\n```javascript\nconst { getDefaultConfig } = require(\"expo/metro-config\");\nmodule.exports = (() =\u003e {\n  const config = getDefaultConfig(__dirname);\n  const { transformer, resolver } = config;\n  config.transformer = {\n    ...transformer,\n    babelTransformerPath: require.resolve(\"react-native-svg-transformer\"),\n  };\n  config.resolver = {\n    ...resolver,\n    assetExts: resolver.assetExts.filter((ext) =\u003e ext !== \"svg\"),\n    sourceExts: [...resolver.sourceExts, \"svg\"],\n  };\n  return config;\n})();\n```\n\nCriando types para svg\n\n```ts\n// crie um arquivo em uma pasta @types/svg.d.ts em src\n// adicione no svg.d.ts o script abaixo\ndeclare module \"*.svg\" {\n  import React from \"react\";\n  import { SvgProps } from \"react-native-svg\";\n  const content: React.FC\u003cSvgProps\u003e;\n  export default content;\n}\n```\n\nInstalando faker para gerar números aleatórios\n\n```bash\nnpm install @faker-js/faker\n```\n\nInstalar Dayjs na dependência de produção\n\n```bash\n# biblioteca de manipulação de datas\nnpm install dayjs\n```\n\nInstalando biblioteca de Axios para comunicação Http\n\n```bash\nnpm install axios\n```\n\nInstalar CLSX para criar condicionais em className\n\n```bash\nnpm install clsx\n```\n\n---\n\n\u0026nbsp;\n\u003ca id=\"-funcionalidades\"\u003e\u003c/a\u003e\n\n## ⚙️ Funcionalidades\n\n### Executando o servidor back-end\n\n```bash\n# development (http://localhost:3000/) | tsx watch src/server.ts\ncd server\nnpm run dev\n```\n\n### ORM Prisma back-end\n\n```bash\ncd server\n# Criando BD prisma SQLite\nnpx prisma init --datasource-provider SQLite\n# criando/atualizando as tabelas do BD no prisma\nnpx prisma migrate dev\n# Enter a name for the new migration: » created tab Habits\n# prisma studio (Verificar tabelas e realizar CRUD manual)\nnpx prisma studio\n# ou\nnpx prisma studio -b firefox -p 5173\n# -b firefox p/ especificar navegador\n# -p 5173 p/ especificar porta\n# ou\nnpm run db\n# Gerando diagrama de banco de dados Prisma\nnpx prisma generate\n# ou\nnpm run diagrama\n# Criando Seed, lançamentos de dados para testes\nnpx prisma db seed\n```\n\n![diagrama db](https://raw.githubusercontent.com/LivioAlvarenga/Nlw-Setup/d38430aa86f096acba43d797c529d7c9fe8f932b/server/prisma/ERD.svg)\n\n### Executando o aplicativo mobile\n\n```bash\ncd mobile\nnpx expo start\n# Iniciando com a cash limpa\nnpx expo start --clear\n```\n\n### Executando o aplicativo web\n\n```bash\ncd web\nnpm run dev\n```\n\n---\n\n\u0026nbsp;\n\u003ca id=\"-licença\"\u003e\u003c/a\u003e\n\n## 📝 Licença\n\nEste projeto é [MIT licensed](./LICENSE).\n\n##### _#CompartilheConhecimento_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJoyceFatima%2Fnlw-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJoyceFatima%2Fnlw-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJoyceFatima%2Fnlw-setup/lists"}