The Project • Target • Technologies • Route • How to Use
NLW World Cup platform to create your own cup poll and share it with friends (web platform and mobile)
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/ |
The React Framework (Frontend) | NEXT.JS | https://nextjs.org/ |
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/ |
Node.js and TypeScript ORM (Backend, Database) | PRISMA | https://www.prisma.io/ |
Security | JWT | https://jwt.io/ |
- Part 1 - Starting the Project
- Build the project prototype: https://www.figma.com/file/iaK2Ajow4JRBce1EryNJR2/Bol%C3%A3o-da-Copa-(Community)?node-id=1%3A2
- Install VS Code (IDE)
- Install VS Code extensions: NodeJS, Prisma, SQLite, Tailwind CSS IntelliSense, PostCSS Language Support
- 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 table polls
- To see DB generated from Prisma: npx prisma studio
- Generate: npx prisma generate
- Cors library (Protection for non-desirable access): npm i @fastify/cors
- Frontend project
- Create the frontend project (React, Next.js and TypeScript): npx create-next-app@latest --use-npm
- Set HTTP requisition on Server Side Handler with Next.JS: ./pages/index.tsx
- 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
- 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: SignIn
- 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 - Creating routes and access
- Backend project
- Relation between entities: ./prisma/schema.prisma
- Run migrations: npx prisma migrate dev
- Name for the new migration: create db structure
- Seeders:
- Create new seed file: create table polls
- Configure the package.json: ./package.json
- Run: npx prisma db seed
- Install libraries:
- ZOD library (validation): npm i zod
- Short Unique ID library: npm i short-unique-id
- Create new routes: ./src/server.ts
- Create new bet/poll
- Count guesses
- Count polls
- Count users
- :
- Testing
- Install Hoppscotch app and the extension for Chrome: https://hoppscotch.io/
- Frontend project
- Install Tailwind CSS, PostCSS and autoprefixer: npm i tailwindcss postcss autoprefixer -D
- Start Tailwind CSS: npx tailwindcss init -p
- Customize contents, themes, fonts and plugins with Tailwind: ./tailwind.config.js
- Customize the main style: ./src/styles/global.css
- Install Axios library: npm i axios
- Set API connection: ./src/lib/axios.ts
- Set Google Fonts: ./src/pages/_document.tsx
- Set the Landing Page: ./src/pages/_app.tsx
- Backend project
- Part 3 - Mobile layout and visual structure
- Mobile project
- Authentication Interface: ./src/screens/SignIn.tsx
- React Native SVG Transformer library: npm i react-native-svg-transformer
- Configure the react native packager: ./metro.config.js
- Create types file: ./src/@types/svg.d.ts
- Create Button component: ./src/components/Button.tsx
- Set SignIn interface
- Authentication Context: ./src/contexts/AuthContext.tsx
- Create Hook: ./src/hooks/useAuth.tsx
- Use Hook at ./src/screens/SignIn.tsx
- Apply context at: ./App.tsx
- Google Authentication:
- Expo AuthSession library: expo install expo-auth-session expo-random
- Expo WebBrowser library: npx expo install expo-web-browser
- Create a schema: ./app.json
- Before executing app:
- At terminal: npx expo login
- Enter your login credentials (user and password)
- Set OAuth with Google (https://console.cloud.google.com)
- Apply Google authentication: ./src/screens/SignIn.tsx
- Interface to create and find poll:
- React Native Phosphor Icon Library: npm install --save phosphor-react-native
- React Native Country Flag: npm i react-native-country-flag
- React Native Country List: npm i country-list
- Create and apply components: Button, ButtonIcon, EmptyMyPollList, ...
- Create interface New: ./src/screens/New.tsx
- Create interface Find: ./src/screens/Find.tsx
- Polls interface: ./src/screens/polls.tsx
- Authentication Interface: ./src/screens/SignIn.tsx
- Mobile project
- Part 4 - Connecting mobile app to API
- Backend project
- Separate database connection: ./src/lib/prisma.ts
- Routes: ./src/routes/
- Separate files
- Profile route (/me)
- Create an user (Google Access Token)
- JWT (JSON Web Token)
- Fastify JWT: npm i @fastify/jwt
- JWT Generation: ./src/routes/auth.ts
- JWT Validation: ./src/plugins/authenticate.ts
- Polls: ./src/routes/poll.ts
- Create a poll with a logged user
- Enter in a poll
- Polls that an user participate
- Poll details
- List of games of a poll
- Create a guess: ./src/routes/guess.ts
- Testing
- Test backend at Hoppscotch: https://hoppscotch.io/
- Mobile project
- Navigation
- React Navigation: npm install @react-navigation/native @react-navigation/bottom-tabs
- Install dependencies: npx expo install react-native-screens react-native-safe-area-context
- Native Stack Navigator: ./src/routes/app.routes.tsx
- Navigation Strategy: ./src/routes/index.tsx
- Customizing Bottom Tabs
- Navigate through application
- Comunnicate to TS which routes are available: ./src/@types/navigation.d.ts
- Connect with API (backend service)
- Axios: npm i axios
- Set API access
- Search user data on backend: ./src/contexts/AuthContext.tsx
- Insert token at requests header
- Redirect user to application routes
- Navigation
- Backend project
- Part 5 - Finishing app and features
- Mobile project
- New: ./src/screens/New.tsx
- Create a new poll
- Polls: ./src/screens/Polls.tsx
- List created polls
- Using toast message
- Using FlatList
- Apply List Empty Component: ./src/components/EmptyPollList.tsx
- Reloading list when the focus return to the interface
- Find: ./src/screens/Find.tsx
- Enter in a poll by code
- Details: ./src/screens/Details.tsx
- Include Details at route: ./src/routes/app.routes.tsx
- Implement options: Guess and Ranking
- Passing parameters through route
- Searching poll details
- Sharing poll code
- Guesses: ./src/components/Guesses.tsx
- Searching the games
- Registering the guess:
- Dayjs library: npm i dayjs
- Enter Game component: ./src/components/Game.tsx
- Environmental variables:.env
- DotEnv library: npm i dotenv -D
- Babel Plugin Inline DotEnv library: npm i babel-plugin-inline-dotenv -D
- Set babel.config.js
- Apply environmental variables
- Ranking
- New: ./src/screens/New.tsx
- Mobile project
- Set the development environment at you local computer
- Clone the repository
- Enter the project directory:
- cd eSports
- Testing
- Backend
- Enter the directory
- cd backend
- Install the dependencies
- npm install
- Run
- npm run dev
- Enter the directory
- Frontend
- Enter the directory
- cd frontend
- Install the dependencies
- npm install
- Run
- npm run dev
- Enter the directory
- Mobile
- Enter the directory
- cd mobile
- Before run the mobile app, check if the following tools are already installed:
- Node.js LTS release
- Git
- Watchman (only for MacOS and Linux users)
- 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
- Enter the directory
- Backend