Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexandrecpedro/habits-setup
Habits platform for web and mobile - NLW Setup
https://github.com/alexandrecpedro/habits-setup
expo fastify figma ignite-rocketseat nodejs phosphoricons postcss prisma react react-native reactnavigation rocketseat sqlite3 tailwindcss typescript
Last synced: 8 days ago
JSON representation
Habits platform for web and mobile - NLW Setup
- Host: GitHub
- URL: https://github.com/alexandrecpedro/habits-setup
- Owner: alexandrecpedro
- Created: 2023-01-18T01:12:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T19:34:47.000Z (over 1 year ago)
- Last Synced: 2024-11-09T08:29:50.986Z (2 months ago)
- Topics: expo, fastify, figma, ignite-rocketseat, nodejs, phosphoricons, postcss, prisma, react, react-native, reactnavigation, rocketseat, sqlite3, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 1.67 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
NLW Setup
| | | |
| :---------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------: |
| 
| 
| 
|
| 
| 
| 
|
The Project •
Target •
Technologies •
Route •
How to Use
📓 The Project
NLW Setup platform to control of habits and activities carried out daily (web platform and mobile)
💡 Target
Development 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
🛠 Technologies
The following tools were used in building the project:
| Type | Tools | References |
| :----------------------------------------------: | :-----------------------: | :-------------------------------: |
| IDE | VS CODE | https://code.visualstudio.com/ |
| Design Interface Tool | FIGMA (Prototype - UX/UI) | https://www.figma.com/ |
| Programming Language (Frontend) | REACT | https://reactjs.org/ |
| Programming Language (Mobile) | REACT NATIVE | https://reactnative.dev/ |
| Programming Language (Backend, Frontend, Mobile) | TYPESCRIPT | https://www.typescriptlang.org/ |
| API and backend services (Backend) | NODE.JS | https://nodejs.org/ |
| NodeJS web framework (Backend) | FASTIFY | https://www.fastify.io/ |
| Open source API development ecosystem (Testing) | HOPPSCOTCH | https://hoppscotch.io/ |
| Open source platform (Mobile) | EXPO BARE WORKFLOW | https://expo.dev/ |
| Utility-first CSS Framework (Frontend) | TAILWIND CSS | https://tailwindcss.com/ |
| Tool for transforming CSS with JavaScript | POST CSS | https://postcss.org/ |
| Graphic components (Frontend, Mobile) | PHOSPHOR ICONS | https://phosphoricons.com/ |
| UI Utility-first Component Library (Mobile) | NATIVE BASE | https://nativebase.io/ |
| Navigation between pages (Mobile) | REACT NAVIGATION | https://reactnavigation.org/ |
| Database (Backend) | SQLITE | https://www.sqlite.org/index.html |
| Promise based HTTP client - browser & Node.js | AXIOS | https://axios-http.com/ |
| UI Components for React | RADIX-UI | https://www.radix-ui.com/ |
| Node.js and TypeScript ORM (Backend, Database) | PRISMA | https://www.prisma.io/ |
| Tool to build frontend faster (Frontend) | VITE.JS | https://vitejs.dev/ |
Backend | API
Testing
Database
IDE
UX/UI
Frontend
Mobile
🔎 Route
- Part 1 - Starting the project end-to-end
- Build the project prototype: https://www.figma.com/file/zYhLAnJ0IPZjN4FsZ0GX8r/Habits-(i)-(Community)?node-id=6%3A343&t=eYeBEtKtUvGaZ9zz-0
- Install VS Code (IDE)
- Install VS Code extensions: NodeJS, Prisma, Tailwind CSS IntelliSense, PostCSS Language Support, Symbols, Fluent Icons, DotENV
-
Backend project
- Create a new project: mkdir backend
- Enter backend project: cd backend
- Install Node and start: npm init -y
- Install Fastify framework: npm i fastify
- Configure server and ports: ./src/server.ts
- Install TypeScript for development environment:
- npm i typescript -D
- npx tsc --init (Settings file for TS)
- npm i tsx -D (Automatically updates)
- Change ts config file: ./tsconfig.json
- Configure the package.json: ./package.json
- Run the application: npm run dev
- Define "Use Cases"
- Set routes: ./src/server.ts
- Install and set Prisma
- Install (for development): npm i prisma -D
- Install Prisma Client: npm i @prisma/client
- Install Prisma ERD Generator: npm i prisma-erd-generator @mermaid-js/mermaid-cli -D
- Set Database SQLite: npx prisma init --datasource-provider SQLite
- Create tables and entities: ./prisma/schema.prisma
- Run migrations: npx prisma migrate dev
- Name for the new migration: create the rest of the tables
- Name for the new migration: create habits
- Name for the new migration: create relations
- To see DB generated from Prisma: npx prisma studio
- Generate: npx prisma generate
- Cors library (Protection for non-desirable access)
- npm i @types/cors -D
- npm i @types/cors
- npm i @fastify/cors
-
Frontend project
- Create the frontend project (React, Vite.js and TypeScript): npm create vite@latest
- Install TailwindCSS: npm i -D tailwindcss postcss autoprefixer
- Start Tailwind: npx tailwindcss init -p
- Customize contents, themes, fonts and plugins with Tailwind: ./tailwind.config.js
- Customize the main style: ./src/styles/global.css
- To run project: npm run dev
-
Mobile project
- Install "R Component" extension at VS Code
- Install Expo CLI: npm install --global expo-cli
- Create a new project: npx create-expo-app mobile --template
- Navigate to project directory: cd mobile
- Open the project on VS Code: code .
- Change App.js to App.tsx
- Create and set tsconfig.json at root
- Run Expo Go: npx expo start
- Install Native Base on project:
- npm install native-base
- npx expo install react-native-svg
- npx expo install react-native-safe-area-context
- Install React Navigation on project:
- npx expo install @react-navigation/native
- npx expo install react-native-screens
- npx expo install react-native-safe-area-context
- npx expo install @react-navigation/native-stack
- Install Google Fonts: npx expo install expo-font @expo-google-fonts/roboto
- Install Linear Gradient libary: npx expo install expo-linear-gradient
- Set images, theme and utils for the project: ./src/styles/theme.ts
- Create the Splash Page
- Create components: Loading
- Create screens: StatusBar
- Use React Hooks: useState, useEffect, ...
- Start the development server: npx expo start
- Configure the Expo Go on a mobile device or use an emulator
- Open the app on a mobile device:
- On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code you see in the terminal
- On 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.
- Part 2 - Advancing the backend and frontend
-
Backend project
- Define "Use Cases"
- Set routes
- Install and set Prisma
- Install Prisma Entity Relationship Diagram Generator: npm i -D prisma-erd-generator @mermaid-js/mermaid-cli
- Generate: npx prisma generate
- Create Seed: ./prisma/seed.ts
- Run seed: npx prisma db seed
- Zod: npm i zod
- Day.JS: npm i dayjs
-
Frontend project
- Convert a svg file (Logo) code to React component: https://svg2jsx.com/
- Install Day.JS: npm i dayjs
- Install Phosphor Icons: npm i phosphor-react
- Set Google Fonts: ./index.html
- Set the Landing Page: ./src/App.tsx
-
Mobile project
- Set images, theme and utils for the project
- Load customized font: ./src/App.tsx
- Create the Splash Page
- Create components: HabitDay, Header, Loading
- Create Home screen: ./src/screens/Home.tsx
- React Native Phosphor Icon Library: npm install --save phosphor-react-native
- React Native Svg Library: expo install react-native-svg
- Use UI Icons
- Vector-Icons (Expo): MaterialIcons
- Phosphor Icon React Native: CheckBox
- Comunnicate to TS which routes are available: ./src/@types/navigation.d.ts
- Part 3 - Ending web and mobile layout
-
Backend project
- Set routes: ./src/routes.ts
-
Frontend project
- Create feature: modal
- Install Radix-UI: npm i @radix-ui/react-dialog
- Install Radix-UI: npm i @radix-ui/react-popover
- Install CLSX: npm i clsx
- Get form data
- Day detail popover
- Synchronize completed habit
-
Mobile project
- Habit screen: ./src/screens/Habit.tsx
- Register a new habit
- Show habit details
- Implementing Navigation
- Create app routes
- Native Stack Navigator: ./src/routes/app.routes.tsx
- Navigation Strategy: ./src/routes/index.tsx
- Comunnicate to TS which routes are available: ./src/@types/navigation.d.ts
- Navigate to register screen: ./src/screens/New.tsx
- Set navigation routes types
- Navigate to habit screen: ./src/screens/Habit.tsx
- Create register habits interface
- Create components: BackButton, Checkbox
- Implementing back button at register screen
- New habit input
- List a checkbox for each day of the week
- Create the check/uncheck checkbox function
- Confirm button
- Use ScrollView to enable scrolling
- Create the daily habits interface
- Navigate to habit screen
- Use ScrollView to enable scrolling
- Reuse the BackButton component
- Passing and retrieving date as route parameter
- Format and display the day of the week
- Format and display the day/month
- Create ProgressBar component
- Use Checkbox component
-
Testing
- Test backend at Hoppscotch: https://hoppscotch.io/
- Part 4 - Connecting the API
-
Frontend project
- Use Radix UI Components
- Checkbox = npm install @radix-ui/react-checkbox
- Select = npm install @radix-ui/react-select
- Toggle Group = npm install @radix-ui/react-toggle-group
- Get form data
- Syncing completed habits
- Connection with back-end
- Send modal values to API (backend service)
- Axios: npm install axios
- Set HTTP client
- Fetching API summary
- Using API data at Popover
- Register a new habit
-
Mobile project
- Starting the server
- Installing the Axios
- Set server access
- Home
- Listing the summary
- Using Loading component
- Passing properties in HabitDay component
- Creating a function to calculate the percentage of progress
- Using clsx to use conditional classes: npm i --save clsx
- New
- Getting form data
- Registering and sending new habit to API
- Connect with API (backend service)
- Part 5 - The next level
-
Frontend project
- List possible habits of the day
- HabitsList component: ./src/components/HabitsList.tsx
- Disabling on past dates
- Syncing completed habits
- Adding transitions and focus
-
Mobile project
- Habit
- Fetch the habits of the selected day in the API
- Display the list of habits of the day
- Create empty habit list component: ./src/components/HabitsEmpty.tsx
- Check if selected date is passed and show message you can't edit
- Show the progress
- Send the habit status (performed or not) to the API
- Using the useFocusEffect to update the home when returning
- Animation
- Getting to know React Native Reanimated
- Installing and configuring Reanimated in the application: npx expo install react-native-reanimated
- Animate the ProgressBar
- Animate the Checkbox
- Testing all
🧪 How to use
- Set the development environment at you local computer
- Clone the repository
- git clone https://github.com/alexandrecpedro/habits-setup
- Enter the project directory:
- cd habits-setup
-
Testing
- Backend
- Enter the directory
- cd backend
- Install the dependencies
- npm install
- Run
- npm run dev
- Frontend
- Enter the directory
- cd frontend
- Install the dependencies
- npm install
- Run
- npm run dev
- Mobile
- Enter the directory
- cd mobile
- Before run the mobile app, check if the following tools are already installed:
- Node.js LTS release
- https://nodejs.org/en/
- Git
- https://git-scm.com/downloads
- Watchman (only for MacOS and Linux users)
- https://facebook.github.io/watchman/docs/install#buildinstall
- Expo CLI
- npm install --global expo-cli
- Install the dependencies
- npx install-expo-modules@latest
- npm install expo
- expo install
- npm install
- Run
- npx expo start