Build & Deploy Full Stack Next.Js Online Grocery React App Store | React, Strapi, Tailwindcss

[@istanbulportrait]

Excellent content, as a 35-year-old person who just started coding, I understand everything very well. I have spent more than 1000 USD on training so far and none of them have been this productive. I am truly grateful to you and will do my best to support you in the future.

[@ijasdeen3809]

You're too late. please switch your career to something else, you will not be surviving here. I am talking from my experiences.

[@tubeguruji]

Great to hear!, Thanks

[@istanbulportrait]

@@tubeguruji Thanks bro, appreciated

[@SaadMahimkar]

brother but why into coding after 35 years ?

[@istanbulportrait]

@@SaadMahimkar Since I was tired of the whims of software developers, I decided to learn it myself.

[@PathakFX]

Bro its been just 1 day, your video ranks on top 5, too much helpful.

[@tubeguruji]

Glad it helped

[@Website_TV_1]

🚀 Ready to build a Full Stack Next.js Grocery App? Here are the key moments you shouldn't miss! 💡 00:20:48 🔥 Header Design 00:35:32 🚀 Strapi Setup 00:51:23 🔄 Category Dropdown (Strapi API) 01:19:48 📊 Get Category List (Home) 02:28:41 🔑 Use Authentication 03:15:47 🛒 Add to Cart Function 04:20:09 💳 Paypal Payment Integration 04:40:32 ✅ Order Confirmation Stay tuned for more awesome tutorials! 🙌 #FullStack #NextJS #ReactApp

[@nabinghimire6433]

Watching your project from Nepal. I'm leaving this comment to say WOW👌👌

[@tubeguruji]

Thank you so much 😀

[@md.joynalabedin2696]

One of the best tutorials of strapi.

[@adityabonde7310]

hello sir i did exactly what you did but @1:07:32 im not seeing any pic in my category, after inspecting it showing this messagEach child in a list should have a unique "key" prop.

[@cadena752]

Excellent video turned out very good and beautiful and you explained very well, my congratulations, you gained a new KZbinr subscriber. 👏😎

[@tubeguruji]

Thank you so much!

[@DEBUGENTITY]

Bhai khatarnak video.. Make more next js + tailwind full stack projects bro🎉

[@tubeguruji]

Sure, Thanks

[@JDUDEadventure]

love the enthusiasm of this tutorial!

[@tubeguruji]

Happy to hear that!

[@donfidelisii5396]

RESOLVED: I'm getting an error when i run "npm run develop" after connecting and creating the database. its a loadError (failed to load native binding) binding.js 333 ... First it showed a problem with the jsconfig saying it needed a module option with "NodeNext" i added that but it still wont run the develop SOLUTION: I ran 'npm install' then ran 'npm audit fix --force' to resolve over 18 vulnerabilities repeatedly

[@Racine14]

Can you show how to deploy it on vercel?

[@avivshvitzky2459]

A grocery project is very nice, good job man. BTW I started using prismic instead of strapi, for now I find it really nice!

[@tubeguruji]

Great

[@avivshvitzky2459]

@@tubeguruji never mind, i decided to go the mdx route

[@SaadMahimkar]

In the auth section you declare "Use client" in the main Layout to prevent the header to be rendered when we are in the signin page. Use client in the main layout means all the app in client mode. Ssr is lost then what's the point of using nextJs ?

[@adityabonde7310]

hello sir i did exactly what you did but @1:07.32 im not seeing any pic in my category, after inspecting it showing this message Each child in a list should have a unique "key" prop.

[@matthiasmatanda4295]

You are just so genius, thanks for this tutorial, I have learned a lot from it.

[@CodeSnap01]

Excellent video easy to understand ... Please make employee management and attendance management system.

[@tubeguruji]

Yes, Soon it will publish

[@shashank.superone]

