Build and Deploy a Modern React 18 Fitness Exercises App With APIs | RapidAPI
Вставка
- Опубліковано 2 чер 2024
- Every web developer needs to know how to use APIs in their applications. Learn how to create the best and most modern Fitness Exercises App using two separate APIs!
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special UA-cam discount code is automatically applied!
⭐RapidAPI - rapidapi.com/hub?...
⭐RapidAPI ExerciseDB - rapidapi.com/justin-WFnsXH_t6...
⭐RapidAPI UA-cam Search - rapidapi.com/h0p3rwe/api/yout...
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
Styles & Other Code: gist.github.com/adrianhajdin/...
Assets: minhaskamal.github.io/DownGit...
With the functionality to choose exercise categories and specific muscle groups, browse more than one thousand exercises with practical examples, pagination, exercise details, pull related videos from youtube, display similar exercises, and much more, Golds Gym is the best React Fitness App that you can currently find on UA-cam and on the entire internet.
Alongside building this phenomenal project that you can put on your portfolio, In this video, you'll learn:
- Advanced React Best Practices such as file structure and hooks
- Creating a Beautiful User Interface using the Material UI (version 5)
- Fetching data from unlimited sources using RapidAPI
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 Intro
00:04:05 Setup
00:10:32 File & Folder Structure
00:16:24 Navbar
00:26:21 Hero Banner
00:36:36 Search Exercises
00:48:48 Fetch Data
00:36:36 Search Exercises
01:00:00 Horizontal Scrollbar
01:06:00 Body Part Component
01:16:20 Exercises Component
01:22:34 Exercises Card Component
01:39:16 Exercises Detail
01:46:39 Detail Component
02:01:55 Exercise Videos
02:15:12 Similar Exercises
02:17:45 Loader
02:19:21 Fixing Bugs
02:23:33 Footer
02:27:49 Deployment
![ПОЛНАЯ ИСТОРИЯ ЭКЗОРЦИЗМА [Топ Сикрет]](http://i.ytimg.com/vi/qBySr6Bt0B8/mqdefault.jpg)
Get a special UA-cam discount and become a professional developer with JS Mastery Pro - jsmastery.pro?discount=youtube 🔥
Do you offer a package that includes the filmpire, NFT marketplace and the masterclass experience for one price?
@@Buyerithms Filmpire and NFT Marketplace can be bundled.
Masterclass Experience includes both 👌
Definitely worth the money, thank you for your awesome work. Keep it up!
hey jsMastery, i love your videos, but can you do react typescript videos sometimes, i'd really appreciate that
@@GdGhostface I agree, TypeScript is the industry standard. He should cover it.
Nowadays my regular work is to check this channel for the new projects. This guy is just incredible.
Turn on the notifications! :)
bro , i made crypto project by JSM using rapid api after some days that api is not working now !! please how to get it back !!!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
Me too
How to start react?
From where a beginner shud start to make projects ? Pls tell? What all concepts to be covered
Gracias mi hermano, hoy aprendí muchas cosas y subí mi primer app al internet después de 6 meses de full estudio, ojalá mi idioma nativo fuera el Inglés, la calidad de material y variedad es mucho más que en español, te estoy muy agradecido además de que subes el proyecto completo bien explicado sin cortes y no cobras nada si algún día lees este mensaje y lo traduces quiero mandarte un gran saludo desde Uruguay y un enorme abrazo gracias. ❤
thanks brother, today i learned so much things and i updated m first app to internet after 6 moths of full study, i wish my mother lenguage were english, the quality of material and variety is enormoys more than spanish, i am gratefull and you share you project completed and good explained whitout interruption and dont take money for that, if one day read and translate this message i want to sen regards from the Argentina province ... Bye!!!
Thank you very much!! You are helping a lot of people to find a job . The best difference is that you actually explain the hard parts of react instead of just say to us “paste that code here and there “. Congratulations!!
I appreciate that!
Did you complete this project I mean did you pay in order to use this api Everytime I click the search button it shows you are not subscribe to this api so I have to buy this??? Please answer
@@kanizfatema755 its free, you probably didn't click on the right button in the API website.
I was gonna wait untill I finished the project before I would make a comment, but I couldn´t wait since you delivered such a state of the art thing here man. There are countless projects on youtube, but very few deliver what you did since you not just show how it´s done, but you actually teach; not just showing step by step, but explaining why these steps are being made. Simply excellent man! Keep up that great work; you have a gift for teaching!
we should replace ICT teachers with jsmastery
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
Can I get source code pls?
I only have one problem with this channel.....everything is so good I can't decide on which project to play with next. A lot of channels have one or two banger projects and the rest are garbage. Everything here is pure fire... Adrian and team....keep up the good work.
Thank you so much Kevin!
JSM is the place where each and every project is a real masterpiece.
Not only the projects are masterpiece but the tutorial also. Every little details are clearly explained. Wow, thank you for your hard work and such wonderful lessons.
Thank you!
bro , i made crypto project that you taught using rapid api after some days that api is not working now !! please how to get it back !!!
Love the way you teach. just like a teacher, slow pause when you talk.... lovely!!!!
I really feel stupid since when i developed my project with mui I did all the special styles for mobile with "useMediaQuery" and the ? : (if) statements.... but you know what they say: "it works, don't touch". Great video. Keep it up :)
Once again, another professional React application. Your channel should have at least 2 million subscribers. By far this is the best channel which provides top notch quality. Also, this application is tailored to be scalable which I can use additional API's to make this application even more robust.
Wow, thank you!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
@@theway_up its resolved ?
Hi JSM,
Just completed the project and added it to my portfolio in hopes of landing a job. As someone who used to want to be a personal trainer, this app was perfect to help me combine two things I enjoy.
I have learned many new things about Material UI, and solidified my current understanding of many concepts of React and using APIs.
Thank you for the great video and I appreciate the hard work that goes into creating them.
I'm going to go through all your projects I think and learn as much as I can!
Did you find?
@@spiderdev5166 did u find?
@@RajSingh-kt1zt did u find?
@@kurisu8183 did you find?
@@rabiekhalifa1103 did you find?
Adrian am a big fan from Ghana
Your javascript mastery course made javascript frameworks so so easy for me thanks man
This project help me to get a job as a Software Engineer. Thanks a lot for your guidance.
on 45:10 I just use the display='flex' flexDirection='row-reverse' and alignItems='center' in the element. It works better and also responsive
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
@@theway_up
Did you find the solution?
if yes then please share the solution
Feeling guilty that this content is actually free.God bless you men
I start making this project but unable to complete just because limited access of API used in this project I like this project so much it is sad for me not completing this one but content and your teaching is good and better than other youtubers
it just become my habit/voluntary actions to check your channel time to time.
I'm praying that you are ALWAYS in GOOD HEALTH, have a BLESSING everyday since you do good things for us ^^
once I'm landing on job, definitely find a way to sub your PRO and help spread your channel in any way. thank you so much
Thank you so much! :)
Really learnt a lot from this! Please do make more 😍 Also when can we expect the VSC extension video?
Very soon!
Thank you for the tutorial. Just finished it. You are JS Ninja! I learned a lot! God bless you!
I truly benefit a lot from this, as always. The content is exceptionally comprehensive and well-articulated at every step. Thank you so much!
Hi ,Boss, really appreciate you for all the projects video ,please do Reactor nextjs/prisma/postgres/nest js,video which include all the form elements,like date range filter ,date picker/select,radio,checkbox,file upload,form error handling server/client side error handling part etc...❤❤❤❤
Finally I Got Internship after rejected multiple times. The reason behind is You and your awesome projects . Love You Man ..
Keep it up
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
Honestly, I don't know what to say You are just too good.
Your tutorials are just fantabulous 👍
I follow all the work you have done.
I see myself as your student. thanks for everything
Thanks for this video, this help me a lot while developing I learned awesome techniques however I had a problem with RapidAPI, and All my quotas ended. I had to stop the propject and lost my 5 hours, Anyway it was good to practice with you! If you select better, free APIs for the future , I would be appriciated!
I had problems with the API aswell
You are the best, bro!
Thanks!
Forte abraço do Brasil! Deus te abençoe!!!
Thank you!
Hello, I don't speak English but I could understand everything, you explain very well and we learn a lot
I subscribed your channel since 3rd video of MERN applications series almost before 1.5 year, and week after week you always surprise us with a GOLD videos, you're the best React js Developer on UA-cam.
Best of luck
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
Adrian is the "Code-inator" ... He keeps pushin out real projects. Stay blessed buddy!!
Thanks!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
@@theway_up You do not need to replace the key from .env, just leave the key as it is in the key location.
@@theway_up did you bought Shazam core api key
This is awesome! Where do you find the correct dependencies and compatibility versions? Is there a link to some documentation? I’d like to know to do and find them myself for future projects?
"And that's the thing that i like sharing most with you , the bugs , problems and errors that happen"
Thank you man , you're a gold ❤ 44:55
Hey guys, if any of you struggling with horizontal scrolling menu, just add import 'react-horizontal-scrolling-menu/dist/styles.css'. At least it worked for me with dependency version 4.1.0.
thanks
thanks alot
should i copy thhis to hiristontalscrollbar.js ?
Thank you! Man, your channel is amazing.
This man right here is very amazing, very talented. Pushing out this great contents for free. Well done Adrian 👏
Thank you so much!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
@@theway_up Sorry I wouldn't be able to help without looking at your code.
@@devabdultech Ths, i have figured it out
Great tutorial. I had to clone the exercise API using express and mongoDB, thereby having an unlimited number of endpoint calls :)
Do you have the source code available?
Can you please share the source code?
Please share it
@@salmaahmed7789 I've shared it here more than twice, but it keeps being deleted.
This is the Best youtube channel to learn react... I complete this project with going along with the video. At the end after deploy ,i have reached to the limit of api calls and it was such showing a blank white screen .. ( I get worried and spend 15 min in depression🤦♂ ) later i open my rapid api and see my api call's limit. 🤦♂😂.
Overall it was a awesome expression to build such a great project with you ..Thanks a lot..Learn a lot from your channel... Keet it up bro...
bro do u know how to get rid of it to run the project now? what to do
bro how did you fixed it?
i have started second project of you thank you i am enjoying coding
54:14 Initially i was getting the error you are not subscribed to this api , so after reading stack overflow , i simply put the rapid api key in the fetchData.js instead of using env
omg thank you so much
heyy buddy for subscribing the exercisedb we have to enter the card detail that is free or not ?
best youtube channel i would recommend to learn react, big thanks to js Mastery
This is the best react project seen so far , I am trying to make similar such but getting issues in rapidapi by not getting proper key to implement
Great tutorial! Just wanted to ask whether you had any advice regarding limiting fetch requests? both the api's you listed allow only a certain number of fetch requests per month before you get charged a fee.
So I was coding along and have been locked out of doing any fetch requests unless I either pay or wait a month to continue the project,
the same ((((
my revision guys the gif is actually not properly authorized so every one can show it there are no token and the urls are static, so using firestore to save your object result is best, but you still have to pay it first to retrieve all end point data.
Why did you changed the dependencies ? Is there any particular reason for that ?
Great work man! students really need this kind of quality in free resources not everyone can buy expensive courses. Keep it up!!
@JavaScript Mastery
Thank you for this amazing tutorial.
Hey jsm
Please make next js crash course ❤️❤️
Great video 🔥🔥
Great idea, thanks!
@@javascriptmastery ❤️
@@javascriptmastery If you add Typescript to that course I will buy it for sure.
i have been waiting for such kind of project could have looked for the api but now that you have uploaded this. I wanna thank you for this. 🎉
Glad to hear that
Your content is very helpful to me. I cannot afford the pro as of right now but when I will, I will get it. Till then the free content on UA-cam is really awesome and the best one out there. Don't stop uploading the free material. Thank you.
Happy to help!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
You always amaze with your projects :) . Which VSCode theme you are using?
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
@@bittukumar4790 Ths, i have figured it out
If you're having issues with the horizontal scrolling not working, uninstall the existing react horizontal scrolling dependency and update to the newest version. Restart your project and it should work. Hope that helped.
previous and nexticon is not working any sol?
how to uninstall existing react horizontal scrolling dependency?
@@PraNihaal npm uninstall react-horizontal-scrolling-menu
@@igc-bgmiclips3415 probably you are installing the newest version which has some errors, try to install a bit older or the same with the tutor npm i react-horizontal-scrolling-menu@2.7.1
@@salihbaslar Thank you
Hi thank you for your efforts.
Just one thing when you use react 18 u don't even need to import React from react
Great tutorial, links and program worked fine for me. Thanks for sharing.
See al those silly errors (as programmers we all do that), you can avoid them if you use typescript. Also to avoid errors when consuming your API data, you can use typescript to describe the shape of your data and when you try to access a non-existing property on it, you'll get a clear warning about that mistake.
Wish you all good luck on your journey!
Typescript rocks, thanks!
Did you recreate the project using Typescript?
@@deerp6497 No I didn't, I just watched some chunks from the video and saw some errors that could've been easily solved had he used TS (or jsdocs if you still want to use vanilla js)
@@deerp6497 But I recreated one of his projects originally using React+JS+Redux in React+TS+Zustand (a state management library replacing Redux)
@@mmk-69420 amazing, I am recreating the gym Project with TS, it is being a good practice and hard sometimes
thank you so much for this incredible video!!
we need a new project of E-Commerce site with react 18
Thank you very much and I have learnt a lot from this project.
this is amazing
Thank you!!!
Nice project 😊 I made a small Gym project on my channel with Html and Css ✅
This channel is on the next level. Great content!
Thank you!
This is so good, Adrian great work👍🏼👍🏼. All the content on this channel is 🔥
Thanks!
who ever reads my comment, just like this video man this guy deserves alot of support and motivation.
Thank you!
Make a new MERN stack video, bro, would be awesome
Will do
Underrated channel... But it is also true that Good things have less follower... because genuine people come to know them.... 🎉😁
Me encontre con, este proyecto en recomendados de You Tube, la verdad no hablo ingles, pero lo segui con el traductor, increible la aplicacion, y el proyecto, he realizado curso de react, pero me faltaba mas practica, asi que increible muchisima gracias por el aporte, compartire tus videos con amigos para que aprendan, muchas bendiciones y salud para ti muy bien explicado gracias amigo.
Can give your API key so i could do my project please
You’re basically giving a commentary of what you’re doing and not actually teaching. Great effort by the way and try to “teach” so it’d be beginner friendly, or state otherwise if it’s not.
Hello sir , I'm currently a high school student about to enter university . I started learning and coding javascript as my first language for about 3 months . I'm a pretty fast learner , do you think I should keep sharpening my basic skills in javascript or learn about other frameworks? Thanks!
Master JavaScript and then move to React! :)
Yeah Bro. As usualy, top content. Awesome tutorial
Awesome tutorial sir got to learn many new things in react
at least use free api present on the internet, why you always use paid api
It's for free
JSM You are the best teacher, thank you for sharing your knowledge with us, I have finished several of your courses in order to find a better job.
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
Thank you for all these premium contents for free. Expecting a project with usecase of context api and usereducer() please
I'm really learning from this channel....
Explanations so simple to understand.
Glad to hear that!
You are a amazing teacher !
I love your videos . they are very helpful for everyone Thanks
BEST Video sir best oneeeeeeeeeee...........thank you so much for thisssssss
Amazing Video Sir.. i am lucky to be taught by someone like you .. A great mentor, best ever tutor. you just made React so easy and handy. Lots of love From India ❤️❤️
Did you get 429 error ?
@@dankmemes3859 no I didn't
@@programmer545 can you share your link plz !!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
Nice work Mastery!!!!
I am a big fun from Kenya and I learn a lot from your projects
Brilliant tutorial, well explained and super content. Thank you
Thank you!
great tutorial i've been needing to practice api calls. question: why on firefox does it show 2 horizontal scrollbars and on chrome it just shows the one we coded?
you really deserve appreciation thanks bro..
Thanks! :)
Thank you for this YD thanks a lot
Thank you so much Andrian for making such amazing projects
Glad you like them!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
man you are really amazzzzzzing thank you sooo much
I love your videos so much you've helped me to increase my skill set in ui development so much and I greatly appreciate you 💓💓💓💓
@herbs did you complete this
thank You a lot Master!
Gonna start this project today itself. Thank you so much 💖
Wonderful!
Hi! I am stuck on 1:21:20, i got an empty array and spent give or take 2 hours on this, but do not have any idea the cause of this issue, help please
thank you for the content !! Just finished learned alot about apis xD
hey did u manage to get the horizontal scroll working?
@@senurajayasinghe4799 Yes there both working for me
I am trying to learn web development and react and your videos are very informative and your voice is nice thank you
Thanks!
the best channel that i ever seen.
sir need more project like this😍
Great Video.
Please share the extesnions detail that you have installed on your vsCode
Thanks.
Hey. Great video as always. The quality of this video alone is making me realise how good the paid stuff must be. I will try my best to buy it once I will be able to afford it. Right now not so possible.
You can contact us now if at all you’re able to afford it at the moment.
I don't know what I say for think you, you help me a lot I appreciate your work ❣❣,
When I make money I will support you think very much ❣❣
legend am a full stack developer because of your tutorials ... thank you my friend
yes@@km-bl7dj
You're the best channel in UA-cam providing thousands dollar worth content for free best regards from Pakistan ❤️
Greetings to Pakistan!
Thank you Adrian . ALL THE BEST TO YOU. THANK YOU MY BEST TEACHER😀
Thank you! 😃
@@javascriptmastery We have to thank you, not you.🙏🏻🙏🏻 I am continuing the Filmpire course that you provided. Everything is explained very well in detail. Have a great day :) 🌞🌞
@@InKenasWorld That's amazing, enjoy!
OMG you my friend are the best, thank you for making these videos..
No problem 😊
Your project is amazing!
I appreciate it! :)
Amazing. You have really helped my development. When I get a job I will be donating something huge.
Happy to help!
Really cool and inspiring. Learnt a lot
Thanks George!