Skip to content

Latest commit

 

History

History
159 lines (130 loc) · 7.77 KB

readme-en.md

File metadata and controls

159 lines (130 loc) · 7.77 KB
Raw
🇺🇸 English
🇧🇷 Português

luk4x-repo-status luk4x-repo-license

⚽ Copa Project Mobile Interface


Video   |    Technologies   |    About   |    Screens   |    Components   |    Cloning   |    Contact


📹 Project Video Presentation

copa-mobile-video.1.mp4

If the video has any errors, reload the page!

🚀 Technologies used

📝 About

Watching the video above will help you understand the explanation!

This project is the Copa Mobile Interface, a world cup themed application that performs the registration and management of pools, games and users, developed during the Ignite track of the NLW Cup of [Rocketseat](https:/ /www.rocketseat.com.br/).
The data is provided by its API developed essentially with Fastify.

📄 Screens

The project consists of 5 screen components, which are:

  • SignIn: In addition to being the home screen, the user must register on the App, and I use Google's authentication system to do so.
  • Pools: This screen is responsible for listing all pools that the user created and/or participates in.
  • New: This screen is responsible for creating a pool.
  • Find: This screen is responsible for searching for a pool by its code. If the pool is found, you will automatically become a participant.
  • Details: This screen is responsible for showing the details of a pool: who created it, how many participate in it and what games it has. You can also make predictions on these games and access their Ranking.

📑 Other Components

The project has 16 more components that are reused by the application, which are:

  • Button: This component is related to the highlight button that is repeated in the application screens. It has PRIMARY and SECONDARY mode.
  • ButtonIcon: This component is relative to any button that is just an icon that is repeated in the Header of the application.
  • EmptyMyPoolList, EmptyPoolList, EmptyRankingList: These components are relative to their respective lists, shown when they are empty.
  • Flag, Team: These components are related to the country flag icons in the Details screen.
  • Game: This component is related to the games in the Details screen.
  • Guesses: This component returns the list of games(Games) on the Details screen.
  • Header: This component is relative to the header that is repeated in the application screens.
  • Input: This component is related to the Inputs that are repeated in the application screens.
  • Loading: This component is related to the loading effect, used to wait for requests.
  • Option: This component is relative to the list options in the Details screen.
  • Participants: This component is responsible for displaying the participants of a pool, used in the PoolHeader.
  • PoolHeader: This component is responsible for displaying the pool data on the Details screen.
  • PoolCard: This component is responsible for displaying the pool data summarized and on a card, as used in the Pools screen.

I highlight 3 more components that play a fundamental role in the application:

  • AuthContext and useAuth: They are, respectively, the context that stores user information, and the hook created to use it in a simplified way. They are responsible for making user information accessible by the application.
  • api: Created with the help of axios, this component stores the base URL of the API that provides the data for the project.

📖 Cloning the Project

To clone and run this project on your computer you will need Git and Node.js v18.12.0 or higher previously installed.
You'll also need the project's API running, so before continuing here, go to API Repository and go through the steps on how to clone and run it first!
After these two steps, in the terminal:

# Clone this repository with:
> git clone https://github.com/Luk4x/copa-mobile

# Enter the repository with:
> cd copa-mobile

# Install dependencies with:
> npm install

# Run the project with:
> npx expo start

# Once this is done, you can now access the project on your mobile phone with a QR Code that will appear on the terminal! (or by a link like: exp://192.168.0.112:19000)

🤝 Contributor Contact

Vitrine.Dev 🪟
Luk4x Github Photo
Lucas Maciel
🪧 Vitrine.Dev Lucas Maciel
✨ Name ⚽ Copa Mobile Interface
🏷️ Technologies react native, typescript, nativebase, phosphor, react navigation, dotenv, country list, axios, dayjs, expo, react native svg, react native safe area context, react native screens, react native country flag, npm
📷 Img vitrine.dev thumb

Back to Top