Desi Stack
Desi Stack
  • 9
  • 31 402
Build a Full-Stack E-Commerce Website with TypeScript, Next.js, React, Redux & Node | Part 1
📌🔥 Welcome to the Ultimate Guide to Building a Full-Stack E-Commerce Website! 🌐
This is Part 1 of a comprehensive series where we’ll create a professional, feature-rich, and responsive e-commerce platform. From designing the frontend to crafting powerful backend APIs, this series has everything you need to build your dream project. 🚀
🌟 What We’re Building in Part 1:
🔹 Frontend Features:
1️⃣ Home Screen Design: Fully responsive layout to ensure a seamless experience across all devices.
2️⃣ Book Listings: Display books with advanced filters and pagination for user-friendly navigation.
3️⃣ Redux Toolkit: Integrate RTK Query for optimized state management and data fetching.
4️⃣ Single Book Page: A detailed page for viewing book information.
5️⃣ Login Page: A user authentication interface with a clean and modern UI.
🔹 Backend Features:
1️⃣ User Authentication API: Secure login with JWT tokens and email verification powered by Gmail.
2️⃣ Product API: Robust endpoints for fetching, filtering, and paginating product data.
3️⃣ Cart API: Manage user shopping carts with server-side logic.
4️⃣ Wishlist API: Allow users to save their favorite items.
5️⃣ Token Management: Secure session handling for authenticated requests.
💻 Technologies Used:
✅ Frontend:
Next.js for fast and SEO-friendly rendering.
React.js for dynamic user interfaces.
TypeScript for robust and type-safe development.
✅ Backend:
Node.js and Express.js for scalable API development.
MongoDB for a flexible, document-based database solution.
✅ State Management:
Redux Toolkit with RTK Query for effortless global state management.
✅ Email Services:
Gmail API for email verification and notifications.
📂 GitHub Starter Repo & Predefined Data Starter Code
👉 GitHub Starter Repository Link: [github.com/agraharidheeraj/book-kart-data.git]
📌Live Link of BookKart: [book-cart-frontend.vercel.app]
📌 What’s Coming in Upcoming Videos:
In the next parts, we’ll add exciting features, including:
✨ Cart, Wishlist, and Order UI Integration
✨ Secure Payment Gateway with Razorpay, including Webhooks for confirmation.
✨ Address Management APIs for creating and updating shipping addresses.
✨ Google Login Integration using Passport.js and Google OAuth.
✨ Order Tracking Pages with real-time updates.
Advanced APIs:
Book Details API for fetching detailed book info.
Product Creation API with validation.
Razorpay integration for secure transactions.
Frontend Enhancements:
Add to Cart & Wishlist functionality.
Order Management UI.
🌍 Check Out My Previous Projects:
1️⃣ Build a Google Meet Clone with Next Js [th-cam.com/video/WrMfpTAo9iM/w-d-xo.html]
2️⃣ Facebook Clone with Full Responsiveness [th-cam.com/play/PLtISwIU3cBkLxJ61gg6hBblsI8yb8Ux48.html]
🔍 Why Watch This Series?
🌟 Learn Advanced Full-Stack Development: From scratch to deployment.
🌟 Master Modern Technologies: Next.js, Node.js, Redux Toolkit, MongoDB, Razorpay, and more.
🌟 Follow Best Practices: Clean code, scalability, and real-world implementation.
00:00 - Introduction
18:00 - Project Showcase Overview
18:00 - Setting up Next.js & shadcn/ui
27:40 - Explaining Next.js Metadata
30:42 - Redux Toolkit (RTK) Setup
01:06:56 - Building Responsive Header for Mobile and Desktop
02:06:10 - Designing Home Page with Feature Section
03:32:13 - Footer Section UI
03:57:00 - Book Listing Page with Filter Functionality
05:06:44 - Adding Pagination Logic
05:17:58 - No Data Component Design
05:29:00 - Creating Single Book Page UI
06:22:47 - Designing Auth Pages (Login/Signup)
07:14:10 - Backend Setup with Node.js
07:24:57 - MongoDB Database Connection Setup
07:31:00 - Defining User Schema in MongoDB
07:48:03 - Creating Address Schema/Table
07:52:55 - Writing Register API
08:02:31 - Setting Up Nodemailer for Email Verification
08:23:00 - Configuring POST Route for Registration API
08:30:38 - Implementing Verify Email API
08:33:09 - Generating JWT Tokens for Secure Auth
08:37:40 - Login, Forgot Password, and Logout APIs
08:56:00 - Adding Auth Middleware
09:02:50 - Writing Verify Auth API
09:08:32 - Product Schema Creation
09:19:58 - Writing Product APIs & Cloudinary Integration
10:11:00 - Implementing Cart APIs
10:36:00 - Adding Wishlist APIs
10:49:00 - Wrapping Up with Thanks & Next Steps
🔔 Don’t Miss Out!
Subscribe and turn on notifications to stay updated on new videos in this series. Be part of our journey to mastering full-stack development. 🚀
📌 Tags:
#ECommerceWebsite #FullStackDevelopment #TypeScript #NextJS #ReactJS #ReduxToolkit #NodeJS #MongoDB #ResponsiveDesign #APIIntegration #PaymentGateway #Razorpay #LearnToCode #ProgrammingTutorials #WebDevelopment #JavaScriptProjects #CodingForBeginners
✨ Let’s build something amazing together! Got questions? Drop a comment below, and I’ll be happy to help. 👇
👍 Like, Share, and Subscribe for more advanced coding tutorials and projects!
Let me know if you need further enhancements or tweaks! 😊
มุมมอง: 1 893

