Build a Fullstack E-Commerce App using Next.js 13, MongoDB, Firebase, Strapi, Tailwind CSS [2023]

Рет қаралды 154,770

Күн бұрын

In this tutorial, You will learn how to build a fullstack ecommerce app using Next.js 13, MongoDB, Tailwind CSS, Strapi and firebase.
⭐▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬⭐
(00:00) Introduction
(10:20) Installing all packages and project setup
(16:45) Creating global context
(21:36) Navbar component
(42:10) Implementing common dialog component
(59:00) UI for registration and login page
(1:26:40) Login Page UI
(1:32:23) Mongo DB setup , registration page model, api route and service
(1:53:11) Registraion page api integration with frontend
(2:02:02) login page model, api route and services
(2:14:03) api integration with frontend
(2:32:36) finishing up login page
(2:41:05) Admin view pages and switch between admin and client view
(2:48:28) Add new project page UI
(2:59:31) Backend for add new project page
(3:12:48) Handle Image functionality using firebase
(3:34:17) Add new product frontend and backend integration
(3:43:39) Product common listing page
(3:59:39) Fetching admin products
(4:11:09) Update and delete product API route
(4:22:33) Update and delete product functionality implementation in frontend
(4:43:34) Fetching products in client view
(5:00:05) Product details page
(5:23:00) Product details css issue fix
(5:28:50) Cart functionality and Auth middleware
(5:57:41) Services for Cart page and integrating with UI
(6:14:45) Cart functionality part 3
(6:36:05) Cart functionality part 4
(7:03:00) Account page part 1
(7:31:34) Account page part 2
(7:49:59) Account page part 3
(8:08:15) Checkout page part 1
(8:38:10) Checkout page part 2
(8:53:30) Checkout page part 3
(9:09:19) Checkout page part 4
(9:27:08) Checkout page part 5 and auth logic
(9:42:34) Orders page
(10:00:09) Orders page part 2
(10:33:31) Order processing logic
(11:04:44) Home page UI
Source Code : github.com/sangammukherjee/Ne...
Playlist : • Next.js 13 Ecommerce A...
Subscribe for more! 🔔
/ @sangammukherjee3009
React Native Playlist for beginners :
• React Native Tutorial ...
⭐▬▬▬▬▬▬ BUY ME A COFFEE :) 👋 ▬▬▬▬▬▬⭐
www.buymeacoffee.com/sangammukh6
⭐▬▬▬▬▬▬ CONNECT WITH ME 👋 ▬▬▬▬▬▬⭐
Linkedin : / sangam-mukherjee-40048...
Instagram: / sangam_mukherjee

Пікірлер: 148

@bhargav9302 9 ай бұрын

I think your channel is the best and most underrated. I learned a lot of new concepts from your video, but I had to pause and rewind a few times to understand some of the concepts. Thank you for creating such a helpful video, especially for beginners like me. I have subscribed to your channel and I look forward to watching more of your videos.

@sangammukherjee3009 8 ай бұрын

Thank you :)

@innocentonyemaenu6353 7 ай бұрын

@@sangammukherjee3009 Great job, but you mentioned strapi in the title of the project, but you never used it. Any reasons?

@obloo 7 ай бұрын

Wow very good work! I watched many tuts on emmorce but that one seems to be the best yet. I will def watch it till the end! Thanks man!

@Amar11115 9 ай бұрын

Man! Just discovered your channel. It has lot of amazing stuff!!

@user-fj5xt7jp7x 9 ай бұрын

Eagerly wanting a PostgreSQL tutorial. It will be even better if you implement this project with PostgreSQL. Thank you. Loving your videos :)

@mahbubmorshed9527 8 ай бұрын

Thank you, you give us a great tutorial !

@jatinranjan7954 9 ай бұрын

Wow, that is just mind-blowing, yet these kinds of projects are typically not free. Arigato-gazaimazu

@techreleasenow1766 8 ай бұрын

Good work, learnt alot

@niteshprajapat7918 9 ай бұрын

Amazing content🔥🔥

@RapLyricalVideos 9 ай бұрын

