Ignite Gym is a mobile app with lots of gym exercises, separated by muscle group, with instructions on how to do them.
In addition, you can mark a exercise as completed and view all completed exercises in history, grouped by day. In the application, it is possible to create a new account and log in, as well as edit your profile, as well as update your avatar.
This app uses a refresh token strategy to keep the user signed in and the auth flow uses a JWT.
The push notification strategy was also implemented to remind the user to practice or even notify about a new exercise. Additionally, deep linking was also implemented to redirect based on notifications.
The project was developed using these technologies:
- TypeScript
- React Native
- Expo Dev Client
- Expo Image Picker (used to select and edit user avatar)
- NativeBase (component library)
- React Navigation (stack and tab navigation)
- Axios (HTTP client)
- Async Storage (used to local storage of user and token)
- One Signal (used to send push notifications)
- Firebase Cloud Messaging (used with One Signal to send notifications on Android devices)
- React Hook Form
- Zod
Finally, this project was developed in the React Native training in the Rocketseat Ignite course. The main purpose of this app was to practice using a component library, such as NativeBase, and bottom tab navigation, as well as backend integration, with authentication flow. In addition, it was possible to practice using the Context API and React Hooks, always following good coding practices.
Access the project layout in Figma
- Requirements:
- Clone the repository and install the dependencies:
git clone https://github.com/luismda/ignite-gym.gitnpm i- Clone the back-end project used in this app (created by rodrigorgtic) and install the dependencies:
git clone https://github.com/rodrigorgtic/ignitegym-api.gitnpm i- Run back-end server:
npm start-
Configure the env variables following the
.env.examplefile (API URL and One Signal App ID) -
Run development build:
npm run android
# or
npm run ios- Start app
npm start- To preview the app, you can use Expo Go on your physical device or use an Android or iPhone emulator on your computer. See some more details in the React Native and Expo documentation.
Luís Miguel | LinkedIn
#NeverStopLearning 🚀