Tubeguruji, You have great tutorials and way great explained. Fan of that. But one important question, in almost all of your NextJs tutorials you creat almost all components as client components only with use client directive. Why not use the server components which NextJs recommends for performance and only few leaf components as child component where user interaction is there? Please have something for that as modern web in NextJs.

[@tubeguruji]

This project as server side component as well. Most of the application has client interaction thats why

[@Kwame_Kwao]

You are an amazing dude! You make complex coding eazy and fun.😍❤🙏🏽

[@tubeguruji]

Thanks

[@erdevkumar7]

nice video very helpfull for develope frontend in react, having good explaination on paypal and good for design using tailwind, thanx so much

[@tubeguruji]

Most welcome, & Thanks

[@samueltaub]

In the auth section you declare "Use client" in the main Layout to prevent the header to be rendered when we are in the signin page. Use client in the main layout means all the app in client mode. Ssr is lost

[@usmanmarkaz]

thanks for continously posting videoz on your channel and your react native videoz helps me a alot thanks again and looking for some excited projects with react naitve and node js thanks

[@tubeguruji]

Thank you much

[@uv_codes]

We need the deployment part. Especially for Strapi

[@tubeguruji]

Watc My latest previous video where I deploy Strapi

[@dolapoajayi2156]

Hi how do we go about protecting a layout .first example an admin dashboard.how do we protect it???

[@tubeguruji]

What to mean by protecting?

[@dolapoajayi2156]

Protected routes.i wanna protect the admin route from the user route

[@Е.В.И-р1л]

Thats exactly what i needed for. Thanx so much

[@tubeguruji]

You're welcome!

[@Е.В.И-р1л]

@@tubeguruji Btw, in demo site search doesn't work at all, and i cannnot find info in your tutorial

[@gowshik.m2369]

while we create the category List the images not able to fetch from from the DB it tell like image Src is missing ,so what can do for that

[@tubeguruji]

Make sure u r trying to access correct image src from the response

[@S.AdithyaVardhan]

bro use src={process.env.NEXT_PUBLIC_BACKEND_BASE_URL+category.attributes.icon.data[0].attributes.url}

[@EmanuelPontoni]

Hi! Why do I get a 403 forbidden error in the browser console when I create a new order? any idea?

[@CptJuke]

Great tutorial man! Greetings from Greece ☀️! May I suggest prettier extension for auto formatting. It’s really useful

[@tubeguruji]

Thanks for the tip!

[@mohammadeisa4601]

Excellent work.. Keep it up 👍

[@tubeguruji]

Thank u ☺️

[@uminhtetoo]

Thank you so much for sharing your experience and knowledge, Sir.

[@tubeguruji]

Always welcome

[@mileslegend]

this is amazing,,,,,man your another level

[@tubeguruji]

Thanks

[@emilioalcantara3277]

Finally a PayPal integration video 🎉

[@lordhakim9534]

if possible can u user mern stack instead of next js . please

[@technoinfoworldwide2329]

thanks for the video, continuously following your course which is beneficial to beginner in next js and tailwind. Just a request , do integrate nodejs or nest js also alternative to strapi.

[@tubeguruji]

Thank you so much, Thanks for suggestion

[@sheshanpradhan2640]

Great project, I build this by watching the entire video, but I have not used strapi instead I created my own backed using Java and spring boot

[@tubeguruji]

Nice work!

[@sheshanpradhan2640]

@@tubeguruji Hey can you make another project with UPI or PhonePe integration on nextjs app

[@FarijulTanzil]

when I try to post on the addToCart api it gives me this error `Failed to load resource: the server responded with a status of 403 (Forbidden)` please help me on this problem

[@tubeguruji]

MAke sure the API is enabled and had Create permission attached.

[@EmanuelPontoni]

I have the same problem, have you been able to solve it?

[@aditya-d-]

you should add all details , here 4:05:34 you add profile also , when add this in video , i am beginner

[@tubeguruji]

Sure

[@debapriyamukherjee3400]

i want to make this project for a grocery shop do i really need to make a subscription for render or the free one will work fine

[@KiranKrishnan-g9j]

