Exactly, the reason I hardly follow other tutorials is because Lama would not copy a single CSS line. He made me love using scss which I used to be afraid of
Thanks Lama, they way you teach us no one can teach us, your style of tutorials are way better than anyone else, I have watched a lot of videos before getting to know about you and I must say you are the best, best of best 👌 Thank you so much 💗
i love lama dev projects and videos, and i really like his voice, i don't know i just don't get bothered even if i watch video of 24h of him , well done sir 💖
Hey man, really appreciate your hard work. Keep going !! But I'd like to point out that, it would've been way better if you added some responsivity to your project because you can't find a website that isn't responsive or someone that would ask for one. + The people watching this tutorial probably needs to improve their css skills especially with making responsive websites :) Otherwise, great video !! Keep up the good work
You are the best :) You have helped me get to the next level of React development, and deploy my first real app to hostinger. Your tutorials are easy to follow and such a pleasure to listen to.. Thank you!!
Thanks Lama, they way you teach us no one can teach us, your style of tutorials are way better than anyone else, I have watched a lot of videos before getting to know about you and I must say you are the best, best of best Your work
Hi Lama! In the future tutorial, could we perhaps step up the game a bit by adding advanced techniques like higher order components, portals, microservices, etc. (mid-senior level)? Also it would be great to get a few tutorials in Typescript.
Kudos for making this awsome series. Next, can you make one complete project with intermediate/senior people in mind? The backend may be more focused on microservice, service discovery, and pluggable auth modules. Talking about the tech stack it could be docker, nginx, passport, react query, nestjs, graphql, and so on.
Hope that your channel will grow and soon reach to 1M subscribers. Your hard work and passion for creating such content for free is really appreciable.
Hi Lama, Thanks for the wonderful videos you do ! Just a suggestion - Redux is not being preferred these days so would be good if you make videos with different libraries/approach like using NextJS, using Context, Zustand, React Query etc. This would add much more value. Thanks.
Differences between RTK query and React Query ?? I think redux toolkit is a very good approach these days in mid-large projects, context gets very messy with large projects, i would like to know where you got that is not a good approach?
@@frontendmentorguru Handling server state gets very difficult with RTK query, whereas react-query provides a cache that is way better and simpler than Redux.
Thanks so much! One feedback is, when you corrected some syntax or implementation, there wasn't much explanation regarding why, but overall, excellent stuff. Thanks again.
Amazing video! almost done working on this and just to point at something incase anyone runs into a problem be sure to check that you are using the correct API redirect "api::order.order', took me while to figure out this was the reason my axios call to the stripe payment page was failing
i mean, we should checked the checkbox, then the data would showed up if we dont wanna use sort method or filter method, the data should showed up for the first time rendering
Great Work! You are simply doing very great. Thank you... However, It would be great to see more advanced production-based microservices projects. This is great for mid-level and senior devs.
Best tutorials ever! I can't seem to make SASS work! I installed using yarn, all the dependecies are ok, the CSS works fine, but if I do the parent-child wrapper thing, it doesnt work!
Wow first time I can see located product that is useful to know about and I didn't have to fast forward! I'm using AWS hosting, but now I'm considering migration.
for error: 'process not defined', solution which work! and it is from chatgpt (be aware that in mini branch repo he used, vite is the build tool, not create react) error: process is not defined useEffect(() => { const fetchData = async () => { try { const data = await axios.get(process.env.REACT_APP_API_URL + "/products", { headers: { Authorization: "bearer " + process.env.REACT_APP_API_TOKEN, }, }) } catch (err) { console.log(err) } } }, []) The error message you're seeing, "process is not defined," typically occurs when you're trying to access the process object in a client-side JavaScript environment like a web browser. The process object is specific to Node.js and is not available in the browser by default. It seems like you're using process.env.REACT_APP_API_URL and process.env.REACT_APP_API_TOKEN to access environment variables in your client-side code. To use environment variables in a browser environment, you need to set them up differently. One common approach is to use a build tool like webpack or create-react-app, which allows you to define environment variables in a configuration file or through command-line arguments. These build tools replace the environment variables with their actual values during the build process. Assuming you're using create-react-app, you can define your environment variables in a .env file at the root of your project. Create a file named .env and add the following lines: REACT_APP_API_URL=your_api_url REACT_APP_API_TOKEN=your_api_token Make sure to replace your_api_url and your_api_token with the actual values you want to use. Then, in your code, you can access these environment variables directly without using process.env: useEffect(() => { const fetchData = async () => { try { const data = await axios.get( `${process.env.REACT_APP_API_URL}/products`, { headers: { Authorization: `bearer ${process.env.REACT_APP_API_TOKEN}`, }, } ); // Process the fetched data } catch (err) { console.log(err); } }; fetchData(); }, []); By using the REACT_APP_ prefix in your environment variable names, create-react-app will automatically pick them up and make them available in your code. Remember to restart your development server after making changes to the .env file for the changes to take effect. I am using vite If you're using Vite as your build tool instead of create-react-app, the process for setting up environment variables may be slightly different. In Vite, you can define environment variables using a .env file or by passing them as command-line arguments. Create a .env file at the root of your project and define your environment variables: VITE_API_URL=your_api_url VITE_API_TOKEN=your_api_token Replace your_api_url and your_api_token with the actual values you want to use. In your code, you can access these environment variables using import.meta.env: useEffect(() => { const fetchData = async () => { try { const data = await axios.get( `${import.meta.env.VITE_API_URL}/products`, { headers: { Authorization: `bearer ${import.meta.env.VITE_API_TOKEN}`, }, } ); // Process the fetched data } catch (err) { console.log(err); } }; fetchData(); }, []); By using import.meta.env.VITE_ prefix, Vite will replace these variables with their corresponding values during the build process. Make sure to restart your development server after making changes to the .env file for the changes to take effect. Note: In Vite, environment variables prefixed with VITE_ are exposed to the browser, while variables without the prefix are only available during the build process. This is a security measure to prevent sensitive information from being exposed in the browser.
can u help me with the vite process again? I installed the react app by cloning his react-mini from github. so I have to use the vite one or create react app one?
Hey!i really appreciate your hard work but i have one recommendation,if you can it is helpful..I think it will be better if you'll be sharing a designs of projects i mean like a figma link of the project
Yes, Please make react touter 6.4.3 tutorials, like api fetching etc just include all its features so we can understand which rounter to use based on requirements.
I really like this project and the way it's being taught, my issue is needing the dummy data he's using with images. I can't seem to find it in the github or anything. I skipped using it the first time it's introduced because I'm sure a backend would be used. But where is that dummy data?
hello, I am a follower yours, this tutorial is amazing, I have some questions, 1.- how could I do to reseting the cart to 0 when I did checkout! 2.- How could I add billing and Shipping 3-How could I do login to my clients and they can see in their email the order.
You are so good to explain, man. Thank you so much. One question: How to use payment in the real world? Like, to use a real credit card and verify if it's fraud or not?
when you use the map function to build up the subCats filter, the function returns an array of string so you need to remove the commas using the replace(/,/g, "") otherwise the product categories filter on the sub categories won't work
In 02:25:00 when I click on hat or t-shirt in the filter section, nothing happens and it doesn't show a photo, only " loading " appears for a moment . Please help me .
@@bilalgilani9017 Using array. join(' '), array can be transformed into strings，this is my code： ${selectedSub.map(item =>`&filters[sub_categories][id][$eq]=${item}`).join('')} ，this will allow for normal filtering. Forgive me for not being very good at English
Thank you, so much for making this awesome video. Can you please make a tutorial for react-router, you mentioned it has some awesome features, It would be really helpful.
Hey Lama Dev, nice tutorial. Just a quick question though about the slider part @ 43:00 . Isn't it easier to just have this
In the slider ? without having the translateX thing , and without setting our container to 300vw ? I don't know what is best practice here . Of course we still use the handlers for the next and previous slide. Could you clarify for me, please ?
when requiring stripe (const stripe = require('stripe')). I am getting a warning that states: 'This expression is not callable.' ??? (red squiggly line)
Hello, this tutorial was so helpful. 3 and a half very appreciated hours of content. I only have one question, is there an alternative other than using the vps for strapi? It's a little expensive and I've been attempting to find a free vps that works but failed. Do you think it's possible to deploy strapi as the backend server on a shared webhost too or something?
Hey, did you complete this project? How can we get the images he's using on STAPI? I guess he didn't upload those images on GitHub. Did you download those images on your own?
@@vishwasgupta605 hei. No, instead I downloaded photos from unsplash(free stock pictures) and then uploaded them on Strapi. I'm done with the project but having a little trouble with deployment.
Hi friends :) Thanks for watching. Don’t forget to check this insane Black Friday Discount: hostinger.com/lamadev
@@user-wh6ki2oj3l yes we need more nextjs tutorial
intro song?
Can you enable subtitles? .please
Hi, could you please show how to add custom stripe component to this instead of redirecting to stripe page.
Great video. learnt a lot.
First a big thank you!
01:43:15 strapi starts
01:45:53 tables
1:50:00 relationships
2:00:00 axios
2:05:40 populate=*
2:11:40 axios defaults
2:24:45 cool queries
2:28:23 filter object
2:34:22 state
2:43:31 cart quantity
2:48:30 cookies
2:50:07 STRIPE PAYMENTS!
2:53:02 backend
2:53:47 "lets do that!"
3:00:10 price options
3:03:35 delete email field
3:04:12 frontend
3:06:48 post order
3:07:47 fixing errors
3:09:29 filling in form
3:12:12 hosting
3:17:13 copy key
from where i can get the images for strapi
Just woke up and saw the notification of this video, and you can't imagine how excited I became to build this. Thank you Lama
Same 😀
its responsive?
@@akkingster No, it's not
I like the fact that you don't use css libraries in your build. You make it possible for us to advance our skills on css
Is this website responsive?
THIS! I couldn't agree more
@@suvrajitmondal2325 is it responsive?
Exactly, the reason I hardly follow other tutorials is because Lama would not copy a single CSS line. He made me love using scss which I used to be afraid of
@@adesojisotubo916 but the website is not responsive.
Thanks Lama, they way you teach us no one can teach us, your style of tutorials are way better than anyone else, I have watched a lot of videos before getting to know about you and I must say you are the best, best of best 👌 Thank you so much 💗
likeee taaaat... 🤣🤣
Love this full stack e-commerce app tutorial. Appreciate that you include the final deployment!
Love your e-commerce series. That’s a reality for a junior dev.
where is the series????
@@hubesh716 he meant all the e commerce websites build by lama dev
i love lama dev projects and videos, and i really like his voice, i don't know i just don't get bothered even if i watch video of 24h of him , well done sir 💖
Hey man, really appreciate your hard work. Keep going !! But I'd like to point out that, it would've been way better if you added some responsivity to your project because you can't find a website that isn't responsive or someone that would ask for one. + The people watching this tutorial probably needs to improve their css skills especially with making responsive websites :)
Otherwise, great video !! Keep up the good work
You are the best :) You have helped me get to the next level of React development, and deploy my first real app to hostinger. Your tutorials are easy to follow and such a pleasure to listen to.. Thank you!!
was the hosting process free or did it cost something?
Thanks Lama, they way you teach us no one can teach us, your style of tutorials are way better than anyone else, I have watched a lot of videos before getting to know about you and I must say you are the best, best of best Your work
Hi Lama! In the future tutorial, could we perhaps step up the game a bit by adding advanced techniques like higher order components, portals, microservices, etc. (mid-senior level)? Also it would be great to get a few tutorials in Typescript.
stop flexing your dedication 😤
@@krishp1104 😂
Kudos for making this awsome series. Next, can you make one complete project with intermediate/senior people in mind? The backend may be more focused on microservice, service discovery, and pluggable auth modules. Talking about the tech stack it could be docker, nginx, passport, react query, nestjs, graphql, and so on.
Hope that your channel will grow and soon reach to 1M subscribers.
Your hard work and passion for creating such content for free is really appreciable.
Hi Lama, Thanks for the wonderful videos you do !
Just a suggestion - Redux is not being preferred these days so would be good if you make videos with different libraries/approach like using NextJS, using Context, Zustand, React Query etc. This would add much more value.
Thanks.
Differences between RTK query and React Query ?? I think redux toolkit is a very good approach these days in mid-large projects, context gets very messy with large projects, i would like to know where you got that is not a good approach?
@@frontendmentorguru Handling server state gets very difficult with RTK query, whereas react-query provides a cache that is way better and simpler than Redux.
How about recoil?
@@juliansyah4byte57 recoil, zustand, or just react query is enough
Hey I dont know redux at all, do u thnk I should follow along with this tutorial?
Thanks so much! One feedback is, when you corrected some syntax or implementation, there wasn't much explanation regarding why, but overall, excellent stuff. Thanks again.
You rule bro, the best react channel ever on UA-cam, keep up the good work ❤
Introducing Typescript to your subsequent projects will be nice. Thanks for this amazing project.
YOU ARE KING. I really like watch your tutorials and i am so comfortable to understand the logic & codes. appreciate man.
I really appreciate your videos on how you use CSS, React and Node in simple ways... Great Work man.
Hi bro can u tell mw did he provide the data like images and all?
Yooooo...finally..been waitinf for dis tnks LAMA u d best much love from Nigeria 🤗🤗😍😍
Amazing video! almost done working on this and just to point at something incase anyone runs into a problem be sure to check that you are using the correct API redirect "api::order.order', took me while to figure out this was the reason my axios call to the stripe payment page was failing
Bro did you get any error while installing strapi
@@sanyamjain4777 yeah its Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password: YES)
@@lalagisaa i solved it thank you
@@sanyamjain4777 u getting error on products ? my filter and sort method didnt work .. any ideas why ?
i mean, we should checked the checkbox, then the data would showed up
if we dont wanna use sort method or filter method, the data should showed up for the first time rendering
Thank you for this amazing tutorial. Never disappointed in waiting, thank you from the bottom of my heart.
Have you completetd this project
This is the #1 chanel in youtube. ❤
Thank you Safak for the excellent video class I already bought hosting at hostinger with LAMA discount . Keep it up good working!
Was waiting for this! Beautiful tutorial!
uzun zamandir buralar durgundu. Belliydi buyuk bi seylerin gelecegi. ellerine saglik reis
Thank you for this amazing project. You are a blessing, we owe you so much. 💯
So excited to start this project 🙌🏼😁😁
Great Work! You are simply doing very great. Thank you...
However, It would be great to see more advanced production-based microservices projects. This is great for mid-level and senior devs.
Hi bro can u tell mw did he provide the data like images and all?
@@AryanYadav-wp9cf no he didn't
It is responsive website or not
Best tutorials ever!
I can't seem to make SASS work! I installed using yarn, all the dependecies are ok, the CSS works fine, but if I do the parent-child wrapper thing, it doesnt work!
were u able to make it responsive?
I just landed on your tutorial. I am looking forward it to learn a ton.
this is a great tutorial, stripe section is amazing. thank you
Hi @LamaDev, you are the best tutor out there. Thanks. Hope for more tutorials.
Excellent tutorial! Precise and clear.
Wow first time I can see located product that is useful to know about and I didn't have to fast forward! I'm using AWS hosting, but now I'm considering migration.
for error: 'process not defined', solution which work! and it is from chatgpt
(be aware that in mini branch repo he used, vite is the build tool, not create react)
error: process is not defined
useEffect(() => { const fetchData = async () => { try { const data = await axios.get(process.env.REACT_APP_API_URL + "/products", { headers: { Authorization: "bearer " + process.env.REACT_APP_API_TOKEN, }, }) } catch (err) { console.log(err) } } }, [])
The error message you're seeing, "process is not defined," typically occurs when you're trying to access the process object in a client-side JavaScript environment like a web browser. The process object is specific to Node.js and is not available in the browser by default.
It seems like you're using process.env.REACT_APP_API_URL and process.env.REACT_APP_API_TOKEN to access environment variables in your client-side code. To use environment variables in a browser environment, you need to set them up differently.
One common approach is to use a build tool like webpack or create-react-app, which allows you to define environment variables in a configuration file or through command-line arguments. These build tools replace the environment variables with their actual values during the build process.
Assuming you're using create-react-app, you can define your environment variables in a .env file at the root of your project. Create a file named .env and add the following lines:
REACT_APP_API_URL=your_api_url
REACT_APP_API_TOKEN=your_api_token
Make sure to replace your_api_url and your_api_token with the actual values you want to use.
Then, in your code, you can access these environment variables directly without using process.env:
useEffect(() => {
const fetchData = async () => {
try {
const data = await axios.get(
`${process.env.REACT_APP_API_URL}/products`,
{
headers: {
Authorization: `bearer ${process.env.REACT_APP_API_TOKEN}`,
},
}
);
// Process the fetched data
} catch (err) {
console.log(err);
}
};
fetchData();
}, []);
By using the REACT_APP_ prefix in your environment variable names, create-react-app will automatically pick them up and make them available in your code.
Remember to restart your development server after making changes to the .env file for the changes to take effect.
I am using vite
If you're using Vite as your build tool instead of create-react-app, the process for setting up environment variables may be slightly different.
In Vite, you can define environment variables using a .env file or by passing them as command-line arguments.
Create a .env file at the root of your project and define your environment variables:
VITE_API_URL=your_api_url
VITE_API_TOKEN=your_api_token
Replace your_api_url and your_api_token with the actual values you want to use.
In your code, you can access these environment variables using import.meta.env:
useEffect(() => {
const fetchData = async () => {
try {
const data = await axios.get(
`${import.meta.env.VITE_API_URL}/products`,
{
headers: {
Authorization: `bearer ${import.meta.env.VITE_API_TOKEN}`,
},
}
);
// Process the fetched data
} catch (err) {
console.log(err);
}
};
fetchData();
}, []);
By using import.meta.env.VITE_ prefix, Vite will replace these variables with their corresponding values during the build process.
Make sure to restart your development server after making changes to the .env file for the changes to take effect.
Note: In Vite, environment variables prefixed with VITE_ are exposed to the browser, while variables without the prefix are only available during the build process. This is a security measure to prevent sensitive information from being exposed in the browser.
thank u so much
@@iamgagel glad to help. this problem stops me for days and days
can u help me with the vite process again? I installed the react app by cloning his react-mini from github. so I have to use the vite one or create react app one?
thank you
how did you handle the upload url while fetching the data url from strapi? I'm getting an error. Please help
Would love a new react-router breakdown man. You are aware of stuff id never come across otherwise.
HI lama, your tutorial is amazing, thanks your is my best teacher all to youtube, thanks grand master, is not how to thank Grettings from Venezuela
Next project request: AirBnb clone with next js, strapi, and stripe ❤
Always the best . We love you Lamadev
Amazing content looking forward for more videos explaining strapi features
Thanks Sir for such amazing project ... I was searching for video using Strapi
ahhh god bless you, please make more content like this one, I will do it and addit in my portfolio
Thank you master Lama!!!! This framework is awesome!!!! Thank you so much!!!!
This E-commerce responsive?
You're amazing teacher much love brother from this side
Hey!i really appreciate your hard work but i have one recommendation,if you can it is helpful..I think it will be better if you'll be sharing a designs of projects i mean like a figma link of the project
Yes, Please make react touter 6.4.3 tutorials, like api fetching etc just include all its features so we can understand which rounter to use based on requirements.
Great work man 💐 keep going ❤️
2:05:05 if there's no old price, use the normal price and add $20 🤣🤣😂😂😂😂 you got me with that one 😂😂🤣🤣
I really like this project and the way it's being taught, my issue is needing the dummy data he's using with images. I can't seem to find it in the github or anything. I skipped using it the first time it's introduced because I'm sure a backend would be used. But where is that dummy data?
same i too needed it
Hi, that lesson is brilliant. Thanks.
hello, I am a follower yours, this tutorial is amazing, I have some questions,
1.- how could I do to reseting the cart to 0 when I did checkout!
2.- How could I add billing and Shipping
3-How could I do login to my clients and they can see in their email the order.
Great as always, thanks for all your hard work. Please drop some TS full stack projects 😊
Copyright sign is done by... © .... Great video. learnt a lot.
Hey , amazing tutorial ! could you please make a more in-depth tutorial about the very last version of react-router ! thanks a lot :)
great tutorial as always. Thanks!
excellent tutorial on react! Thank You
A tutorial on react-router-dom v6.4.5 would be great
You are so good to explain, man. Thank you so much.
One question: How to use payment in the real world? Like, to use a real credit card and verify if it's fraud or not?
Got it what I expected in before.... thanks Lama😍
have you completed this project i need some help
Always wonderfull tutorials thanks
Love your CSS skills
Hlo... Lama..! you and your projects are amazing..thank you sooo much..... Requesting to complete the MERNsocial media app.. Waiting for more videos..
Thank you so much the good work lama
THIS IS REALLY GOOD!!
Finish !! Thanks for the learning
First comment lama😍 would love to see the subscription based tutorial also
ooooooooooooooooooo
i love this video its very very helpful for beginer full stack developer
you never disappoint 👌👌. thank you so much for great content
Wow amazing work!
The most awaited Video thank you so much for
missing the tutorial Lama Dev. Amazing tutorial when will you be back ?
legend is back 👍🏻
finally handled this challenge too.... Thank a lot!!
Hey I have some doubt.. Can u plz help me
@@padminip yeah, what's it?
@@bahtitashpaev7285 Am getting error while installing strapi..
It's showing error
when you use the map function to build up the subCats filter, the function returns an array of string so you need to remove the commas using
the replace(/,/g, "") otherwise the product categories filter on the sub categories won't work
🙏 ♥
hey how do you exactly add the repace in?
@@homeromendoza7446 did you find the solution?
In 02:25:00 when I click on hat or t-shirt in the filter section, nothing happens and it doesn't show a photo, only " loading " appears for a moment . Please help me .
@@bilalgilani9017 Using array. join(' '), array can be transformed into strings，this is my code：
${selectedSub.map(item =>`&filters[sub_categories][id][$eq]=${item}`).join('')} ，this will allow for normal filtering.
Forgive me for not being very good at English
Thank you, so much for making this awesome video. Can you please make a tutorial for react-router, you mentioned it has some awesome features, It would be really helpful.
Nice!!! Thanks, bro!
God bless you!
Woow this is wonderful
You are the best! Waiting for new React Router DOM video :)
Hey Lama Dev, nice tutorial. Just a quick question though about the slider part @ 43:00 . Isn't it easier to just have this
In the slider ? without having the translateX thing , and without setting our container to 300vw ? I don't know what is best practice here . Of course we still use the handlers for the next and previous slide. Could you clarify for me, please ?
Nice Video! Thanks! 🙂
Thank you Lama. Can you make an updated React Router tutorial please? Much love to you ma man.
Awesome tutorial thank you
A tutorial would be really helpful on react-router-v6, loved the createBrowserRouter
website looking very good, before starting the project I just wanted to know if the website is responsive. Thanks in advance
Great work 🔥
Thank you Lama Dev. Great Tutorial !!!
I would like to know if a MERN app can be deploy on Hostinger Shared Hosting Plan
13:37
Yes please we want projects about it😘😘😘😘😘
Excellent video, how about some similiar future projects but this time using Typescript
Keep up with your good works I'm becoming a better developer for sure.
Thank you so Much lama
Hi Lama Dev, how do you prepare this project? By writing down the ideas and plans or you just do it in your mind? Can you answer please?
Maybe create premium course with big topic and using MERN, this cool!😁😅
Thanks!!! You are the best!!!
when requiring stripe (const stripe = require('stripe')). I am getting a warning that states: 'This expression is not callable.' ??? (red squiggly line)
thank you lama!
Really good video! You can do tutorial about this new react router dom 👍👍
Hello, this tutorial was so helpful. 3 and a half very appreciated hours of content. I only have one question, is there an alternative other than using the vps for strapi? It's a little expensive and I've been attempting to find a free vps that works but failed. Do you think it's possible to deploy strapi as the backend server on a shared webhost too or something?
Hey, did you complete this project? How can we get the images he's using on STAPI? I guess he didn't upload those images on GitHub. Did you download those images on your own?
@@vishwasgupta605 hei. No, instead I downloaded photos from unsplash(free stock pictures) and then uploaded them on Strapi. I'm done with the project but having a little trouble with deployment.
@@Catherine_Everdeen thanks for the reply and gl with your deployment 🤞
Where do you look for websites for inspiration? I'm looking for a site to model my personal blog and web portfolio over.