VagnerNerves/ignitegym-rn

Developed the Ignite Gym project in React Native, it is a fitness-oriented application that provides features for user registration, exercise tracking, and execution history.

Traduzir PT-BR

Ignite Gim

Developed the Ignite Gym project in React Native, it is a fitness-oriented application that provides features for user registration, exercise tracking, and execution history.

Below, I will describe each of the main screens of the application:

• Login Screen:

  • On this screen, users can enter their login credentials, such as username and password, to access the application.
  • If they don't have an account yet, there is an option to register within the application.

• Registration Screen:

  • In the registration screen, users can fill out a form with their information, such as name, email, and password.
  • After filling out the form, they can confirm the registration and create an account within the application.

• Main Screen:

  • After successfully logging in, users will be directed to the main screen.
  • On this screen, they will find a list of available exercises to perform.
  • Each exercise can be selected to view the execution instructions, which may include a demonstrative video.

• Workout History Screen:

  • In this screen, users can access the history of their previous workout sessions.
  • Users can revisit their previous sessions to track their progress over time.

• Profile Screen:

  • The profile screen allows users to view and update their personal information, such as name, profile picture, and password change.

These screens provide a comprehensive experience for users of the Ignite Gym application, allowing them to log in, register, perform exercises, track their progress, and manage their personal information.

🧭 Table of contents

• 🧭 Table of contents
• 🎥 Implementation Video
• 🎨 Layout
• 👏 Learning and more Implementations
• 💡 Technologies Used
  • Mobile
• 📂 Folder Structure
• 🚀 Running the Project
  • Back-end
  • Mobile
• 🌎 License
• ✒ Author

🎥 Implementation Video

Project.Ignite.Gym.mp4

🎨 Layout

Layout developed by: Rodrigo Gonçalves e Millena Kupsinskü Martins

👏 Learning and more Implementations

• Learned how to use NativeBase for building the interface.
• Learned to use the Bottom Navigator.
• Learned to fetch images from the photo gallery using Expo ImagePicker.
• Learned to use React Hook Form for form control and validation using Yup.
• Learned to create Contexts and hooks for data passing to other screens.
• Learned about consuming APIs with Fetch API and Axios.
• Learned about JWT Authentication and how to use it for data retrieval.
• Learned to upload images to the database.
• Learned about refresh tokens to automatically retrieve a new token when it expires.

💡 Technologies Used

Mobile

• React Native
• Expo
• TypeScript
• NativeBase
• React Navigation - Native Stack and Bottom Tabs
• Axios
• Expo ImagePicker
• Expo FileSystem
• React Hook Form
• Yup
• AsyncStorage

📂 Folder Structure

mobile
.
├── assets                      # Images for expo
├── src                         # Source files
│   ├── @types                  # Contains all global definitions of types and interfaces
│   ├── assets                  # Contains Js bundles assets. e.g: icons, splash, images etc...
│   ├── components              # Contains all global react components
│   ├── contexts                # Application context
│   ├── dtos                    # Models Data Base
│   ├── hooks                   # Application hooks
│   ├── routes                  # Contains application routes
│   ├── screens                 # Contains application screens
│   ├── services                # Config service api
│   ├── storage                 # Contains saving data in locations.
│   ├── theme                   # Contains the theme of the application
│   ├── utils                   # Class utils for system
.
.
├── App                         # Bundle entry
.

🚀 Running the Project

Back-end

Clone the project

  git clone https://github.com/VagnerNerves/ignitegym-rn.git

Enter the project directory

  cd ignitegym-rn\server

Install with dependencies

  npm install

Start the server

  npm run dev

Access the README.md file in the server folder to see other commands.

Mobile

Clone the project

  git clone https://github.com/VagnerNerves/ignitegym-rn.git

Enter the project directory

  cd ignitegym-rn\mobile

Install with dependencies

  npm install

Start the server

  npx run start

🌎 License

This project is under the MIT license. See the LICENSE file for more details.

✒ Author

Vagner Nerves

Made with love and hate 😅, get in touch!