Hi,im using Next 14.2..im getting this error on npm run build after slider component while this error is showned "Generating static pages (4/5) [====]TypeError: e.map is not a function " what could be the reason can u please guide

[@vijayshankarcrypto5681]

Thank you sir. The tutorial is amazing :-) Waiting for the turtorial video - app that shows similar interests near by location

[@tubeguruji]

Noted. Thank you

[@dreamerb1]

What is relation with poducts in user-carts? many to one or anything else?

[@tubeguruji]

One to Many.. One user can have multiple prodcuts

[@wcdemo]

brother ya delete method ma legatyia ha or bhir ham cartitemslist wala page ma card.id kartyia ha onclick per ya undefined show kar raha ha console ma with url or ma na clg bi seya ha cart ko is ma id nahi shw to rahi sirf name quantity amout image hi show to raha ha please help i am stuck this point ma suba sa try kr raha ho solve karna ki nahi ho raha help! 3:59:28 this point

[@abhysalian7331]

did you solved?

[@wcdemo]

@@abhysalian7331 yes

[@Mrgamer-wr1bg]

I am also stuck here and can't delete the item did you guys resolved it🥲

[@listenup5364]

i did everything correctly but icon is not showing in category dropdown list at 01:07:23

[@lemonjuice_ee]

have you solved this problem bro?

[@jhonsnow534]

hey im learing react so can i directly watch your videos ?? to learn react and next js

[@tubeguruji]

Yes you can!

[@rishidongre6772]

I love♥♥ the way you explain and teach, thank you so much. I can't wait for part 2 covering the Admin Dashboard content. waiting for a positive response...

[@tubeguruji]

Thank you! Will do!

[@rishidongre6772]

Could you please provide all the images and logo, many learners are not capable of buying the source code. Please think about it.

[@kaushal.mp4]

*I Love Your Videos Sir!❤*

[@tubeguruji]

Thank you

[@sameerverma4416]

Bro now when we write the nextjs command in terminal we get files of layout ,page in .jsx extension but un your videos its in js extension which makes code totally different and unable to run .... Please give a solution for that

[@ayelojaibrahim2610]

Great contents once again thanks very much ❤❤❤ , if i may ask where do you gets this beautiful vector / illustration

[@tubeguruji]

Thanks, U can get it on flaticon.com

[@ayelojaibrahim2610]

@@tubeguruji thanks very much 💕

[@AhmadGangat-j4k]

Image are not showing in category menu

[@alexdelpiero4903]

Hello, I am wishing buy this proyect... I'm looking for a STRAPI + NEXT JS 14 project, specifically the pagination, I don't know if you could do it or where I can find a complete project to buy.

[@Alamgirkhan-jt8ck]

As you written in the caption build an d deploy but you have not deployed it why?

[@tubeguruji]

Watch my any latest video for deployment

[@screwball747]

I want to build for local groceries.So every grocer can set up their own shop front is this possible with this ?

[@zeyadmohamed7117]

when i send productId to cart i found the products field in strapi was null

[@tubeguruji]

Make sure u refer the strapi productId field

[@cdassaha5802]

Hi, you tutorial is very good. I have one query regarding NextJs - Can I use "use client" in any file wherever I need to use any of the hooks (useContext, useState, useEffect, etc.)? Or this is considered as a bad practice?

[@tubeguruji]

No way... Its upto how you want to develop, Bcs all component which u want to add for UI need useClient bcs we use useState or useContext etc, so its not bad practice

[@cdassaha5802]

@@tubeguruji Is it not recommended to have only Client-side code in Next.js for some reason that has multiple dynamic routes like this website?

[@uzochukwuemeka3449]

Thanks for this really help a lot

[@NironeLokumannage]

Does this project include an admin dashboard as well ? Would be much appreciated if anyone could let me know !

[@ahmadgangat1805]

In category menu not showing image only showing name 😔 Please tell me how to fix this error

[@dolapoajayi2156]

