React Food Delivery Website Tutorial Using, Nextjs | React js Projects for Beginners | Deploy PART:1
HTML-код
- Опубликовано: 2 июн 2024
- In this Nextjs React project, we will make a Full Stack Food/Pizza React delivery application step-by-step. We learn React hooks, modern CSS, global state management with Zustand, Stripe payment integration, and many more. We will also develop cash on delivery payment method to make this site more functional and practical.
No prior knowledge of Next.js is required to follow this project. The project is surely suitable for beginners.
Fudo Starter:
github.com/ZainRk/Fudo-pizzas...
Complete Source Code + Figma file:
/ zainkeepscode
Support me in on Patreon:
/ zainkeepscode
Time Stamps:
00:00 Intro
04:07 Overview
05:53 Starter Pack
09:53 Layout
30:00 Hero Component
51:38 Services
1:00:00 Sanity Setup
1:20:28 Menu
1:33:00 Pizza page
2:01:15 Outro
INSTAGRAM :
/ zainkeepscode
FACEBOOK:
/ zainkeepscode-10757083...
One of the best tutorials, I like that you don´t waste any time
I have to say that you are best react developer i have ever seen
Thank you for this amazing tutorial
👏 super bro keep going i want MERN stack related videos like this
Thanks for this awesome project 🐐
U tutorial is very smart 👍 very useful in best channel ✍️
Another great project thanks Zain, any chance you could show us an employee/client booking or scheduler for misc. appointments related MERN app ?
Need more of your tutorials, for me your explanation is really one of the best
Learned a lot from you 🎉
More to come!
Love from India
good job friend 😀
Nice.
Do you use any css extension? Because you are typing bg, m, p and it is just showing off
Thanks Bhai bhut badia project bnaya hai ⭐⭐
bhai, have u complete d the projct?
i'm stuck at an error @1:43:50 "param $ referenced, but not provided" plzz help krdo
@@shubhodeepbanerjee2004 file name is [slug].js.
Make sure you are using right bracket
@@sanyamjain04 yes bro, i checked that.
Hello Sir, waiting for your next react or mern project..! Please do it sir, Complete MERN auth project with email otp activation.. pleae sir.
Bhai this project is awesome
bro, have you finished this project?
i had an error @1:43:50 , needed some help
U should include product filter option in single shop page
If I want to create this same project using React js instead of Next js ,what changes should I make?
Hello Zain, I would love to connect more with you, i eally love your react projects
My name is zain too from Pakistan you really helped to get me Job
bro, have you completed the completed project? needed some help, I'am getting an error msg at 1:26:51
Make a video about framer motion
How to get such good assets like you have used in this project?
Plz share
From which websites i get "Easy To Order" like images or illustartor
What's the name of font used on vsc?
I have one problem face on this project. Why Hero section are not shown in my page..please resolve it.
In this all process.. How Admin can see what user ordered? and where?
Do more next js................
const src = urlFor(pizza.image).url() in [slug].js giving TypeError: Cannot read properties of null (reading 'image')
Please help.
❤❤❤❤❤
Admin login and user login available in this ?
Guys anyone please help me when i fetch data from sanity studio , it returns undefined what should I do
Hello, I am wondering how to set the comment shortcut at JSX code at 18:10 and enable the Emmet at JSX code. Thanks
in your setting.json add this
"emmet.preferences": {
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true,
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
}
1:26:10. TypeError: Cannot read properties of undefined (reading 'url') !!!
Is it responsive for all device ?
can someome tell me if this project is responsive for mobile ?
can u make tutorial Shopify?
There must be login authentication
is it responsive website?
In my schemas ..there is no file name schema.js instead of that I have index.ts ...how should I do the things
Eu criei, você também pode criar ,,
Pls am getting error that Layout is not defined .. pls how do I resolve it. Pls thank you very much Mr. Zainkeepsstore
Its very possible that you forgot to import the Layout component in index.js
I typed yarn in my terminal it’s not working
where are the pizza images?
It wioulb be great if you made it using MERN :(
is it responsive?
TypeError: Cannot read properties of null (reading 'image')
This is because of getting null on slug.js
did you solved that error i am also facing same issue
@@parveenyaduvanshi7645 Yeah, but how we fix it?
@@ishikaagarwal5512 yes
Hello
please help me to make this responsive..
it is ok if i am using npm ?
Hi i have one problem sir please solve
I have got one problem please solve sir.
Params $ referenced, but not provided
I got that too.. @1:43:55
@FCKBleSSed noo bro, not yet. Can u plz help me with this issue ??
I got the same problem too
Eu também estou com o mesmo problema
is it okay for a portfolio, to apply for a job?🙏
yes, but you should add authentication. :)
Bro why data isn't showing on console on 1:42:00 despite the code the same as yours 100% and didn;t work
Did u resolve this issue coz I'm getting the same issue
Unfortunately, The Sanity crap does not install, tried 2 times as you did in the video. Also not found a solution on RUclips or Google.
all his videos and projects are very sloppy and break very easily. i would recommend learning somewhere else
did u able to solve that problem>?
Bgm music 🎵 y name?
getting error as 'null' in 1:42:01. please resolve it
did it resolve?
i am facing the same issue
export async function getStaticProps(context) {
const { slug = "" } = context.params
const pizza = await client.fetch(`*[_type=="pizza" && slug.current=='${slug}'][0]`)
return {
props: {
pizza,
},
}
}
Did you find a solution?
i appreciate this tutorial, but this website breaks easily. the hero section is not responsive.
w
Why not use react 😥
he is using react... next js is react based
Eeeeeeee
Add the product in the cart... PRESS that refresh button for the page everything will be gone.. nobody on youtube teaches you right
Sir can you give me the source code for free please? I need this immediately please help me brother?
i am getting null on [slug].js
same
did you get any solution how to fix it?
@@amitsumit3458 that was typo in the query. Solved.
export async function getStaticPaths() {
const paths = await client.fetch(
`*[_type == "pizza" && defined(slug.current)][].slug.current`
);
return {
paths: paths.map((slug) => ({ params: { slug } })),
fallback: true,
};
}
export async function getStaticProps(context) {
const { slug = "" } = context.params;
const pizza = await client.fetch(
`
*[_type == "pizza" && slug.current == $slug][0]
`,
{ slug }
);
return {
props: {
pizza,
},
};
}
copy and paste this code
@@awaisraza2285 Thank you so much... you made my day
Bhai second part video mein 10:00 mein bhi error aa raha hai:
"Cannot read properties of undefined (reading 'length')"
i get an error at 1:09:13. when i check sanity it says
Unknown type: number. Did you mean "number"? Valid types are: pizza, array, block, boolean, datetime, date, document, email, file, geopoint, image, number, object, reference, crossDatasetReference, slug, string, telephone, text and url
anyone else?
did it resolve?
hello pls i have error:TypeError: Cannot read properties of null (reading 'images') in slug.js
I'm having the same problem, did you fix that?
@@deerp6497 yes
Uma ajuda, como é que você conseguiu resolver, por favor, ajude