Awesome video bro :❤

@aliberspilberg1 8 ай бұрын

Que programador tan genial!

@surendrawagle8341 9 ай бұрын

Nice Tutorial.

@ShortClips.._.. Ай бұрын

Nice website running successfully

@mahendranath2504 7 ай бұрын

Nice thank you amazing content, Subscribed and liked 👏👏👌👌🙌🙌✌✌👍👍

@Red-wn2lo 9 ай бұрын

nice video 👍👍👍👍

@Deus-lo-Vuilt 9 ай бұрын

Wow Nice

@linknatsu5426 7 ай бұрын

What a great video to start fully programming web pages, but I would also like a tutorial on how to recover user accounts because that would be very rewarding to learn.

@fallanstar 9 ай бұрын

Good Project that i have never ever seen

@Biharibabu1997 9 ай бұрын

Good work bro

@manqobamlangeni2860 8 ай бұрын

Already flattered

@SaifKhan-pr2kz 8 ай бұрын

Well Explained Sangam.If possible try to explain the concept also that will make you different from others.

@mdraisulislamrimon9808 8 ай бұрын

nice project

@lazycatz25 9 ай бұрын

good sir

@kaisnguyen4086 7 ай бұрын

hello thanks for video. I hope you do make the functions a little deeper such as refresh token interceptor, reset password, verify otp, infinity scroll when have many product or pagination, chatbot ...

@diptamoymitra7486 9 ай бұрын

Great dada❤❤❤ Need a tutorial React with Appwrite ❤️

@copycoder6125 9 ай бұрын

Great content bro :)

@nandopookey9195 8 ай бұрын

omg, this is free ? Thank you so much sir

@niteshsingh2265 8 ай бұрын

your video is awesome but plz add cancel order and return order functionality.

@ChaimaChaima-bb3zb Ай бұрын

everything is looking good but i think you sould add the search in the navbar

@keetshop 2 ай бұрын

I'm form Pakistan and I think you are the best.

@15_kumargogula59 6 ай бұрын

very goood project and explanation too... tell how deploye this project in vercel

@imranmollah2128 2 ай бұрын

where is deployment part ?

@user-ot9eb3vc2u 8 ай бұрын

Did you do any state management of the data in this tutorial? Did you use anything like redux or redux or recoil?

@yafisraza1210 4 ай бұрын

Thank u so much for this amazing project 🖤

@nehalpradhan2229 3 ай бұрын

did you finish the project?? got any errors??

@yafisraza1210 4 күн бұрын

Yes I have finished it without any error...

@yafisraza1210 4 күн бұрын

I submitted it as my Final year project...

@Nischaltamang2023 6 ай бұрын

At first you are registering as admin but there is no any other validation to check. In fact any user can register him or herself as admin and can get access of admin portal.

@milkywaymontage3263 9 ай бұрын

Great project but sir can you please make it multi vendor

@ultrAbdu 7 ай бұрын

Hi bro i will watch this video completely this week. I am beginner, i am struggling a bit to learn full stack, how can i start with that, i have the basic knowledge of html /css / js for frontend, but backend i do not know anything, i do not understand how to set up a own server for example and the things to deploy my own project on my own domain, what do you recommend me

@raabisliman 4 ай бұрын

Thanks for making the video in english for worldwide 😅

@cwgabel 9 ай бұрын

I am on a Mac with Appearance in Settings set to Dark. This makes things wonky on this tutorial so maybe set it back to light or auto to make things run smoothly. I think there is a conflict between the :root values in globals.css. I noticed that removing bg-white from the tag also fixes my original problem with dark mode on, but I am just getting into the video so I don't know if this is the correct solution.

@sangammukherjee3009 9 ай бұрын

need to test in mac once, let me check and reply here. Thanks for this info :)

@cwgabel 8 ай бұрын

I think for a dark mode approach that works for both tailwind in nextjs with/without system dark mode, I liked Hamed's video at kzfaq.info/get/bejne/iLpxfZCW08zZnac.html

@ruizxzx 9 ай бұрын

finally its done

@dimplesdance8502 2 ай бұрын

