BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS
BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS, available at $79.99, has an average rating of 4.55, with 212 lectures, based on 274 reviews, and has 2470 subscribers.
You will learn about Build the most exciting ecommerce project with react js, next js, mongodb, redux toolkit and next auth Learn and master next js and remove all confusion Master Next auth for full authentication system, learn about callbacks and crfTOkens User Redux Toolkit with redux persist for a killer combination for managing state Master Next js and all of its secrets and tricks and become comfortable using it for you frontend and backend work Learn how to work with Mongodb and how to add ,update, remove and query like a pro. Learn how to use Cloudinary to store your images in a new brilliant way and how to upload, search, filter and open a new perspective on working with Cloudinary. Build a mailing system from scratch to send emails to the user for email verification links and reset code password. Strong advanced form validation using Formik and Yup and learn about the best form validation techniques used Learn how to use react redux toolkit to have a global store shared across all of our application. Learn how to create protected routes using next auth and secure your application and pages. Learn how to work with useState, useReducer, useEffect, useRef, useCallback, event Listeners This course is ideal for individuals who are react js beginners or next js beginners or Beginner web developer or Junior web developer or React js developer or Node js developer or web developer or next js developer It is particularly useful for react js beginners or next js beginners or Beginner web developer or Junior web developer or React js developer or Node js developer or web developer or next js developer.
Enroll now: BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS
Summary
Title: BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS
Price: $79.99
Average Rating: 4.55
Number of Lectures: 212
Number of Published Lectures: 212
Number of Curriculum Items: 212
Number of Published Curriculum Objects: 212
Original Price: $74.99
Quality Status: approved
Status: Live
What You Will Learn
- Build the most exciting ecommerce project with react js, next js, mongodb, redux toolkit and next auth
- Learn and master next js and remove all confusion
- Master Next auth for full authentication system, learn about callbacks and crfTOkens
- User Redux Toolkit with redux persist for a killer combination for managing state
- Master Next js and all of its secrets and tricks and become comfortable using it for you frontend and backend work
- Learn how to work with Mongodb and how to add ,update, remove and query like a pro.
- Learn how to use Cloudinary to store your images in a new brilliant way and how to upload, search, filter and open a new perspective on working with Cloudinary.
- Build a mailing system from scratch to send emails to the user for email verification links and reset code password.
- Strong advanced form validation using Formik and Yup and learn about the best form validation techniques used
- Learn how to use react redux toolkit to have a global store shared across all of our application.
- Learn how to create protected routes using next auth and secure your application and pages.
- Learn how to work with useState, useReducer, useEffect, useRef, useCallback, event Listeners
Who Should Attend
- react js beginners
- next js beginners
- Beginner web developer
- Junior web developer
- React js developer
- Node js developer
- web developer
- next js developer
Target Audiences
- react js beginners
- next js beginners
- Beginner web developer
- Junior web developer
- React js developer
- Node js developer
- web developer
- next js developer
Hello my fellow developers and welcome to a new exciting course which maybe the best you will ever see ,m talking about building a fully advanced ecommerce website using react js next js mongodb redux toolkit and next auth and many other exciting tools ,which is a dream combo if you know what you are doing and will allow you to build some of the best websites you can imagine.
this video is a must watch till end so you dont miss any exciting features,and now let me show you why this build is actually awesome, i took a very different approach than most ecommerce websites you see in other courses, our products will be listed in swipers as you can see and that will allow you to see the product in its full form and all different styles cuz our prodycts consist of many (for example you have a jacket but the jacket can be black green red and every color will have diff sizes and every size has a diff qty and a diff price ) , so tell me have you seen smth like this in any other couse no and this is a first which is a more realistoc approach that u see in websites like amazon ebay etc..
and every product will have its own page that looks awesome as you can clearly see also we added a zoom tool to zoom on the product for a better look also we have some stats on reviews with the ability to add a review in details and even you can use images and we have a table to showcase all reviews with filtering and pagination etc…
the most important part about an ecommerce experience starts with the cart which we have done a very good job on, the products added will be displayed and even the logic behind it is impressive and also the cart gets updated everytime to make sure the products are still available and the prices are up to date,also you can change qty and delete a product and u will have to select the products you wanna checkout with and the total will be calculated and also adding the shippingFees to the count.
jumping to the checkout page where you can see a summary of your cart the addresses you have where you can select the address you wanna continue with and even add your own addresses and just a side note every form we have in this build is validated by formik and yup to make sure any data you type is strictly validated. you can choose a payment method and we also give you the option to use a coupon for a discount on your order.
and after placing the order the order gets created and now you can pay using three ways yes three we work on paypal payment which allows you to pay with paypal balance and even credit cards and also we we added a strpe gateway so you can pay with you credit card directly and also we have the option to pay cash on delievery.
now still so much exciting features i have to go through and i wanna start with the browse page cuz its is absolutely awesome and just perfect you have your products displayed and you can search for products and you can filter through them using all kind of filters together u can choose the category brands sizes colors styles and mix it all together and adding pricing filters rating filters and on top of that you can sort in all different ways and thats not the end of it we add the pagination to the mix to make sure it reaches perfection i dont think you can do better than this.
and after all of this i just wanna casualy tell u about the location detector so we will be able to detect which country the user is accessing our website from and get all informations needed and you can use those infos for your advantage to show certain and also hide certain products from a user from a certain region as big websites do. randomly also i can tell you we added a newsletter system connected to mailchimp api where we can gather all emails registerd in the news letter and you can send promotional emails to all of m at once.
okey before continuing i also wanna talk about our authentification system using next auth which can be really hard to customize depending on your needs but i will tell you that our authentification page has strictly validated forms and we allow you to register and we even send you an email after for verification and activating your account and we will create custom emails for activation forgetting password etc..and m gonna show how to create these high quality custom emails.
now we come to the login process so we will use next auth providers to log you in using credentials and also social login like google twitter github and even aith0 and all sessions will be handled with next auth and we also gonna use server side middlwares to protect every route using next auth itself not forgetting the ability to reset your password also.
not gonna forget about our home page with its beautiful design and swipers all arround and even custom components that have a countdown for flash deals and i added it because ive seen it a lot so i had to do it.
and before jumping to the admin dashboard i wanna talk about the profile page where you can customize your profile,go through your orders with all their different status and you can also manage your addresses and add and remove and even choosing a default payment method and even the ability to change your password.
and now we come to the admin dashboard which in itself should be a seperate course but i wanted to give you all you need in one course,
so lets talk about it its a well designed dashboard with beatiful colors and impressive functionality ofc.
the main page has a brief data of stats and recent orders and users whch is not that impressive but lets talk about the create product page first so you will be able to create a product with all the basics you need and more from pictures that will be uploaded to cloudinary so cloudinary is our cloud service then you can extract colors from those images to choose the main color of that product alongside the style, and you can also choose a category and all the subcategories the product belongs to,also you can decide if a product has a size then u can add the qty and the price of that size you can also add custom informations about the product to make every product details and description very unique whic also a new approach same thing goes for questions, also if the prduct belongs to an existing product you can choose it and it will fill all informations except the unique ones that related to that product only and then simply we update the existing product and add the subproduct to it, we also can manage categories and subcategories with the abilty to list and update a category or subcategory with the option to delete same goes for coupons where we can add a coupon with a starting date and an ending date that means we will work on dates which always good to get comfortable with.
now we come to orders who are displayed in smart way where you can see the main infos then expand to see first the user infos and the shipping informations then under that we can see the order in details so you know exacly which product we have to ship and the actual qty and style etc…
we have also a page for users where we can see all the users and mange em.also we have a page for all products where we can see all of the products grouped showing all different styles and subproducts for that products and you edit or delete or make a product in the flash deals or doing whatever you like cuz in this course you will be able to creates an ewesome propject but at the same time your skills will just get waaay better and you will get comfortable with very complicated large projects and you will learn the archeticture of a project and how you organise it and how to be professional learn clean code.
its almost 50 hours of content that can be expanded with 220+ videos for the amount of content you get access to this is a no brainer course so come join us and become a better developer.
Course Curriculum
Chapter 1: Introduction
Lecture 1: Project Showcase
Chapter 2: Let's setup our project
Lecture 1: Create next app
Lecture 2: Explaining css in next js and mixing sass with modules
Lecture 3: Reset Css styles
Lecture 4: Create a Mongodb Atlas cluster and get the connection url
Lecture 5: Connect,Disconnect to the database
Lecture 6: Let's setup Redux toolkit with Redux Persist
Lecture 7: Making global variables accessible in next config
Chapter 3: Header Component
Lecture 1: Ad header
Lecture 2: Ad top
Lecture 3: Top Menu part 1
Lecture 4: Top Menu part 2
Lecture 5: Search component
Chapter 4: Footer Component
Lecture 1: Footer links
Lecture 2: Footer Socials & Newsletter
Lecture 3: Footer Payment & Copyright
Lecture 4: Responsive Footer
Chapter 5: Location Detection
Lecture 1: Detect user location using IpRegistry
Chapter 6: Authentification
Lecture 1: Next auth setup
Lecture 2: JSON web tokens & Mongodb adapter
Lecture 3: Github provider
Lecture 4: Google provider
Lecture 5: Header session
Lecture 6: Twitter provider
Lecture 7: Auth0 provider
Lecture 8: Sign in page 1
Lecture 9: Sign in page 2
Lecture 10: Sign in page 3 – Custom input with yup
Lecture 11: Sign in page 4 button submit
Lecture 12: Sign in page 5 Socials
Lecture 13: Sign in page 6 sign in and yup validation
Lecture 14: Sign up 1
Lecture 15: Sign up 2 User model
Lecture 16: Sign up 3
Lecture 17: Sign up 4 Send email 1
Lecture 18: Sign up 5 Send email 2
Lecture 19: Sign up 6 Send email 3
Lecture 20: Sign up 7 submit
Lecture 21: Sign up 8 loader, success, error, redirect …
Lecture 22: Sign in with Next auth and submit
Lecture 23: Callbacks in Next auth
Lecture 24: csrfTOken redirect
Chapter 7: forgot,reset password
Lecture 1: Forgot page 1
Lecture 2: Forgot page 2
Lecture 3: Reset password 1
Lecture 4: Reset password 2
Chapter 8: Home page
Lecture 1: Home main structure
Lecture 2: Home swiper part 1
Lecture 3: Home swiper 3
Lecture 4: Home offers main
Lecture 5: Home menu
Lecture 6: Home user menu markup
Lecture 7: Home user menu markup styles
Lecture 8: Home main header
Lecture 9: Home main responsive
Lecture 10: Flash deals 1
Lecture 11: Flash deals 2
Lecture 12: Flash deals responsive
Lecture 13: Flash deals Countdown
Lecture 14: Category cards
Lecture 15: Category cards responsive
Lecture 16: Home products swiper
Lecture 17: Home products swiper extra
Chapter 9: Product card
Lecture 1: Product model and explaining the most perfect approach for products
Lecture 2: Category and subcategory model
Lecture 3: Add and get products from database
Lecture 4: Product card 1
Lecture 5: Product card 2
Lecture 6: Product card 3
Chapter 10: Product page
Lecture 1: Get, filter and prepare product data
Lecture 2: product page content start
Lecture 3: product images main swiper
Lecture 4: product infos 1
Lecture 5: product infos 2
Lecture 6: product infos 3
Lecture 7: product infos 4 & share to social media accounts
Lecture 8: product infos 5 accordian
Lecture 9: product simillar swiper
Lecture 10: product reviews overview card
Lecture 11: add review 1
Lecture 12: add review 2
Lecture 13: add review 3
Lecture 14: add review 4 working with images upload form
Lecture 15: reviews table : pagination functionality
Lecture 16: review card
Lecture 17: reviews table header
Chapter 11: Cart
Lecture 1: cart page 1
Lecture 2: cart slice & add to cart 1
Lecture 3: 03-add to cart and update cart 2
Instructors
-
Mohamed Hajji
Full Stack web developer
Rating Distribution
- 1 stars: 15 votes
- 2 stars: 9 votes
- 3 stars: 23 votes
- 4 stars: 62 votes
- 5 stars: 165 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Digital Marketing Foundation Course
- Google Shopping Ads Digital Marketing Course
- Multi Cloud Infrastructure for beginners
- Master Lead Generation: Grow Subscribers & Sales with Popups
- Complete Copywriting System : write to sell with ease
- Product Positioning Masterclass: Unlock Market Traction
- How to Promote Your Webinar and Get More Attendees?
- Digital Marketing Courses
- Create music with Artificial Intelligence in this new market
- Create CONVERTING UGC Content So Brands Will Pay You More
- Podcast: The top 8 ways to monetize by Podcasting
- TikTok Marketing Mastery: Learn to Grow & Go Viral
- Free Digital Marketing Basics Course in Hindi
- MailChimp Free Mailing Lists: MailChimp Email Marketing
- Automate Digital Marketing & Social Media with Generative AI
- Google Ads MasterClass – All Advanced Features
- Online Course Creator: Create & Sell Online Courses Today!
- Introduction to SEO – Basic Principles of SEO
- Affiliate Marketing For Beginners: Go From Novice To Pro
- Effective Website Planning Made Simple