Building a MyFitnessPal Clone: React Native Tutorial for Beginners

Build a MyFitnessPal Clone in React Native by following a beginner friendly, project based tutorial, with a step-by-step guide included.

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 will be building our own food tracking app, just like MyFitnessPal, using React Native, Expo, Expo Router and IBM StepZen. We'll dive into creating a food, grocery, and nutrition app that lets you search and log your meals, giving you all the details on calories and macros. We will be integrating the Food and Grocery Database API in our application to make food tracking easy. Ready? Grab your laptop, and let's get coding! 🚀

📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Introduction to React Native and project overview
- Setting up the development environment (React Native, Expo and Expo Router)
- Designing the UI for the app
- Implementing the search and log food feature
- Integrating the Food and Grocery Database API
- Displaying nutrition information (kcals, macro nutrients)
- Testing and debugging the app

📚 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 Overview
3:52 Setting up a fresh Expo Project
10:09 Installing and Setting up Expo Router
22:23 Building the Search UI (User Interface)
1:09:21 Integrating the Food API with the app
1:17:37 Installing and Setting up IBM Stepzen
1:47:51 Fetching GraphQL data using Apollo Client
2:17:53 Designing the Remaining Screens
2:31:41 Building a Custom PostgresSQL Database
2:37:24 Connect Stepzen API to the Database
2:40:33 Creating and Running Queries and Mutations
3:16:46 Add searched food to logged food Feature
3:31:54 Implementing the Barcode Scanner Feature
3:59:30 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 #myfitnesspal #reactnative

[notjustdev]

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

[derekprieur]

Recently discovered your channel as I'm trying to learn React Native to port my existing web application over to a mobile version. Have absolutely loved everything so far and appreciate all the work that goes into making these videos!

[franz-dev]

Nice tutorial Vadim I hope we can continue with this project for example multiple users, navigate on different dates, delete items, graphs, etc.
Great content

[Josh.Js_Dev]

Just another piece of work well prepared and easy to follow. Hope I will absorb a-lot of tips, skills and knowledge from your tutorials. Bless you bro. 🙏

[themesongasker]

liked and subscribed! thanks for this great tutes! hope i can create this right... 😄

[sandeeplakhiwal]

Just Amazing, It was really fun to building app with you. Thanks sir ❤❤

[AshkanSotoudeh]

awesome work!

Out of curiosity what type of Macbook Tech Specs are you running to develop your mobile apps?

[risermle]

Hi @notjust, I have been following the MyFitnessPal video, I got stuck in between where we need to convert rest to graphql using stephen, using stepzen import curl command it is not working every time it fails.

[ibrahimhassan]

i can't run expo on cmd can u tell me how to run it on windows

[harshchaudhary]

can any one explain how to implement sum of kcal

[shashankyadav]

Edamam is charging $9 there is no more Developer free setup 😔, what should I do.

[rsr]

So can I use react native or create apps in 4gb ram ryzern 3 pc 1tb storage

[imaginelogo]

Awesome bro, please can you create the social function in MyFitnessPal?

[LeAmbrosioFiadone]

Is it possible to deploy it witouth paying to share for employers?

[takiuddin]

Is it just me or other have this issue too? when I try to open camera in my real device. I see just a white screen. I have followed the code, even used your source code from github.

[vidikageete]

I've been trying to create account on stepzen but unable to see the account name
And admin and api
Even after creating account help meee

[technation]

At line:2 char:128
+ ... \
+ ~
Unexpected token '\' in expression or statement.
+ CategoryInfo : ParserError: (:) [],
+ FullyQualifiedErrorId : UnexpectedToken


having these error

[AliHaseni]

ts is not related for the frontend MY MAN .