Building the Ultimate Workout Tracker with React Native & MongoDB

Let's build a full-stack fitness app to track your workouts using React Native, Expo, MongoDB, IBM Stepzen, and GraphQL.

This tutorial is sponsored by ✨IBM StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code

In this video, we'll dive deep into the world of app development, guiding you through the process of building a fitness app that is both highly interactive and easy to use. From configuring your development environment to building a fully functional fitness tracker, we'll guide you through every step. Learn how to use the power of IBM Stepzen, MongoDB, GraphQL, and React Native to revolutionise fitness tracking!

❗Try our FREE 4-day Masterclass on notJust.Academy:

This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Setting up the Development Environment
- Understanding the App Structure and Workflow
- Designing the User Interface with React Native
- Implementing Navigation between Screens
- Integrating MongoDB Database with a React Native App
- Creating and Managing User Workouts
- Visualizing Progress with Graphs and Charts
- Building a GraphQL API with IBM Stepzen

📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:

💬 Join the notJust Development gang and let's build together:

Timecodes:
0:00 Intro and Project Overview
2:58 Setting up and initialising the project
10:23 Styling in React Native
13:33 Importing and Displaying Data
30:41 FlatList and Custom Components
52:06 Setting up Expo Router for navigation
1:06:22 Exercise Details Implementation
1:42:31 Expo Router Slot Explanation
1:56:33 Backend Architecture Explained. StepZen Installation
2:00:30 Setting up the GraphQL API with IBM StepZen
2:13:21 Enhancing and Testing the GraphQL API
2:23:36 Using React Query to query the GraphQL API
3:06:21 Workout Logger Features
3:18:03 MongoDB setup and Integratio
3:58:56 Outro

Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #mongodb #reactnative

[darkborhen]

I'm from algeria you for do it with JavaScript...when i see typscript i will runway and close the video 😅...this channel deserve millions view

[erikaszvicevicius]

Thank You. Thank you showing FROM SCRATCH. It`s very important for beginers.

[dinhgiap]

I'm from algeria you for do it with JavaScript...when i see typscript i will runway and close the video ...this channel deserve millions view

[damonturner]

thanks for a great live-stream tutorial ... it's the first time I've seen your videos, and this one really makes the "under the hood" happenings of expo-router simple and easy to understand (especially where you changed Stack to Slot and Tabs in the _layout.js file) I'm very much looking forward to more of your tutorials! thanks again :D :P

[AidenDucey-Kline]

Love the tutorials, I've learned so much from you! Just a heads up though to anyone thinking about doing this project, IBM has changed their StepZen Dashboard and new users are unable to use the dashboard that is used in the video. I wasn't able to figure out how to get that part to work, but I still got a bunch of practice with frontend stuff from the video :)

[farouqseriki]

Im so excited for this. So many things I've been trying to learn in one Video.Awesome .

[CarlosCostaCarvalho]

great video as always... idea: now a video creating a Tabata app that can be setup using time and/or distance! With distance we can cover the use of GPS, and also the app could speak, like "half way to finish" or something like that. Using react native, expo, supabase :D thanks for the video!!!

[RebeccaJones-fk]

Thank you for do it with JavaScript...when i see typscript i will runway and close the video ...this channel deserve millions view

[sagedev]

It was one of the best explanations I've seen on the internet. Thank you very much. God let him open the way.

[empyrerhomann]

Hey Vadim, thanks for this awesome tutorial. I followed along and unfrotunately, I think Stepzen behaves in a funny way, at least for me. I was not able to create an account to even try it out therefore I went the hard way :) I had to build my my own API server to convert api-ninjas REST endpoints to GraphQL (got me learning GraphQL at least so not bad), but then also had to host it and get a SSL certificate to make it HTTPS since Android API 34 doesn't support http connection even during local development

[AgneteDeines]

Очень понятное видео с практическими примерами

[flamabr]

Thanks a lot for ur generosity. Hugs from Brazil.

[mijo]

Thanks for this video, it gave me an idea for an app! I plan to make it for the next 3 months.

[Website_TV_]

Thanks for your tutorial, that was amazing, I have learnt a lots

[mayssamayssa]

Hi ! I've just discovered your channel and I really loved it . Thank you for your efforts . Am a beginner and I learnt many things . Thank you again ❤🙏 when are u dropping part 3 ?

[leomaxwell]

2:43:00 yo, there be a locked up chewbaca in the background. GWWwwaaar

[AnthonyPietropaolo-kxfb]

This video came at the perfect time – just what I needed to get back on track with my fitness goals

[twoodson]

i spent 4 hours trying to fix the issue "Unable to resolve "graphql-request" from "src\app\index.js". not even the GPTs could help. any guesses?

[scientifichuman]

Thank you for your efforts 😘This is not completed yet, right? The one in the presentation has a tracker in it. Please clarify.

[navinkumarsahu]

Please reveal the date or publish it ASAP because we want to be hero of React Native 😁