Backend | API

Testing

Database

IDE

UX/UI

Frontend

Mobile

🔎 Route

1. 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.


2. 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
   
   
3. 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


4. 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


5. 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

🧪 How to use

1. Set the development environment at you local computer
2. Clone the repository
   • git clone https://github.com/alexandrecpedro/world-cup-polls
3. Enter the project directory:
   • cd eSports
4. Testing
   • Backend
     1. Enter the directory
        • cd backend
     2. Install the dependencies
        • npm install
     3. Run
        • npm run dev
   • Frontend
     1. Enter the directory
        • cd frontend
     2. Install the dependencies
        • npm install
     3. Run
        • npm run dev
   • Mobile
     1. Enter the directory
        • cd mobile
     2. 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
     3. Install the dependencies
        • npx install-expo-modules@latest
        • npm install expo
        • expo install
        • npm install
     4. Run
        • npx expo start