alexandrecpedro/world-cup-polls

World Cup Polls platform for web and mobile - NLW World Cup

World Cup Polls

The Project • Target • Technologies • Route • How to Use

📓 The Project

NLW World Cup platform to create your own cup poll and share it with friends (web platform and mobile)

💡 Target

Development of an NLW World Cup platform to create your own cup poll and share it with friends (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/
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/

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