Did he use redux-toolkit for state management

@user-pw6om2lo6p 9 ай бұрын

good luck

@awais_ansarii Ай бұрын

❤

@saikrishnamuntha62 8 ай бұрын

bro here u not mentioned the protected routes??? you had done on nextjs I need the backend like python or any that should be show how to protect

@BeyondtheBeat16 2 ай бұрын

Heyy can you please upload a video how to deploy this website because I’m getting fetch error when I try to deploy on vercel please rely me and let me know

@eseandy5484 4 ай бұрын

is there a tutorial to connect this exercise with the admin panel?

@HiroNakamura1991 6 ай бұрын

thank God you speak english ! or Thank Crishna

@jarnoojasaar 5 ай бұрын

Great video, but why not use prettier instead of manually formating all the time? could save a lot of time :)

@snapshort2024 9 ай бұрын

How i can just send a customer information to the email because i dident need the cridit card Please tell me ❤

@emjiichinose3920 4 ай бұрын

On the API with front-end integration part, an error occured saying that setComponentLevelLoader is not a function. How can I write the function on setcomponentlevelloader or how can I import it? i checked the src but there is no specific logic inside the setcomponentlevel loader

@SwaggerLadka 6 ай бұрын

Bro I am in b tech 3rd year I want to learn from you I want to become full stack can you please teach me please...or you can please continue a series

@libcanbe2474 8 ай бұрын

I have any issue with the product by id section… it returns undefined

@JusTheWebDevNJIT 9 ай бұрын

Great tutorial, one question is there a reason why you are using router instead of next-link?

@sangammukherjee3009 9 ай бұрын

you can use next link also :)

@paul4137 7 ай бұрын

Anyone else had a problem with displaying products added to cart ? 6:22:02 It was working on localhost but not after deployment. I guess it's about giving a proper absolute url in services/cart in for all-cart-items route. Can't figure out how it should look like though..

@focusedpatterns1650 7 ай бұрын

Yea, I have the same problem. After deploying to vercel it doesn't work for me. Did You solve it ?

@paul4137 7 ай бұрын

@@focusedpatterns1650 Not really.. I hope someday there's made a seperate video on deploying it to vercel.

@piyushtale0001 7 ай бұрын

Guys you have to put the deployed vercel link to the route, I have started this video , will describe more when completed

@sangammukherjee3009 7 ай бұрын

hey guys, do this. create a env file in project and add URL env , while deploying in vercel you need to add those env file details. It will work. Let me know if this works or not, I will create a video on this, but not getting any time.

@nanajusolihun8848 6 ай бұрын

@@sangammukherjee3009 i have some problem. i have added the url env, but it still works. i hope tutorial for this problem

@anmolkumar09 7 ай бұрын

bro i got an error whenyou psuh your first registration (2:00) SyntaxError: Unexpected token '

@manojbasnet8113 6 ай бұрын

if a customer buy anything then how to show there is decrese in product in DB

@usmanmarkaz 9 ай бұрын

Any plain for React Native Plz start React native with Rest API project with Node js

@guy-was-taken 6 ай бұрын

is it working now ? can i start of version dependencies causing issue?

@ApurvaKashyap-kj6qz 9 ай бұрын

i request u to please include typescript in ur upcoming next js tutorial video

@sangammukherjee3009 9 ай бұрын

sure :)

@thephalcon 8 ай бұрын

@@sangammukherjee3009 plz don't add typescript

@rahulkatare802 8 ай бұрын

@@sangammukherjee3009add

@user-lq7jt1ur7x 9 ай бұрын

Why didn't you use Multer and formidable library for images upload sir?

@sangammukherjee3009 9 ай бұрын

will use in next videos. Noted. Thanks :)

@pankaj2129 9 ай бұрын

Good one! But why Admin would add product and buy the same product? Didn't understand.

@sangammukherjee3009 9 ай бұрын

Hi, this is just a demo project. I got your point. This project will give a great indepth idea how to use next js 13 version, based on your idea you can change the functionality that you like :)

@puneetsharma4458 8 ай бұрын