Good one.hopefully you make the react native aswell

[@lalaniwerake881]

amazing content. Thank you!

[@tubeguruji]

Welcome!

[@shahrozeaslam102]

Very Nice I would love to see the tutorial of strapi and subscription based model with stripe

[@tubeguruji]

Noted!

[@adityagavali3820]

But sir...in the render while creating database they are saying that the database will expire after a couple of days...??

[@ronnin-c8p]

When is TubeGuruji Hindi going to come. Is there any plans for that?

[@tubeguruji]

Not Sure, But I will try,

[@bikeeyadav3518]

Heyy i have bought a project from you . Can you tell me that from where should i learn how to implement that source code .

[@nithishj7614]

Can you tell the relationships for userCart with users, userCart with Products?

[@tubeguruji]

One user can add multiple products, So for users it will be one to many

[@ramendrasoni3368]

Hyper ui is giving two footer by pasting code on under footer components...?????

[@godeons]

There's an error with signup and login please do a video to fix that

[@tubeguruji]

Wts the error can u tell me?

[@bSoft-IT-Foundation]

Thank you so much for awesome online store

[@tubeguruji]

Any time!

[@prethivirajb8585]

While installing nextjs configuration. My getting postcss.config.mjs . Kindly help

[@soumitrakumarjena4189]

sir i have start working on this project but still cant fix the image process can you plz help siz

[@tubeguruji]

Whats the issue you are facing?

[@soumitrakumarjena4189]

@@tubeguruji The category image which we fetch initially After configuration of .env.local and acess to localhost and that populate also facing the broken image issue

[@S.AdithyaVardhan]

@@soumitrakumarjena4189 same here

[@Sam-dk5id]

Hello, thank you so much for the content!! I have 1 question is that how you get those images? As I found it's very difficult to find such images for my own personal applications.

[@tubeguruji]

Search on google like mango png file and make sure the background is not there

[@team-fanfeet]

How can i download project images

[@SMarGwanS]

Shouldn't the color be changed in the globals instead of changing only in tailwind.config? On the default primary color it was pointing to a global color variable

[@tubeguruji]

If u update in tailwind then its easy to access from tailwindcss class using text-primary or bg-primary like that

[@SMarGwanS]

@@tubeguruji you can still do the same if you update it in global.css and on tailwind config to point to that variable. something like: primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, which also gives better support to light/dark mode too.

[@ahmadgangat1805]

Brother please can you help me I do same code with you but still I can't show image icons in my header category menu Please reply

[@АнгелинаЛемберг]

