{"id":19153469,"url":"https://github.com/alexandrecpedro/esports","last_synced_at":"2026-04-07T18:31:36.961Z","repository":{"id":112109528,"uuid":"535469400","full_name":"alexandrecpedro/eSports","owner":"alexandrecpedro","description":"eSports platform for web and mobile - NLW eSports","archived":false,"fork":false,"pushed_at":"2022-09-23T18:09:00.000Z","size":9904,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T12:25:43.859Z","etag":null,"topics":["esports","expo","express","expressjs","figma","hoppscotch","nodejs","phosphoricons","postcss","prisma","react","react-native","reactnavigation","rocketseat-nlw","sqlite3","tailwindcss","twitch","twitch-api","typescript","vite"],"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":"2022-09-12T01:09:11.000Z","updated_at":"2023-03-04T01:45:55.000Z","dependencies_parsed_at":"2023-04-08T21:57:13.274Z","dependency_job_id":null,"html_url":"https://github.com/alexandrecpedro/eSports","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexandrecpedro/eSports","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FeSports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FeSports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FeSports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FeSports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandrecpedro","download_url":"https://codeload.github.com/alexandrecpedro/eSports/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FeSports/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31524524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["esports","expo","express","expressjs","figma","hoppscotch","nodejs","phosphoricons","postcss","prisma","react","react-native","reactnavigation","rocketseat-nlw","sqlite3","tailwindcss","twitch","twitch-api","typescript","vite"],"created_at":"2024-11-09T08:23:11.845Z","updated_at":"2026-04-07T18:31:36.922Z","avatar_url":"https://github.com/alexandrecpedro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align = \"center\"\u003e\n  \u003ch1\u003e NLW eSports \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 eSports Platform - Desktop\" src=\"./project/screens/screen1.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n|                                                                                     |                                                                                   |                                                                                        |\n| :---------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------: |\n| \u003cimg width=\"1604\" alt=\"Landing Page - Desktop\" src=\"./project/screens/screen2.png\"\u003e | \u003cimg width=\"1604\" alt=\"Post an ad - Desktop\" src=\"./project/screens/screen3.png\"\u003e |   \u003cimg width=\"1604\" alt=\"Splash Page - Mobile\" src=\"./project/screens/screen4.png\"\u003e    |\n|   \u003cimg width=\"1604\" alt=\"Home Page - Mobile\" src=\"./project/screens/screen5.png\"\u003e   |   \u003cimg width=\"1604\" alt=\"Ad Page - Mobile\" src=\"./project/screens/screen6.png\"\u003e   | \u003cimg width=\"1604\" alt=\"Logged User Page - Mobile\" src=\"./project/screens/screen7.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 eSports platform to connect gamers who play the same eSport (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 eSports platform to connect gamers who play the same eSport (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)          |          EXPRESS          |      https://expressjs.com/                |\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|             eSport Streaming Service             |          TWITCH           |      https://www.twitch.tv/                 |\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  \u003cimg height =' 100px ' left=' 20px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg\"/\u003e\n  \u003cimg height =' 100px ' left=' 20px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left=' 20px ' src=\"./project/logo/twitch_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=' 20px ' 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=' 20px ' src=\"./project/logo/phosphor-icons_logo.png\"/\u003e\n  \u003cimg height =' 100px ' left=' 20px ' 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=' 20px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 50px ' left=' 20px ' src=\"./project/logo/tailwind-css_logo.svg\" /\u003e\n  \u003cbr\u003e\n  \u003cimg height =' 100px ' src=\"./project/logo/vite_logo.svg\"/\u003e\n  \u003cimg height =' 100px ' left=' 20px ' src=\"./project/logo/radix-ui_logo.png\"/\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=' 20px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left=' 20px ' src=\"./project/logo/react_navigation.svg\" /\u003e\n  \u003cimg height =' 100px ' left=' 20px ' src=\"./project/logo/expo.png\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"route\"\u003e\n\u003ch2\u003e 🔎 Route \u003c/h2\u003e\n  \u003col\u003e\n    \u003cli \u0026nbsp;\u003ePart 1 - Base Building\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003eBuild the project prototype: https://www.figma.com/file/npwloJcPtSmKG6xsuwNltZ/NLW-eSports-(Community)?node-id=0%3A1\u003c/li\u003e\n        \u003cli\u003eInstall VS Code (IDE)\u003c/li\u003e\n        \u003cli\u003eInstall VS Code extensions: NodeJS, Prisma, SQLite, Tailwind CSS IntelliSense, PostCSS Language Support\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 Express framework:\n              \u003cul\u003e\n                \u003cli\u003enpm i express\u003c/li\u003e\n                \u003cli\u003enpm i @types/express -D (Support with TS)\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eConfigure server, routes and ports: ./src/server.mjs\u003c/li\u003e\n            \u003cli\u003eRun the settings: node src/server.mjs\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 ts-node-dev -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\u003eConvert server file to ts: ./src/server.ts\u003c/li\u003e\n            \u003cli\u003eCreate a JS file from a TS server file: npm run build\u003c/li\u003e\n            \u003cli\u003eRun the project: node src/server.js\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          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eTesting\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall Hoppscotch app and the extension for Chrome: https://hoppscotch.io/\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 and TypeScript): npm create vite@latest\u003c/li\u003e\n            \u003cli\u003eInstall de dependencies from package.json: npm i\u003c/li\u003e\n            \u003cli\u003eInstall Tailwind CSS, PostCSS and autoprefixer: npm i tailwindcss postcss autoprefixer -D\u003c/li\u003e\n            \u003cli\u003eStart Tailwind CSS: npx tailwindcss init -p\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: expo init my-app (bare workflow)\u003c/li\u003e\n            \u003cli\u003eNavigate to project directory: cd my-app\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\u003eInstall Native Base on project:\n              \u003cul\u003e\n                \u003cli\u003eyarn add native-base\u003c/li\u003e\n                \u003cli\u003eexpo install react-native-svg \u003c/li\u003e\n                \u003cli\u003eexpo 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\u003eexpo install @react-navigation/native\u003c/li\u003e\n                \u003cli\u003eexpo install react-native-screens\u003c/li\u003e\n                \u003cli\u003eexpo install react-native-safe-area-context\u003c/li\u003e\n                \u003cli\u003eexpo install @react-navigation/native-stack\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eInstall Google Fonts: expo install expo-font @expo-google-fonts/inter\u003c/li\u003e\n            \u003cli\u003eInstall Linear Gradient libary: expo install expo-linear-gradient\u003c/li\u003e\n            \u003cli\u003eStart the development server: 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 - High Speed\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\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/main.css\u003c/li\u003e\n            \u003cli\u003eConvert a svg file (Logo) code to React component: https://svg2jsx.com/\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: Background, GameCard, Heading, Loading\u003c/li\u003e\n            \u003cli\u003eCreate Home screen: ./src/screens/Home/index.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 3 - To be continued\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 (for development): npm i prisma -D\u003c/li\u003e\n                \u003cli\u003eSet Database SQLite: npx prisma init --datasource-provider SQLite\u003c/li\u003e\n                \u003cli\u003eCreate tables and entities (Game, Ads): ./prisma/schema.prisma\u003c/li\u003e\n                \u003cli\u003eRelation between entities:\n                  \u003cul\u003e\n                    \u003cli\u003eGame and Ads: One to Many\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eRun migrations: npx prisma migrate dev\n                  \u003cul\u003e\n                    \u003cli\u003eName for the new migration: create table games\u003c/li\u003e\n                    \u003cli\u003eName for the new migration: create table ads\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\u003eInstall Prisma Client: npm i @prisma/client\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              \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 - Power up\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate components: GameBanner, CreateAdBanner\u003c/li\u003e\n            \u003cli\u003eUse React Hooks: useState, useEffect\u003c/li\u003e\n            \u003cli\u003eListing games\u003c/li\u003e\n            \u003cli\u003eCreate feature: publish an ad (modal)\n              \u003cul\u003e\n                \u003cli\u003eInstall Radix-UI: npm i @radix-ui/react-dialog \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eCreate Input component: ./src/components/Form/Input.tsx\u003c/li\u003e\n            \u003cli\u003eConnect with API (backend service)\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\u003eCreate Game page: ./src/screens/Game/index.tsx\u003c/li\u003e\n            \u003cli\u003eSet 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\u003eCreate components: DuoCard, DuoInfo\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\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 - Final Round\u003cbr /\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eFrontend project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate component: CreateAdModal\u003c/li\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\u003eSend Ad 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          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMobile project\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate component: DuoMatch (Modal)\u003c/li\u003e\n            \u003cli\u003eSet navigation from Game modal to DuoMatch (modal)\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: CheckCircle \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\u003eNew Features\n              \u003col\u003e\n                \u003cli\u003eCondional open and close DuoMatch (modal) from Game page (screen)\u003c/li\u003e\n                \u003cli\u003eOpen DuoMatch (modal) when click at Connect button on Game page (screen)\u003c/li\u003e\n                \u003cli\u003eWhen click at discordUser from DuoMatch (modal), keep this info to transfer area\n                  \u003cul\u003e\n                    \u003cli\u003eClipboard library: expo install expo-clipboard\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003eSending notifications (push), when keeping discordUser at device clipboard\n                  \u003cul\u003e\n                    \u003cli\u003eExpo Notifications library: expo install expo-notifications\u003c/li\u003e\n                    \u003cli\u003eNew Services\n                      \u003cul\u003e\n                        \u003cli\u003eSet user notifications configuration from this app\u003c/li\u003e\n                        \u003cli\u003eFind device identificator token (getPushNotificationToken)\u003c/li\u003e\n                        \u003cli\u003eExpo Modules Core library: expo install expo-modules-core\u003c/li\u003e\n                        \u003cli\u003eKeep some devices references (useRef hook): getNotificationListener, responseNotificationListener\u003c/li\u003e\n                        \u003cli\u003eSend the notification to an specific device by notification token \u003c/li\u003e\n                      \u003c/ul\u003e\n                    \u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003e Link with Discord Session\n                  \u003cul\u003e\n                    \u003cli\u003eExpo AuthSession library: expo install expo-auth-session expo-random \u003c/li\u003e\n                    \u003cli\u003eCreate a new Screen: SignIn (./src/screens/SignIn/index.tsx)\u003c/li\u003e\n                    \u003cli\u003eGet Discord Authentication URL: http://discord.com/developers/applications\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n            \u003cli\u003eBefore executing app:\n              \u003col\u003e\n                \u003cli\u003eAt terminal: expo login\u003c/li\u003e\n                \u003cli\u003eEnter your login credentials (user and password)\u003c/li\u003e\n              \u003c/ol\u003e\n            \u003c/li\u003e\n            \u003cli\u003eStart the app with expo: expo start\u003c/li\u003e\n            \u003cli\u003eTest notifications using web interface (Push notifications tools): http://expo.dev/notifications\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\u003cbr\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/eSports\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eEnter the project directory:\n      \u003cul\u003e\n        \u003cli\u003ecd eSports\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              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli \u0026nbsp;\u003eRun\n              \u003cul\u003e\n                \u003cli\u003eexpo 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fesports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrecpedro%2Fesports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fesports/lists"}