please explain this project in hindi lanauge and please upload the tutorials in hindi lanaguge from basic to advance in Next.js 13, MongoDB, Firebase, Strapi, Tailwind CSS these course.. i have no knowledge in it.. i want create the ecommerce website just like a amaozn..

@aditya-d- 3 ай бұрын

bhai redux toolkit use karna tha

@Coder856 Ай бұрын

How to get this project pics

@johndeer8405 8 ай бұрын

Greetings and thanks for the content. Can you show us how to add verification emails and reset password please? Thanks again.

@sangammukherjee3009 6 ай бұрын

sure. thanks :)

@jatinadhikari8687 3 ай бұрын

Is this responsive too ??

@aasang5919 9 ай бұрын

I would like to ask you somethings when I call api in server component it call like localhost:port something like that in local server, the issue is that i would like make hosting in vercel, I don't know to set that localhost:port api calling value. Can you guide me about it?

@sangammukherjee3009 9 ай бұрын

Hi, i am not getting time. I will definitely create a separate video for this. Thanks.

@fallanstar 9 ай бұрын

Plz now turn to React native with Full Stack Application using Node js and firebase

@user-lq7jt1ur7x 9 ай бұрын

Question 1=> Actually one point pe thoda doubt hai brother, ham sare next js ke sare api route me "await connectToDB()" kyu call kar rhe h because jab ham MERN stack ka project create karte h then only one time database ko connect karte h main index.js page me using Mongodb and Expressjs then problem kya h? Question 2=> export const dynamic = "force-dynamic"; why we using this line of code in our next js project?

@PayloadPulse 9 ай бұрын

because in this we cannot use expressjs for a path we send repsopne to server directly from website we don have any bridge. thats why we call connecttodb evreytime in every function. i you dont do this then mongodb do not connect with function.

@user-lq7jt1ur7x 9 ай бұрын

@@PayloadPulse thnaks brother 🙂

@user-lq7jt1ur7x 9 ай бұрын

@@PayloadPulse export const dynamic = "force-dynamic"; why we using this line of code in our next js project? ae kyu use hua h apko pta h?

@sidharthdang1647 5 ай бұрын

Can u help me deploying it

@stoic.mayank 7 ай бұрын

How to add Forgot password feature in the login/signup page

@sufiyanbagwan5672 6 ай бұрын

can i learn web development with project in 6 month after 12hrs daily study

@sonofhall 5 ай бұрын

Hello this source is free to use?

@izzafiramdhani4486 8 ай бұрын

wait isn't that dangerous to put role options in sign up page cus everyone can sign up as admin?

@sangammukherjee3009 8 ай бұрын

already answered this in other comments, you are 100% correct but this is just a demo project. This project will give a prospective how to use next js 13 version, based on your idea you can change and implement the functionality that you like. You will be able to create a single admin user very easily. I hope i answered your point

@ashimbhowmikamit7596 9 ай бұрын

How can i deploy this project in Vercel ? Please make a video for this

@sangammukherjee3009 9 ай бұрын

Ok I will definitely do this.

@sebastianpardo4002 6 ай бұрын

this page is responsive ?

@user-zi1pu6up1n 6 ай бұрын

Make a video to how to deploy this project

@user-zi1pu6up1n 6 ай бұрын

Please bro

@gouravameta8347 6 ай бұрын

is this project responsive?

@kiranmalviya7152 4 ай бұрын

Actually i had a error in DB could not connect to any servers in your mongodb atlas clusters

@dimplesdance8502 2 ай бұрын

Did he use redux-toolkit for state management

@ManojKumar-oh1ib 7 ай бұрын

6.15

@shubhamkumarmandal2132 9 ай бұрын

Can you add payment integration to the site ?

@sangammukherjee3009 9 ай бұрын

its already there using strapi, what else you are referring ?

@axelraboit5556 7 ай бұрын

Stripe*

@Unsolved-Questions 8 ай бұрын

npm run dev command is not working it shows an error i checked package.json file there is not any dev

@sangammukherjee3009 8 ай бұрын

Please check , did you properly installed next js project or not.