วีดีโอ

Build a Google Meet Clone with Next.js 14, NextAuth, and ZEGOCLOUD | Full Stack Tutorial
มุมมอง 2.2K2 หลายเดือนก่อน
🔴 Welcome to the Ultimate Google Meet Clone Tutorial! 🔴 Get 10000 free minutes with ZEGOCLOUD UIKits: [bit.ly/4avoHfm] video call SDK with customized code: [bit.ly/43BCQ8E] Explore ZEGOCLOUD: [www.zegocloud.com] How to build video call App docs: [bit.ly/49lf1TI] Live link of google meet clone :[google-meet-dusiky.vercel.app] In this comprehensive tutorial, we’re building a fully functional Goog...
How to Deploy MERN Stack App | Complete Guide with Render, Vercel | Deploy Website In 10 Minutes
มุมมอง 2.7K3 หลายเดือนก่อน
🔥 Welcome to the ultimate deployment guide for your MERN Stack Facebook Clone! Whether you're just starting out or looking to advance your deployment skills, this step-by-step tutorial covers everything you need to know to get your project live using Render for the backend and Vercel for the frontend. We'll also manage our code with GitHub, making it super easy to push changes and keep everythi...
🚀 Build a Full-Stack Facebook Clone with MERN Stack! Master Node.js, Express, MongoDB (Part -2)💥💻
มุมมอง 4.1K3 หลายเดือนก่อน
🔥 Welcome to Part 2 of the Full-Stack Facebook Clone series! In this 10 hour mega-tutorial, we dive deep into the backend development using Node.js, Express, and MongoDB. This is where the magic happens, and you’ll learn how to bring the backend to life, handling everything from user authentication to post creation and real-time data! In this tutorial, you’ll: Setup the backend using Node.js an...
🔥 Build a Full-Stack Facebook Clone | MERN Stack (React Js,Next.js, Node.js, Zustand, MongoDB )
มุมมอง 12K3 หลายเดือนก่อน
🎬 Welcome to Part 1 of the Full-Stack Facebook Clone project! In this tutorial, we’ll be building a MERN stack application using Next.js on the frontend and preparing for our backend with Node.js and MongoDB. Whether you're a beginner or an experienced developer, this project will help you level up your full-stack development skills! 💪 📌 What you'll learn in this video: ⚡ Setting up the foundat...
🔐 Node.js + React.js Tutorial Part 2: Google Login & To-Do App Full-Stack Course 2024🚀
มุมมอง 6804 หลายเดือนก่อน
Welcome to Part 2 of our Node.js series! In this tutorial, we’ll extend our previous work by integrating Google Login for user authentication and building a feature-rich To-Do app. If you followed along in Part 1, where we covered email/password authentication with OTP and Redux for state management, you're ready to take the next step. 👉 Watch Part 1 here:th-cam.com/video/eVOpEhy4lG4/w-d-xo.htm...
🚀 Advanced Node.js & React: Full Authentication Flow, Redux || Fullstack Course 2024
มุมมอง 2.2K5 หลายเดือนก่อน
Welcome back to Desi Stack! In this new video, we're diving into advanced authentication techniques and state management using Node.js and React. 🌟 📚 What You'll Learn: Implementing Email Authentication and Email Verification 📧✅ Handling Forgot Password and Reset Password functionality 🔑 Setting up Token-Based Authentication 🔐 Creating Protected Routes to secure your application 🚧 Mastering Red...
🚀 Complete & Deploy YouTube Clone! Part -2| React.js, Tailwind CSS, Voice Search & YouTube V3 API 🌐
มุมมอง 3K5 หลายเดือนก่อน
Description: Welcome back to Desi Stack! In this second part of our TH-cam Clone series, we'll complete the project and deploy it to the web. 🌟 📚 What You'll Learn: Finalizing the TH-cam clone with advanced features Testing and debugging the application Deploying the project using popular hosting services 🔗 Part 1: Building the TH-cam Clone Watch Part 1 Here -[th-cam.com/video/7TvLVeBDK0o/w-d-x...
🚀 Build & Deploy a YouTube Clone with Voice Search | React.js, Tailwind CSS, YouTube API 🎉 - Part-1
มุมมอง 3.3K5 หลายเดือนก่อน
Welcome to Desi Stack! In this tutorial, we'll walk you through creating a fully responsive TH-cam clone with voice search functionality. 🌟 📚 What You'll Learn: Building a responsive UI with React.js and Tailwind CSS Managing state with Context API Integrating the TH-cam V3 API to fetch video data Implementing voice search for an enhanced user experience 🎤 🔗 Resources: Images and Constant file ...

ความคิดเห็น

  • @satyamkumar9095
    @satyamkumar9095 23 ชั่วโมงที่ผ่านมา

    bhai admin panel ni hai kya isme

  • @sptech100
    @sptech100 วันที่ผ่านมา

    ek esa project jisme microservice ho Sql and NoSql both table aapas me communicate kar rahe ho radis jesi technology and message broker ka use kiya hua ho ek esa project karva do bro. Is video me bhi bahut kuch sikh ne ko mila thank you. ❤

  • @khankaka7632
    @khankaka7632 วันที่ผ่านมา

    cant register user or login. I waste ton of time in your stupid video. why I forget indians suit for eating pop of cow not for coding tutorials

  • @memesforyou9167
    @memesforyou9167 วันที่ผ่านมา

    Bhai code toh dedo project ka

    • @DesiStack7
      @DesiStack7 วันที่ผ่านมา

      Wait for second part tab tak ye complete kro bhai mil jayega

  • @satishchandra8955
    @satishchandra8955 วันที่ผ่านมา

    Can you provide Full source code for that project?

    • @DesiStack7
      @DesiStack7 วันที่ผ่านมา

      Wait for second part tab yak ise samjho aur complete kro bahut help milega

  • @HarshRaj-kp7gk
    @HarshRaj-kp7gk 2 วันที่ผ่านมา

    Sir please code also 😊

  • @keshavgarg6096
    @keshavgarg6096 2 วันที่ผ่านมา

    when will part 2 come ??

  • @niteshprajapat7918
    @niteshprajapat7918 2 วันที่ผ่านมา

    Nice project 🎉🎉

  • @pavanyadav3092
    @pavanyadav3092 2 วันที่ผ่านมา

    Add more functionality like how many quantity for a particular books is available , add sections for reviews as well and blog sections can also be added for about any particular sellers so that before buying the book anyone can see that.what your opinion reply please.

  • @kirankulkarni-coder
    @kirankulkarni-coder 2 วันที่ผ่านมา

    Nice 👌

  • @Shantanav-31
    @Shantanav-31 3 วันที่ผ่านมา

    Hum is ladke ko jante hain 😂...ye mirzapur ka hai

    • @DesiStack7
      @DesiStack7 2 วันที่ผ่านมา

      Ooo nice but mujhe nhi pta 😂😂

  • @iamjkgaming2381
    @iamjkgaming2381 3 วันที่ผ่านมา

    👍...

  • @shahfahadzafar
    @shahfahadzafar 3 วันที่ผ่านมา

    Please Sir make a full stack responsive multi store E-commerce Next js project with Typescript

  • @wonderscraft
    @wonderscraft 3 วันที่ผ่านมา

    best project

  • @rakeshkumarparida98
    @rakeshkumarparida98 3 วันที่ผ่านมา

    The project is really good and has many impressive functionalities. Is this beginner friendly ?

    • @DesiStack7
      @DesiStack7 3 วันที่ผ่านมา

      Yes bro 👊

  • @sumanthprabhu11
    @sumanthprabhu11 3 วันที่ผ่านมา

    Is Razorpay easy to configure. I heard it needs kyc and live site?

    • @DesiStack7
      @DesiStack7 3 วันที่ผ่านมา

      Yes it need kyc but it’s a simple step if you have Aadhar and bank account

    • @puruverma2716
      @puruverma2716 3 วันที่ผ่านมา

      Bhaiya razory m webhook bhi cover krna

  • @kidsgames4you
    @kidsgames4you 9 วันที่ผ่านมา

    You can deploy both backend and frontend on Vercel, no need to deploy it separately on 2 different platforms.

  • @nehikabru
    @nehikabru 13 วันที่ผ่านมา

    Sir pdf books website with Admin page ke sath cost Kitana hoga ?

    • @DesiStack7
      @DesiStack7 13 วันที่ผ่านมา

      Msg me in Instagram for this

  • @KrrishSarkar-et9fi
    @KrrishSarkar-et9fi 16 วันที่ผ่านมา

    Sir, after a day, I am unable to access localhost:3000 anywhere on my phone and laptop. I have tried many times to access localhost:3000 after watching TH-cam. Please give me a solution.😭😭😭

  • @abdulmomin2243
    @abdulmomin2243 23 วันที่ผ่านมา

    Sir apko project bohot asse

  • @NiteshKumar-eo2qc
    @NiteshKumar-eo2qc 27 วันที่ผ่านมา

    Backend successfully ho gaya but frontend me "react-scripts not found" dikha rha hai. Please help me

    • @DesiStack7
      @DesiStack7 26 วันที่ผ่านมา

      Sure

  • @Artificialintelligence-bl8hd
    @Artificialintelligence-bl8hd 28 วันที่ผ่านมา

    Thank you❤❤

  • @awais_ansarii
    @awais_ansarii 29 วันที่ผ่านมา

  • @CoolBoy-s9v
    @CoolBoy-s9v หลายเดือนก่อน

    bhai deploy krny pr add credit card ka option aa rha ha

  • @rajatgodbole6938
    @rajatgodbole6938 หลายเดือนก่อน

    Thank you🎉

  • @16toaz
    @16toaz หลายเดือนก่อน

    error very much

  • @surajgupta3571
    @surajgupta3571 หลายเดือนก่อน

    bro website work nhi kr raha h meeting room mai enter nhi ho pa raha hu mai error bta raha hai and ek question hai kitne log aa skte hai at a one time in meeting?

    • @DesiStack7
      @DesiStack7 หลายเดือนก่อน

      There is option group call and one to one call so you need to provide option

    • @surajgupta3571
      @surajgupta3571 28 วันที่ผ่านมา

      Okk but how many people comes in one meeting at s time

  • @basavrajbirajdar31
    @basavrajbirajdar31 หลายเดือนก่อน

    In this message feature is working or not

  • @subhamchakraborty3139
    @subhamchakraborty3139 หลายเดือนก่อน

    Thank you❤❤

  • @vuongsytuan4691
    @vuongsytuan4691 หลายเดือนก่อน

    pls use typescript

    • @DesiStack7
      @DesiStack7 หลายเดือนก่อน

      Nest project coming soon using type

  • @arvindsinghdeora163
    @arvindsinghdeora163 หลายเดือนก่อน

    Bhai m sath sath code kar raha hu . But 52.30 sec m Jo Icon from luicid React wala nhi bata raha hai mere m

  • @shortcreator_07
    @shortcreator_07 หลายเดือนก่อน

    The requested URL /auth/google was not found on this server

    • @DesiStack7
      @DesiStack7 หลายเดือนก่อน

      Please check server code and your route

  • @everythingselect6625
    @everythingselect6625 2 หลายเดือนก่อน

    When Post is liked liked from user profile posts tab, like button doesn't work. But like button works fine when used for posts in homepage. PLS HELP! Also, Mutual Friends tab isn't displaying any friends, even though mutual friends are saved on mongodb! I have to submit it on tuesday! Pls Help!

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Please pass id or watch again may be you miss something

  • @Vinaysingh-ef4bq
    @Vinaysingh-ef4bq 2 หลายเดือนก่อน

    Thank You soo muchhh Finally Project Live hogya after 3 months 😅😅

  • @everythingselect6625
    @everythingselect6625 2 หลายเดือนก่อน

    Bhai mere project me hydration error dikha rha hai, pls help me! Google, chatgpt, sb try kr liya, kahi se solve nhi ho rha! Pls yaaar submission date bohot paas hai 😰

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Go in layout.js and in body do hydration you will find the method

  • @AmafhhInfotech-e3u
    @AmafhhInfotech-e3u 2 หลายเดือนก่อน

    please add new feature like meeting scheduling

  • @ajayupadhyay-x4m
    @ajayupadhyay-x4m 2 หลายเดือนก่อน

    aap etne bade project ke baarein mein sochte kaise ho ki kya schema hoga kaise api work karenge , frontend mein kaise kya rakhe aur na rakhe, mere se nhi hota mein soch hi nhi pata ki kaise backend likhoo aur kaise frontend

  • @harshitgarg7106
    @harshitgarg7106 2 หลายเดือนก่อน

    Bhaiya please make a vedio for deploy from the beginning with different project

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Sure

  • @rajangupta1554
    @rajangupta1554 2 หลายเดือนก่อน

    Sir also make full e commerce stack project with admin pannel using redux toolkit

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      I am working on it

  • @AminulIslam-uu8ur
    @AminulIslam-uu8ur 2 หลายเดือนก่อน

    Thank you so much

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Welcome

  • @techsubhamkumar
    @techsubhamkumar 2 หลายเดือนก่อน

    Bhaiya mlm software bnana hai kya aap bna sakte hai

  • @MuhammadAshraf-hz4sw
    @MuhammadAshraf-hz4sw 2 หลายเดือนก่อน

    I took15 days annual leaves from my office to learn this project. Now after a week I completed understanding front end Alhamdu lillah. Now preparing for the back end. I am really happy . Thank you Desi Stack...from Pakistan!

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Thankyou so much bhai

    • @everythingselect6625
      @everythingselect6625 2 หลายเดือนก่อน

      @@DesiStack7 Does it also include messaging feature or Was it just a dummy button?

    • @everythingselect6625
      @everythingselect6625 2 หลายเดือนก่อน

      @@DesiStack7 ​ PLS REPLY!!! PLS HELP AS MY PROJECT'S SUBMISSION DATE IS REAL CLOSE!!! I have completed the project till right side bar front end. But I am constantly getting hydration error whenever I view the project on web browser. I did tried to resolve it using chatgpt. But no solution worked. Even tried to look up the official documentation, but couldn't resolve it.

  • @Abdul_rafey
    @Abdul_rafey 2 หลายเดือนก่อน

    After working on it for 10 days, I finally completed this project😁, and it's an amazing one for a beginner like me. The instructor explained everything exceptionally well😄, and I’m truly grateful to him for all his efforts in creating such valuable content and offering it for free♥. Now, I'll be moving on to start Part Two🤩, and I want to express my sincere thanks and appreciation to him for his hard work and dedication😊.

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Thankyou so much for this support in future we will come with amazing projects

    • @everythingselect6625
      @everythingselect6625 2 หลายเดือนก่อน

      ​@@DesiStack7 PLS REPLY!!! PLS HELP AS MY PROJECT'S SUBMISSION DATE IS REAL CLOSE!!! I have completed the project till right side bar front end. But I am constantly getting hydration error whenever I view the project on web browser. I did tried to resolve it using chatgpt. But no solution worked. Even tried to look up the official documentation, but couldn't resolve it.

  • @BlackProgrammer
    @BlackProgrammer 2 หลายเดือนก่อน

    bhai Fitness App ka Tutorial banao new Features ke sath

  • @YouTube47hd
    @YouTube47hd 2 หลายเดือนก่อน

    bro mine is full stack app with beckend file frontend fiel and scoket file but i cant upload baecnd becuase of soem error ==> Running 'node app.js' node:internal/modules/cjs/loader:1715 return process.dlopen(module, path.toNamespacedPath(filename)); ^ Error: /opt/render/project/src/api/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header at Object..node (node:internal/modules/cjs/loader:1715:18) at Module.load (node:internal/modules/cjs/loader:1318:32) at Function._load (node:internal/modules/cjs/loader:1128:12) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:218:24) at Module.require (node:internal/modules/cjs/loader:1340:12) at require (node:internal/modules/helpers:141:16) at Object.<anonymous> (/opt/render/project/src/api/node_modules/bcrypt/bcrypt.js:6:16) at Module._compile (node:internal/modules/cjs/loader:1546:14) at Object..js (node:internal/modules/cjs/loader:1689:10) { code: 'ERR_DLOPEN_FAILED' } Node.js v22.10.0 ==> No open ports detected, continuing to scan... ==> Docs on specifying a port: render.com/docs/web-services#port-binding ==> Exited with status 1 ==> Common ways to troubleshoot your deploy: docs.render.com/troubleshooting-deploys

  • @ShivamAgrahariBunty
    @ShivamAgrahariBunty 2 หลายเดือนก่อน

    Thanks zegocloud for wonderful sdk api and thanks dheeraj sir

  • @fayan02126
    @fayan02126 2 หลายเดือนก่อน

    can u build using webrtc + Hls bitrate streaming 🗿

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Sure bro

    • @fayan02126
      @fayan02126 2 หลายเดือนก่อน

      @DesiStack7 great 🔥

    • @vikassoni7882
      @vikassoni7882 2 หลายเดือนก่อน

      Bhai Ayan remote reverse shell karke TeamViewer jese webapp kese bana sakte hai.. I think meet ya zoom me bhi hota hai esa. Please reply.

    • @fayan02126
      @fayan02126 2 หลายเดือนก่อน

      @@vikassoni7882 bro tools like TeamViewer or reverse shell's aren't design for real-time video ,audio, and messing between muliple users. Thats why we use Webrtc is specifically designed for this purpose.

    • @fayan02126
      @fayan02126 2 หลายเดือนก่อน

      @@vikassoni7882 well reverse shells are typically use for remote access in system administrator ya penetration to testing and all and are considered risky because they can open backdoor for unautorized access. and this approach highly insecure for production. 🙌🏻

  • @rishabh9714-h4v
    @rishabh9714-h4v 2 หลายเดือนก่อน

    Nice bro, but ill recommend use typescript as much you can.

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Sure next project confirm

  • @fahadiqbal5799
    @fahadiqbal5799 2 หลายเดือนก่อน

    is there any difference between nextjs14 vs nextjs15

    • @DesiStack7
      @DesiStack7 2 หลายเดือนก่อน

      Yes so many updates or there like the error handling and all