{"id":19153404,"url":"https://github.com/alexandrecpedro/habits-setup","last_synced_at":"2026-04-10T03:58:39.386Z","repository":{"id":112109653,"uuid":"590250974","full_name":"alexandrecpedro/habits-setup","owner":"alexandrecpedro","description":"Habits platform for web and mobile - NLW Setup","archived":false,"fork":false,"pushed_at":"2023-05-16T19:34:47.000Z","size":1749,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-03T19:16:44.582Z","etag":null,"topics":["expo","fastify","figma","ignite-rocketseat","nodejs","phosphoricons","postcss","prisma","react","react-native","reactnavigation","rocketseat","sqlite3","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexandrecpedro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-18T01:12:19.000Z","updated_at":"2023-03-04T01:45:54.000Z","dependencies_parsed_at":"2024-11-09T08:35:15.975Z","dependency_job_id":null,"html_url":"https://github.com/alexandrecpedro/habits-setup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fhabits-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fhabits-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fhabits-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fhabits-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandrecpedro","download_url":"https://codeload.github.com/alexandrecpedro/habits-setup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240236344,"owners_count":19769581,"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":["expo","fastify","figma","ignite-rocketseat","nodejs","phosphoricons","postcss","prisma","react","react-native","reactnavigation","rocketseat","sqlite3","tailwindcss","typescript"],"created_at":"2024-11-09T08:22:59.846Z","updated_at":"2025-12-30T19:10:28.034Z","avatar_url":"https://github.com/alexandrecpedro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align = \"center\"\u003e\n  \u003ch1\u003e NLW Setup \u003c/h1\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\" NLW Setup Platform - Desktop\" src=\"./project/screens/screen1.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\"New Habit - Desktop\" src=\"./project/screens/screen2.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n|                                                                                     |                                                                                   |                                                                                        |\n| :---------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------: |\n|   \u003cimg width=\"1604\" alt=\"Splash Page - Mobile\" src=\"./project/screens/screen3.png\"\u003e    |   \u003cimg width=\"1604\" alt=\"Home Page - Mobile\" src=\"./project/screens/screen4.png\"\u003e   |   \u003cimg width=\"1604\" alt=\"Specific Day - Mobile\" src=\"./project/screens/screen5.png\"\u003e   |\n|   \u003cimg width=\"1604\" alt=\"New Habit - Mobile\" src=\"./project/screens/screen6.png\"\u003e   | \u003cimg width=\"1604\" alt=\"Home (no history) - Mobile\" src=\"./project/screens/screen7.png\"\u003e | \u003cimg width=\"1604\" alt=\"Specific Day (no history) - Mobile\" src=\"./project/screens/screen8.png\"\u003e |\n\n\u003cbr\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#theproject\"\u003eThe Project\u003c/a\u003e •\n \u003ca href=\"#target\"\u003eTarget\u003c/a\u003e •\n \u003ca href=\"#technologies\"\u003eTechnologies\u003c/a\u003e •\n \u003ca href=\"#route\"\u003eRoute\u003c/a\u003e •\n \u003ca href=\"#howtouse\"\u003eHow to Use\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"theproject\"\u003e\n\u003ch2\u003e 📓 The Project \u003c/h2\u003e\n\u003cp\u003e NLW Setup platform to control of habits and activities carried out daily (web platform and mobile) \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"target\"\u003e\n\u003ch2\u003e 💡 Target \u003c/h2\u003e\nDevelopment of an NLW Setup platform to control of habits and activities carried out daily (web platform and mobile versions) at NLW (Next Level Week), from Rocketseat\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"technologies\"\u003e\n\u003ch2\u003e 🛠 Technologies \u003c/h2\u003e\nThe following tools were used in building the project:\u003cbr\u003e\u003cbr\u003e\n\n|                       Type                       |           Tools           |            References             |\n| :----------------------------------------------: | :-----------------------: | :-------------------------------: |\n|                       IDE                        |          VS CODE          |  https://code.visualstudio.com/   |\n|              Design Interface Tool               | FIGMA (Prototype - UX/UI) |      https://www.figma.com/                |\n|         Programming Language (Frontend)          |           REACT           |       https://reactjs.org/                |\n|          Programming Language (Mobile)           |       REACT NATIVE        |     https://reactnative.dev/                |\n| Programming Language (Backend, Frontend, Mobile) |        TYPESCRIPT         |  https://www.typescriptlang.org/ |\n|        API and backend services (Backend)        |          NODE.JS          |        https://nodejs.org/                |\n|          NodeJS web framework (Backend)          |          FASTIFY          |      https://www.fastify.io/                |\n| Open source API development ecosystem (Testing)  |        HOPPSCOTCH         |      https://hoppscotch.io/                 |\n|          Open source platform (Mobile)           |    EXPO BARE WORKFLOW     |         https://expo.dev/                |\n|      Utility-first CSS Framework (Frontend)       |       TAILWIND CSS        |     https://tailwindcss.com/                |\n|    Tool for transforming CSS with JavaScript     |         POST CSS          |       https://postcss.org/                |\n|      Graphic components (Frontend, Mobile)       |      PHOSPHOR ICONS       |    https://phosphoricons.com/                |\n|    UI Utility-first Component Library (Mobile)    |        NATIVE BASE        |      https://nativebase.io/                 |\n|        Navigation between pages (Mobile)         |     REACT NAVIGATION      |  https://reactnavigation.org/                |\n|                Database (Backend)                |          SQLITE           | https://www.sqlite.org/index.html          |\n|  Promise based HTTP client - browser \u0026 Node.js   |           AXIOS           |      https://axios-http.com/                |\n|             UI Components for React              |         RADIX-UI          |     https://www.radix-ui.com/                |\n|  Node.js and TypeScript ORM (Backend, Database)  |          PRISMA           |      https://www.prisma.io/                 |\n|     Tool to build frontend faster (Frontend)     |          VITE.JS          |        https://vitejs.dev/                |\n\u003cbr\u003e\n\n\u003cdiv align = 'center'\u003e\n  \u003ch3\u003eBackend | API\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg\"/\u003e\n  \u003c!-- \u003cimg height =' 100px ' left=' 20px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg\"/\u003e --\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003c!-- \u003cimg height =' 100px ' left='80px' src=\"https://jwt.io/img/logo-asset.svg\" /\u003e --\u003e\n  \u003cbr\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/fastify_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eTesting\u003c/h3\u003e\n  \u003cimg width =' 100px ' src=\"./project/logo/hoppscotch_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eDatabase\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sqlite/sqlite-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/prisma_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eIDE\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eUX/UI\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/phosphor-icons_logo.png\"/\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/nativebase_logo.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eFrontend\u003c/h3\u003e\n  \u003cimg width =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\" /\u003e\n  \u003cimg width =' 100px ' left='80px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original-wordmark.svg\"/\u003e\n  \u003cbr\u003e\n  \u003cimg height =' 50px ' src=\"./project/logo/tailwind-css_logo.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eMobile\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/react_navigation.svg\" /\u003e\n  \u003cimg height =' 100px ' left='80px' src=\"./project/logo/expo.png\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cdiv id=\"route\"\u003e\n\u003ch2\u003e 🔎 Route \u003c/h2\u003e\n  \u003col\u003e\n    \u003cli \u0026nbsp;\u003ePart 1 - Starting the project end-to-end\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003eBuild the project prototype: https://www.figma.com/file/zYhLAnJ0IPZjN4FsZ0GX8r/Habits-(i)-(Community)?node-id=6%3A343\u0026t=eYeBEtKtUvGaZ9zz-0\u003c/li\u003e\n        \u003cli\u003eInstall VS Code (IDE)\u003c/li\u003e\n        \u003cli\u003eInstall VS Code extensions: NodeJS, Prisma, Tailwind CSS IntelliSense, PostCSS Language Support, Symbols, Fluent Icons, DotENV\u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eBackend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate a new project: mkdir backend\u003c/li\u003e\n            \u003cli\u003eEnter backend project: cd backend\u003c/li\u003e\n            \u003cli\u003eInstall Node and start: npm init -y\u003c/li\u003e\n            \u003cli\u003eInstall Fastify framework: npm i fastify\u003c/li\u003e\n            \u003cli\u003eConfigure server and ports: ./src/server.ts\u003c/li\u003e\n            \u003cli\u003eInstall TypeScript for development environment:\n              \u003cul\u003e\n                \u003cli\u003enpm i typescript -D\u003c/li\u003e\n                \u003cli\u003enpx tsc --init (Settings file for TS)\u003c/li\u003e\n                \u003cli\u003enpm i tsx -D (Automatically updates)\u003c/li\u003e\n                \u003cli\u003eChange ts config file: ./tsconfig.json\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eConfigure the package.json: ./package.json \u003c/li\u003e\n            \u003cli\u003eRun the application: npm run dev\u003c/li\u003e\n            \u003cli\u003eDefine \"Use Cases\"\u003c/li\u003e\n            \u003cli\u003eSet routes: ./src/server.ts\u003c/li\u003e\n            \u003cli\u003eInstall and set Prisma\n              \u003cul\u003e\n                \u003cli\u003eInstall (for development): npm i prisma -D\u003c/li\u003e\n                \u003cli\u003eInstall Prisma Client: npm i @prisma/client\u003c/li\u003e\n                \u003cli\u003eInstall Prisma ERD Generator: npm i prisma-erd-generator @mermaid-js/mermaid-cli -D\u003c/li\u003e\n                \u003cli\u003eSet Database SQLite: npx prisma init --datasource-provider SQLite\u003c/li\u003e\n                \u003cli\u003eCreate tables and entities: ./prisma/schema.prisma\u003c/li\u003e\n                \u003cli\u003eRun migrations: npx prisma migrate dev\n                  \u003cul\u003e\n                    \u003cli\u003eName for the new migration: create the rest of the tables\u003c/li\u003e\n                    \u003cli\u003eName for the new migration: create habits\u003c/li\u003e\n                    \u003cli\u003eName for the new migration: create relations\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eTo see DB generated from Prisma: npx prisma studio\u003c/li\u003e\n                \u003cli\u003eGenerate: npx prisma generate\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eCors library (Protection for non-desirable access) \n              \u003cul\u003e\n                \u003cli\u003e npm i @types/cors -D \u003c/li\u003e\n                \u003cli\u003e npm i @types/cors \u003c/li\u003e\n                \u003cli\u003e npm i @fastify/cors \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate the frontend project (React, Vite.js and TypeScript): npm create vite@latest\u003c/li\u003e\n            \u003cli\u003eInstall TailwindCSS: npm i -D tailwindcss postcss autoprefixer\u003c/li\u003e\n            \u003cli\u003eStart Tailwind: npx tailwindcss init -p\u003c/li\u003e\n            \u003cli\u003eCustomize contents, themes, fonts and plugins with Tailwind: ./tailwind.config.js\u003c/li\u003e\n            \u003cli\u003eCustomize the main style: ./src/styles/global.css\u003c/li\u003e\n            \u003cli\u003eTo run project: npm run dev\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall \"R Component\" extension at VS Code\u003c/li\u003e\n            \u003cli\u003eInstall Expo CLI: npm install --global expo-cli\u003c/li\u003e\n            \u003cli\u003eCreate a new project: npx create-expo-app mobile --template\u003c/li\u003e\n            \u003cli\u003eNavigate to project directory: cd mobile\u003c/li\u003e\n            \u003cli\u003eOpen the project on VS Code: code .\u003c/li\u003e\n            \u003cli\u003eChange App.js to App.tsx\u003c/li\u003e\n            \u003cli\u003eCreate and set tsconfig.json at root\u003c/li\u003e\n            \u003cli\u003eRun Expo Go: npx expo start\u003c/li\u003e\n            \u003cli\u003eInstall Native Base on project:\n              \u003cul\u003e\n                \u003cli\u003enpm install native-base\u003c/li\u003e\n                \u003cli\u003enpx expo install react-native-svg \u003c/li\u003e\n                \u003cli\u003enpx expo install react-native-safe-area-context\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eInstall React Navigation on project:\n              \u003cul\u003e\n                \u003cli\u003enpx expo install @react-navigation/native\u003c/li\u003e\n                \u003cli\u003enpx expo install react-native-screens\u003c/li\u003e\n                \u003cli\u003enpx expo install react-native-safe-area-context\u003c/li\u003e\n                \u003cli\u003enpx expo install @react-navigation/native-stack\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eInstall Google Fonts: npx expo install expo-font @expo-google-fonts/roboto\u003c/li\u003e\n            \u003cli\u003eInstall Linear Gradient libary: npx expo install expo-linear-gradient\u003c/li\u003e\n            \u003cli\u003eSet images, theme and utils for the project: ./src/styles/theme.ts\u003c/li\u003e\n            \u003cli\u003eCreate the Splash Page\u003c/li\u003e\n            \u003cli\u003eCreate components: Loading \u003c/li\u003e\n            \u003cli\u003eCreate screens: StatusBar\u003c/li\u003e\n            \u003cli\u003eUse React Hooks: useState, useEffect, ...\u003c/li\u003e\n            \u003cli\u003eStart the development server: npx expo start\u003c/li\u003e\n            \u003cli\u003eConfigure the Expo Go on a mobile device or use an emulator\u003c/li\u003e\n            \u003cli\u003eOpen the app on a mobile device:\n              \u003cul\u003e\n                \u003cli\u003eOn your iPhone or iPad, open the default Apple \"Camera\" app and scan the QR code you see in the terminal\u003c/li\u003e\n                \u003cli\u003eOn your Android device, press \"Scan QR Code\" on the \"Projects\" tab of the Expo Go app and scan the QR code you see in the terminal.\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 2 - Advancing the backend and frontend\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eBackend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eDefine \"Use Cases\"\u003c/li\u003e\n            \u003cli\u003eSet routes\u003c/li\u003e\n            \u003cli\u003eInstall and set Prisma\n              \u003cul\u003e\n                \u003cli\u003eInstall Prisma Entity Relationship Diagram Generator: npm i -D prisma-erd-generator @mermaid-js/mermaid-cli\u003c/li\u003e\n                \u003cli\u003eGenerate: npx prisma generate\u003c/li\u003e\n                \u003cli\u003eCreate Seed: ./prisma/seed.ts\u003c/li\u003e\n                \u003cli\u003eRun seed: npx prisma db seed\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eZod: npm i zod\u003c/li\u003e\n            \u003cli\u003eDay.JS: npm i dayjs\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eConvert a svg file (Logo) code to React component: https://svg2jsx.com/\u003c/li\u003e\n            \u003cli\u003eInstall Day.JS: npm i dayjs\u003c/li\u003e\n            \u003cli\u003eInstall Phosphor Icons: npm i phosphor-react\u003c/li\u003e\n            \u003cli\u003eSet Google Fonts: ./index.html\u003c/li\u003e\n            \u003cli\u003eSet the Landing Page: ./src/App.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eSet images, theme and utils for the project\u003c/li\u003e\n            \u003cli\u003eLoad customized font: ./src/App.tsx\u003c/li\u003e\n            \u003cli\u003eCreate the Splash Page\u003c/li\u003e\n            \u003cli\u003eCreate components: HabitDay, Header, Loading\u003c/li\u003e\n            \u003cli\u003eCreate Home screen: ./src/screens/Home.tsx\u003c/li\u003e\n            \u003cli\u003eReact Native Phosphor Icon Library: npm install --save phosphor-react-native\u003c/li\u003e\n            \u003cli\u003eReact Native Svg Library: expo install react-native-svg\u003c/li\u003e\n            \u003cli\u003eUse UI Icons\n              \u003cul\u003e\n                \u003cli\u003eVector-Icons (Expo): MaterialIcons\u003c/li\u003e\n                \u003cli\u003ePhosphor Icon React Native: CheckBox \u003c/li\u003e\n                \u003cli\u003eComunnicate to TS which routes are available: ./src/@types/navigation.d.ts\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 3 - Ending web and mobile layout\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e \n        \u003cli \u0026nbsp;\u003e\u003cb\u003eBackend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eSet routes: ./src/routes.ts\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate feature: modal\n              \u003cul\u003e\n                \u003cli\u003eInstall Radix-UI: npm i @radix-ui/react-dialog \u003c/li\u003e\n                \u003cli\u003eInstall Radix-UI: npm i @radix-ui/react-popover \u003c/li\u003e\n                \u003cli\u003eInstall CLSX: npm i clsx \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eGet form data\u003c/li\u003e\n            \u003cli\u003eDay detail popover\u003c/li\u003e\n            \u003cli\u003eSynchronize completed habit\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eHabit screen: ./src/screens/Habit.tsx\n              \u003cul\u003e\n                \u003cli\u003eRegister a new habit\u003c/li\u003e\n                \u003cli\u003eShow habit details\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eImplementing Navigation\n              \u003cul\u003e\n                \u003cli\u003eCreate app routes\n                  \u003cul\u003e\n                    \u003cli\u003eNative Stack Navigator: ./src/routes/app.routes.tsx\u003c/li\u003e\n                    \u003cli\u003eNavigation Strategy: ./src/routes/index.tsx\u003c/li\u003e\n                    \u003cli\u003eComunnicate to TS which routes are available: ./src/@types/navigation.d.ts\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eNavigate to register screen: ./src/screens/New.tsx\u003c/li\u003e\n                \u003cli\u003eSet navigation routes types\u003c/li\u003e\n                \u003cli\u003eNavigate to habit screen: ./src/screens/Habit.tsx\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eCreate register habits interface\n              \u003cul\u003e\n                \u003cli\u003eCreate components: BackButton, Checkbox\u003c/li\u003e\n                \u003cli\u003eImplementing back button at register screen\u003c/li\u003e\n                \u003cli\u003eNew habit input\u003c/li\u003e\n                \u003cli\u003eList a checkbox for each day of the week\u003c/li\u003e\n                \u003cli\u003eCreate the check/uncheck checkbox function\u003c/li\u003e\n                \u003cli\u003eConfirm button\u003c/li\u003e\n                \u003cli\u003eUse ScrollView to enable scrolling\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eCreate the daily habits interface\n              \u003cul\u003e\n                \u003cli\u003eNavigate to habit screen\u003c/li\u003e\n                \u003cli\u003eUse ScrollView to enable scrolling\u003c/li\u003e\n                \u003cli\u003eReuse the BackButton component\u003c/li\u003e\n                \u003cli\u003ePassing and retrieving date as route parameter\u003c/li\u003e\n                \u003cli\u003eFormat and display the day of the week\u003c/li\u003e\n                \u003cli\u003eFormat and display the day/month\u003c/li\u003e\n                \u003cli\u003eCreate ProgressBar component\u003c/li\u003e\n                \u003cli\u003eUse Checkbox component\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eTesting\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eTest backend at Hoppscotch: https://hoppscotch.io/\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 4 - Connecting the API\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eUse Radix UI Components \n              \u003cul\u003e\n                \u003cli\u003eCheckbox = npm install @radix-ui/react-checkbox\u003c/li\u003e\n                \u003cli\u003eSelect = npm install @radix-ui/react-select\u003c/li\u003e\n                \u003cli\u003eToggle Group = npm install @radix-ui/react-toggle-group\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eGet form data\u003c/li\u003e\n            \u003cli\u003eSyncing completed habits\u003c/li\u003e\n            \u003cli\u003eConnection with back-end\n              \u003cul\u003e\n                \u003cli\u003eSend modal values to API (backend service)\n                  \u003cul\u003e\n                    \u003cli\u003eAxios: npm install axios\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eSet HTTP client\u003c/li\u003e\n                \u003cli\u003eFetching API summary\u003c/li\u003e\n                \u003cli\u003eUsing API data at Popover\u003c/li\u003e\n                \u003cli\u003eRegister a new habit\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eStarting the server\u003c/li\u003e\n            \u003cli\u003eInstalling the Axios\n              \u003cul\u003e\n                \u003cli\u003eSet server access\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eHome\n              \u003cul\u003e\n                \u003cli\u003eListing the summary\u003c/li\u003e\n                \u003cli\u003eUsing Loading component\u003c/li\u003e\n                \u003cli\u003ePassing properties in HabitDay component\n                  \u003cul\u003e\n                    \u003cli\u003eCreating a function to calculate the percentage of progress\u003c/li\u003e\n                    \u003cli\u003eUsing clsx to use conditional classes: npm i --save clsx\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eNew\n                  \u003cul\u003e\n                    \u003cli\u003eGetting form data\u003c/li\u003e\n                    \u003cli\u003eRegistering and sending new habit to API\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eConnect with API (backend service)\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e \n    \u003c/li\u003e \n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 5 - The next level\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eList possible habits of the day\n              \u003cul\u003e\n                \u003cli\u003eHabitsList component: ./src/components/HabitsList.tsx\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eDisabling on past dates\u003c/li\u003e\n            \u003cli\u003eSyncing completed habits\u003c/li\u003e\n            \u003cli\u003eAdding transitions and focus\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eHabit\n              \u003cul\u003e\n                \u003cli\u003eFetch the habits of the selected day in the API\u003c/li\u003e\n                \u003cli\u003eDisplay the list of habits of the day\u003c/li\u003e\n                \u003cli\u003eCreate empty habit list component: ./src/components/HabitsEmpty.tsx\u003c/li\u003e\n                \u003cli\u003eCheck if selected date is passed and show message you can't edit\u003c/li\u003e\n                \u003cli\u003eShow the progress\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eSend the habit status (performed or not) to the API\n              \u003cul\u003e\n                \u003cli\u003eUsing the useFocusEffect to update the home when returning\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eAnimation\n              \u003cul\u003e\n                \u003cli\u003eGetting to know React Native Reanimated\u003c/li\u003e\n                \u003cli\u003eInstalling and configuring Reanimated in the application: npx expo install react-native-reanimated\u003c/li\u003e\n                \u003cli\u003eAnimate the ProgressBar\u003c/li\u003e\n                \u003cli\u003eAnimate the Checkbox\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eTesting all\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e \n    \u003c/li\u003e\n    \u003cbr\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"howtouse\"\u003e\n\u003ch2\u003e🧪 How to use\u003c/h2\u003e\n  \u003col \u0026nbsp;\u003e\n    \u003cli \u0026nbsp;\u003eSet the development environment at you local computer\u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eClone the repository\n      \u003cul\u003e\n        \u003cli\u003egit clone https://github.com/alexandrecpedro/habits-setup\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eEnter the project directory:\n      \u003cul\u003e\n        \u003cli\u003ecd habits-setup\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003cb\u003eTesting\u003c/b\u003e\n      \u003cul\u003e\n        \u003cli \u0026nbsp;\u003e\u003cu\u003eBackend\u003c/u\u003e\n          \u003col\u003e\n            \u003cli \u0026nbsp;\u003eEnter the directory\n              \u003cul\u003e\n                \u003cli\u003ecd backend\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eInstall the dependencies\n              \u003cul\u003e\n                \u003cli\u003enpm install\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eRun\n              \u003cul\u003e\n                \u003cli\u003enpm run dev\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cu\u003eFrontend\u003c/u\u003e\n          \u003col\u003e\n            \u003cli \u0026nbsp;\u003eEnter the directory\n              \u003cul\u003e\n                \u003cli\u003ecd frontend\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eInstall the dependencies\n              \u003cul\u003e\n                \u003cli\u003enpm install\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eRun\n              \u003cul\u003e\n                \u003cli\u003enpm run dev\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cu\u003eMobile\u003c/u\u003e\n          \u003col\u003e\n            \u003cli \u0026nbsp;\u003eEnter the directory\n              \u003cul\u003e\n                \u003cli\u003ecd mobile\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eBefore run the mobile app, check if the following tools are already installed:\n              \u003cul\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eNode.js LTS release\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003ehttps://nodejs.org/en/\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eGit\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003ehttps://git-scm.com/downloads\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eWatchman (only for MacOS and Linux users)\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003ehttps://facebook.github.io/watchman/docs/install#buildinstall\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli \u0026nbsp;\u003e\u003cu\u003eExpo CLI\u003c/u\u003e\n                  \u003cul\u003e\n                    \u003cli\u003enpm install --global expo-cli\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eInstall the dependencies\n              \u003cul\u003e\n                \u003cli\u003enpx install-expo-modules@latest\u003c/li\u003e\n                \u003cli \u0026nbsp;\u003enpm install expo\u003c/li\u003e\n                \u003cli \u0026nbsp;\u003eexpo install\u003c/li\u003e\n                \u003cli \u0026nbsp;\u003enpm install\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eRun\n              \u003cul\u003e\n                \u003cli\u003enpx expo start\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fhabits-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrecpedro%2Fhabits-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fhabits-setup/lists"}