Images crashed, unoptimized={true} dont helped( What can do?

[@tubeguruji]

Make sure after deployment strapi images are working fine, Make sure change the base_url

[@АнгелинаЛемберг]

​@@tubeguruji Had you a error with strapi admin account? error: stream is not readable InternalServerError: stream is not readable

[@SahilKumar-nh6tq]

It's good for beginners. Can we get some project on enterprise standard?

[@tubeguruji]

Sure, I am happy to listen your idea

[@abhysalian7331]

cannot get product image in cart? pls help

[@nithishj7614]

I'm getting this error in strapi : "Error: Error on attribute users_permissions_users in model user-cart(api::user-cart.user-cart): inversedBy attribute user_carts not found target plugin::users-permissions.user". I can't resolve this error please help.

[@abhysalian7331]

bro have you solved the image issue in cart?

[@nithishj7614]

@@abhysalian7331 I didn't got any error bro. what error did you get?

[@ahmedaq9018]

Thanks a lot for the great video… Please consider creating a short tutorial on implementing live updates (real time) notifications for a very simple social media functionality like (some liked your post). Simple app the aim of which is to show how to implement notifications (not chat app) in Nextjs 14 with the server actions.

[@tubeguruji]

Great suggestion!

[@ahmedaq9018]

thanks a lot for considering that... and as you may be aware, there is literally no tutorial (UPDATED) tutorial on this topic... @@tubeguruji

[@yannsieyadjeu]

Hey, thank you for this excellent content! Just one thing, where did you find your image assets?

[@tubeguruji]

In the description or just search on google or in source code

[@shahhussain5563]

Thank you so much for this. next we need mobile app for this❤

[@tubeguruji]

You're welcome 😊

[@Aditya-jv9gj]

How about deploy it to hosting, please titorial it

[@tubeguruji]

Watch my latest video i which deployment part is covered

[@abdulkhaliqali7729]

unbelievable, very hard work done. very nice project. learned a lot, but stuck on strapi deployment

[@anishbera4677]

sir, mera image icon nehi show kar raha ha bar bar try kar raha hu please help me 😐

[@tubeguruji]

Whats the issue?

[@anishbera4677]

Upload images icons to strapy but local host no changes product icon

[@chigoziepascalumeugokwe6532]

Please can you do this video using firebase. I'll be so much grateful about it. Thank you so much for what you are doing for us.

[@tubeguruji]

Sure, Will do, U can watch my latest video bases on firebase

[@wcdemo]

Is possible to host strapi on onrender and use next app

[@tubeguruji]

Yes

[@wcdemo]

@@tubeguruji how I try but can't deploy onrender and not use onrender link please you make a step by step complete video on this topic 🎉

[@bSoft-IT-Foundation]

please guide me how can I open via github the project

[@tubeguruji]

First clone the repo or download zip file and then install dependancy using npm Install and then ready to go

[@awais_ansarii]

Great content... Please make full stack app using backend+frontend.

[@tubeguruji]

👍

[@maazasif7032]

I have a query that can we make our own database using node.js and express instead of using strapi

[@tubeguruji]

Yes

[@maazasif7032]

​@@tubeguruji strapi is paid 😢

[@abchk_yt4322]

excellent video. if you could show where the value come from the api , like {product.attribute.selling price} etc... would be preferct.

[@tubeguruji]

From Strapi API

[@uzochukwuemeka3449]

Good Day Boss, How do i push this project to netlify with the backend still running or stripe still running

[@tubeguruji]

First Deploy your Strapi on Heroku or render and then deploy app netlify, You can watch deployment chapter in : kzbin.info/www/bejne/aJ2xm35vftx6oqs

[@prasunmridha7628]

Is there any admin panel?

[@jhonsnow534]

i want same img of products.. how to download

[@tubeguruji]

Just search on google as png inage and for categories use flaticon

[@garrixfantasy]

how to find actual url instead of base url? I am unable to find actual url on my mac

[@tubeguruji]

For which API or for local?

[@AhmadGangat-j4k]

Please help me sir I already upload image in srapi but this image category is not showing in my category panel only name show image is damage please help me sir I do same like you but my images not showing please help

[@Sreehari-pp5wb]

Did you find any solution I also have the same problem

[@HanuPrasad-em3my]

which state management used in this project redux or React context

[@tubeguruji]

React Context

[@jajumiese]

Error: getaddrinfo ENOTFOUND is a synthetic error that Node.js fabricates when it doesn't receive a response from the getaddrinfo(3) function. This error is not a real operating system-level error but rather a catch-all for various reasons, including running out of file descriptors in libc, not receiving a response from the DNS server, and so on This shit on connecting strapi to POSTGRESQL

[@tubeguruji]

Please make sure PostgresSql Database config is correct

[@aditya-d-]

How add search functionality

[@realkenokay]

Thanks Can I get the github repo link?

[@tubeguruji]

In the description

[@NayskomMedia]

Thanks for the high-quality videos. Will there be more videos on STRAPI + NEXTJS? I would like to see how to do pagination and output the output functions to the html structure in separate hooks.

[@tubeguruji]

There are already some videos.. but in my upcoming video will add that feature

[@NayskomMedia]

@@tubeguruji thanks!!

[@vivekdurgule5965]

strapi installation issue, can you help me!!! sir

[@ruchikamore8599]

Strapi command mai error aa rha hai module not found