Building a MyFitnessPal Clone: React Native Tutorial for Beginners
21,468
Published 2024-03-08
This tutorial is sponsored by ✨IBM StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code
❇️ Get your free account here: bit.ly/48IlW94
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! 🚀
✅ Step-by-step Guide: notjust.notion.site/MyFitnessPal-Clone-Guide-471e9…
✨ Asset Bundle: assets.notjust.dev/myfitnesspal
💻 Source Code: github.com/notJust-dev/MyFitnessPal
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclass/?utm_source=youtube…
📚 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:
academy.notjust.dev/?utm_source=youtube&utm_medium…
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/discussions
💬 Join the notJust Development gang and let's build together:
Twitter: twitter.com/VadimNotJustDev
Instagram: www.instagram.com/VadimNotJustDev
Facebook: www.facebook.com/notjustdev
LinkedIn: www.linkedin.com/in/vadimsavin
Discord: discord.gg/VpURUN2
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
All Comments (21)
-
This tutorial is sponsored by ✨IBM StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code ❇ Get your free account here: bit.ly/48IlW94
-
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!
-
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
-
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. 🙏
-
liked and subscribed! thanks for this great tutes! hope i can create this right... 😄
-
Just Amazing, It was really fun to building app with you. Thanks sir ❤❤
-
Geat great work.👍👍👍👍👍👍👍
-
happy belated birthday Katalin =) 🎂
-
great content. keep it up
-
awesome work! Out of curiosity what type of Macbook Tech Specs are you running to develop your mobile apps?
-
Nutrition tracking graphs?
-
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.
-
Please add the notion link .
-
Awesome bro, please can you create the social function in MyFitnessPal?
-
BU EĞİTİMİ COK SEVDİM BEN GÜRAY
-
CTRL / CMD + N is new file :)))
-
can any one explain how to implement sum of kcal
-
i can't run expo on cmd can u tell me how to run it on windows
-
Is it possible to deploy it witouth paying to share for employers?
-
So can I use react native or create apps in 4gb ram ryzern 3 pc 1tb storage