- 9
- 31 402
Desi Stack
เข้าร่วมเมื่อ 30 ก.ค. 2024
From Beginner to Pro with Desi Stack 😎👨💻
Hello everyone! 🙋♂️ Welcome to Desi Stack! I'm Dheeraj Agrahari, a passionate Full Stack Developer with a year's experience, and I'm here to take you from beginner to pro in full-stack development. If you're aiming to become a top-notch web developer and earn a six-figure income 💸💸, you're in the right place. Subscribe to Desi Stack and start your journey to success today. 🚀
📧 Get in Touch!
Business Email: desistack7@gmail.com
Let's embark on this exciting coding journey together and turn your dreams into reality!
Hello everyone! 🙋♂️ Welcome to Desi Stack! I'm Dheeraj Agrahari, a passionate Full Stack Developer with a year's experience, and I'm here to take you from beginner to pro in full-stack development. If you're aiming to become a top-notch web developer and earn a six-figure income 💸💸, you're in the right place. Subscribe to Desi Stack and start your journey to success today. 🚀
📧 Get in Touch!
Business Email: desistack7@gmail.com
Let's embark on this exciting coding journey together and turn your dreams into reality!
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! 😊
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 ...
bhai admin panel ni hai kya isme
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. ❤
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
Bhai code toh dedo project ka
Wait for second part tab tak ye complete kro bhai mil jayega
Can you provide Full source code for that project?
Wait for second part tab yak ise samjho aur complete kro bahut help milega
Sir please code also 😊
when will part 2 come ??
Nice project 🎉🎉
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.
Nice 👌
Hum is ladke ko jante hain 😂...ye mirzapur ka hai
Ooo nice but mujhe nhi pta 😂😂
👍...
Please Sir make a full stack responsive multi store E-commerce Next js project with Typescript
best project
The project is really good and has many impressive functionalities. Is this beginner friendly ?
Yes bro 👊
Is Razorpay easy to configure. I heard it needs kyc and live site?
Yes it need kyc but it’s a simple step if you have Aadhar and bank account
Bhaiya razory m webhook bhi cover krna
You can deploy both backend and frontend on Vercel, no need to deploy it separately on 2 different platforms.
Sir pdf books website with Admin page ke sath cost Kitana hoga ?
Msg me in Instagram for this
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.😭😭😭
Sir apko project bohot asse
Backend successfully ho gaya but frontend me "react-scripts not found" dikha rha hai. Please help me
Sure
Thank you❤❤
❤
bhai deploy krny pr add credit card ka option aa rha ha
Thank you🎉
error very much
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?
There is option group call and one to one call so you need to provide option
Okk but how many people comes in one meeting at s time
In this message feature is working or not
Thank you❤❤
pls use typescript
Nest project coming soon using type
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
The requested URL /auth/google was not found on this server
Please check server code and your route
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!
Please pass id or watch again may be you miss something
Thank You soo muchhh Finally Project Live hogya after 3 months 😅😅
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 😰
Go in layout.js and in body do hydration you will find the method
please add new feature like meeting scheduling
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
Bhaiya please make a vedio for deploy from the beginning with different project
Sure
Sir also make full e commerce stack project with admin pannel using redux toolkit
I am working on it
Thank you so much
Welcome
Bhaiya mlm software bnana hai kya aap bna sakte hai
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!
Thankyou so much bhai
@@DesiStack7 Does it also include messaging feature or Was it just a dummy button?
@@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.
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😊.
Thankyou so much for this support in future we will come with amazing projects
@@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.
bhai Fitness App ka Tutorial banao new Features ke sath
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
Thanks zegocloud for wonderful sdk api and thanks dheeraj sir
can u build using webrtc + Hls bitrate streaming 🗿
Sure bro
@DesiStack7 great 🔥
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.
@@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.
@@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. 🙌🏻
Nice bro, but ill recommend use typescript as much you can.
Sure next project confirm
is there any difference between nextjs14 vs nextjs15
Yes so many updates or there like the error handling and all