@Unsolved-Questions 8 ай бұрын

@@sangammukherjee3009 I was trying to run the code from the wrong directory (not ecommerce). But I figured it out! Thanks for your response!

@pablosoler7661 7 ай бұрын

HELP PLEASE REMOVE THIS ERROR........... Error: Cannot access GlobalContext._context on the server. You cannot dot into a client module from a server component. You can only pass the imported name through...!!!!

@godl_disaster611 8 ай бұрын

Unable to install all packages, gives error npm registry not present

@sangammukherjee3009 8 ай бұрын

try this : npm config set registry registry.npmjs.org

@B.A_King94 3 ай бұрын

how I deploy this project on vercel

@dimplesdance8502 2 ай бұрын

Did he use redux-toolkit for state management

@bhojpuriyadesiboys1639 9 ай бұрын

Search option is not available

@sangammukherjee3009 9 ай бұрын

will add later if possible , thanks :)

@Skm-mq1sw 9 ай бұрын

How to deploy this project on free platform

@sangammukherjee3009 9 ай бұрын

will create a separate video for this, thanks :)

@laibabintatahir6245 8 ай бұрын

Versal

@Red-wn2lo 9 ай бұрын

if i build this web project can i get a job as a fresher please replay

@sangammukherjee3009 9 ай бұрын

yes definitely :)

@Red-wn2lo 9 ай бұрын

4 high severity vulnerabilities@@sangammukherjee3009 during firebase installation how can i fix it

@user-gb7rc3fz2b 8 ай бұрын

brocan you fix issue we are facing many issue please fix it please!!!

@sangammukherjee3009 8 ай бұрын

Please mention the issues or create issues under githun repo

@debmalyaray1997 8 ай бұрын

how to learn html css and javascript tell me first???

@shubhamkumarmandal2132 9 ай бұрын

Is it responsive

@sangammukherjee3009 9 ай бұрын

yes. But i haven't give lot of attention in CSS part. As there are lot of functionalities.

@phisit8813 6 ай бұрын

Can you make video on how to push these code on platform like AWS ?! Its hard to find a video showing how to build codes, push GIT, connect domains and hosting at the same time. Espcially hosting dyamic website.

@yushatahlil9426 7 ай бұрын

Bro, the logic of your application is incorrect, how can you allow the user to choose their role ??

@AryanKumar-it7gn 9 ай бұрын

can you make that website single admin user

@hasanulhaquebanna 9 ай бұрын

As my opinion, for large and scalable product please don't come with nextjs as a backend instead make separate backend. Thanks

@sangammukherjee3009 9 ай бұрын

Hi , you are correct, will create projects with separate backend

@billgates2.022 7 ай бұрын

@@sangammukherjee3009 make video on this topic why we should not use nextjs as backend?

@CoIdestMoments 9 ай бұрын

the problem is the site is very ugly, the javascript logic behind and working with database and stuff is nice, but clients want pretty products with nice UI first, and the reason we use React (and next) is to make beautiful and user friendly UI, not something straight of Windows XP visually

@cwgabel 9 ай бұрын

I wouldn't call it ugly, although it could use some work, but this is a tutorial that is covering a lot of ground. And besides, the beauty of TailwindCSS is all the HTML tags are just waiting for you to style them with Tailwind classes!😀

@sangammukherjee3009 9 ай бұрын

Hi , I got your point, I will say that it is difficult to cover proper styling with lot of functionalities within a given timeframe, still you can see the video length is almost 12 hours because there is lot of things we are doing still we can add quite a few more features. But if you want you can definitely add more styling as per your preference.

@jannickpedersen546 8 ай бұрын

U sound lazy. The design is up to you, however do you expect cutting edge design as well ? How much do you want for free lol, greedy

@laxmiprasanna4092 8 ай бұрын

No it is allright. no one comes to this tutorial to learn css, so minimal design is best for this purpose

@ahsanulkabir8640 8 ай бұрын

UI/UX designers are there to make the site appealing. I believe this tutorial is for developers - not for UI/UX designers. on that perspective, its a wonderful tutorial.