BUILD THE BEST ECOMMERCE WEBSITE EVER with REACT JS NEXT JS

Create a Next.js app by installing Node.js, selecting a package manager, and scaffolding a Next.js project with pages, API routes, and public assets to run locally on localhost 3000.

Explore styling in Next.js by using global styles and css modules, then mix sass with modules to scope class names, use variables and calculations, and install sass for preprocessor support.

Apply a global css reset with Sass, remove default margins, enforce box-sizing border-box, normalize fonts and line height, use font inheritance for form controls, and set max-width 100% for media.

Sign up for MongoDB Atlas, create a free cluster, obtain the connection URL, and store credentials in an env file to connect to a shop database with a users collection.

Connect to a MongoDB database from your Next.js app using Mongoose, managing a shared connection and conditional disconnects. Configure the URL from environment variables and use db helpers.

Learn to set up a Redux toolkit store with Redux Persist to persist data across refreshes, wrap your app with provider, configure reducers and slices, and enable devtools in development.

Configure next.config to expose sass and css variables globally by auto importing a shared variables file using include paths across all styles.

Create a reusable header in a Next.js app by moving the head to _app, building a header folder with a CSS module, and adding a banner ad.

Build the header top bar for an ecommerce site using React and Next.js, featuring a country selector with flag and currency, plus account, help, and wishlist icons.

Build a responsive top menu that adapts at a 670px breakpoint, hides extraneous items, and toggles to a user image or account dropdown with profile, orders, messages, addresses, and wishlist.

Fix top menu visibility across breakpoints by applying targeted list item classes and a useState show-hide logic with hover states and 100x100 images.

Build a responsive ecommerce header featuring a logo, a central search bar, and a cart indicator, using next/link and redux state to reflect the current cart length.

create a reusable footer component in react and next js, implement footer links from a data array, and arrange them with css grid for responsive layouts.

Build a responsive footer socials section and newsletter signup for an ecommerce site using React and Next.js, with social icons and a subscribe form.

Build a responsive footer in React and Next.js featuring payment icons (Mastercard, Visa, others) with flex wrap, and a copyright section with a links list and a location icon.

Master a responsive footer with grid template areas, naming areas like links, socials, newsletter, payments, and copyright, and adapt layouts with breakpoints at 800px and 1200px.

Harvest user location data with the IpRegistry API to populate country, city, currency, language, and country flag in header and footer, using server-side Next.js props and Axios.

Master a professional NextAuth setup for a robust Next.js authentication system. Integrate Google, Facebook, GitHub, and Twitter, enable credentials and email verification, and wrap with a SessionProvider.

Learn to implement JSON web tokens with a MongoDB adapter in NextAuth, configure a login route and secret, and register users to manage sessions in the database.

Register a GitHub OAuth app, configure the client ID and secret, and enable sign in with GitHub for user authentication and session testing.

Set up the Google provider by configuring a Google Cloud Console project, OAuth credentials, and consent screen; test sign-in flows with Google and adjust user data display.

Create a header that shows session-based user info (name and image) and a menu, then implement sign in/out with redirects via a callback URL.

Configure the Twitter provider for authentication by importing it, renaming variables, and supplying API keys and secrets from the Twitter developer portal for development, staging, and production environments.

integrate Auth0 as the authentication and authorization provider for the ecommerce app, enabling login, registration, password reset, and social logins with Google, Microsoft, and others.

Build the sign in page for an ecommerce site with social buttons, sign in and sign up forms, form validation, and header and footer navigation to the store.

Build a reusable sign in form for login and signup, using formic validation and a custom login input component with icons, within a responsive container.

Build a sign-in form with custom inputs, use field and meta, and yup validation. Initialize login email and password values, handle changes, enable reinitialize, and show errors with touched.

Explore building a sign in page with an error pop up, a css triangle pointer, absolute positioning, and a reusable submit button with a forgot password link.

Map the social login providers from next-auth on the sign-in page using getServerSideProps, rendering dynamic login buttons with provider icons.

Develop a sign in and sign up page with yup validation for name, email, and password, including confirm password, plus a responsive layout that stacks on narrow screens.

Learn to implement a sign-up api route with next-connect, test it with Postman, handle requests, validate name, email, and password, and connect to the database with robust error handling.

Define a user model in MongoDB with Mongoose by building a user schema (name, email, password, image, addresses), enforce unique email, and enable email verification and timestamps.

Explore building a user signup flow with a MongoDB users collection, including duplicate email checks, password length validation, and password hashing, followed by activation via JSON web tokens.

Implement activation flows by building activation URLs with tokens, verify emails in the database, and send emails via Gmail API and nodemailer within a Next.js ecommerce app.

Learn to build a reusable send email function using node mailer and Google APIs with OAuth for Gmail SMTP, supporting multiple templates and dynamic content.

Learn to customize a professional activation email using free templates, edit logos and links, and integrate placeholders like user email and user link with a send email function.

Demonstrates building a sign-up flow with a form submission using axios to /api/auth/sign up, managing loading, success and error messages, and redirecting after signup.

Explore how to implement a full-page loading overlay with a customizable dot loader during sign-up, showing success and error states and redirecting to home page using the Next.js router.

Implement a customizable sign-in with NextAuth credentials provider, handling email and password inputs, user lookup, and error messages in a React.js Next.js ecommerce app.

Configure next-auth callbacks to enrich the session with database information, including user id and role, by fetching the user with token sub during sign in.

Learn how to implement secure redirects with next-auth, manage callback URLs, protect sign-in pages, and integrate CSF tokens using a hidden form field for credential and provider logins.

Learn to implement forgot password and reset password flows in a React and Next.js ecommerce site, including page routing, header and footer, email input, and validation.

Implement a backend forgot password flow with an api/forgot route, generate a user-id reset link, send a templated email, and connect it to the forgot page.

Create a reset password page linked from the forgot password flow. Extract the token from the query, render password and confirm password fields, and validate before signing in.

Verify a reset token on the server to extract the user id from a JWT, then hash and update the user's password and optionally sign them in.

Create the home page layout with a left menu, center swiper for offers, and right user panel, using a responsive container and grid areas for a centered ecommerce interface.

Set up and customize a swiper in a React Next.js project using swiper. Build a responsive image carousel with pagination bullets and next/prev controls for an ecommerce gallery.

Refine a React swiper for ecommerce ads, enable cursor pointer on hover, reveal navigation on active, center slides with grid and place-items center, and set autoplay delay to 2500 ms.

Refine the home offers section by implementing a swiper with images, wiring an offers data array, and applying overflow hidden and navigation for a responsive ecommerce UI.

Create a dynamic home menu by building a menu array, mapping items with icons, links, and optional submenus, and style it with hover effects for a presentable navigation.

Create a right-side user menu for react/next.js ecommerce app, using use session to show the user image or a default avatar with login options, plus icon links and a swiper.

Master home user menu markup styles by building a responsive css layout with absolute positioning, centered images, flex column alignment, gradient buttons, and swiper navigation for an ecommerce react/next.js site.

Remove the header background and shadow, build a header component with an ordered list of links in blue, 19px, and use display:flex to center categories and subcategories.

Practice responsive web design with live coding: adjust the home page using media queries, grid and flex layouts, hide header on small widths, and optimize a mobile-friendly swiper.

Build the flash deals section on the home page using static data, create a reusable countdown component, and integrate a swiper-based deal cards carousel.

Build a dynamic flash deals carousel in a React/Next.js ecommerce site by rendering product cards with images, prices, discounts, a progress bar for sold percentage, and responsive styling.

Design a responsive flash deals carousel using Swiper breakpoints and slides preview, and optimize header layout with media queries for consistent cross-device ecommerce experiences.

Develop a flash deals countdown in React by building a countdown component that accepts a target date, computes milliseconds, and updates days, hours, minutes, and seconds with a live timer.

Design and implement category cards in a reusable, data-driven component using images and a swiper, with configurable headers and background colors.

Learn to build responsive category cards in React, using react-responsive media queries to adjust grid columns, slice items, and tune image height and gaps from desktop to mobile.

Build a reusable home products swiper for an ecommerce site by mapping mini products into slides with images, names, and prices, and enable navigation while keeping it responsive.

Create dual product swipers with headers for game and home improvement, using data arrays for name, image, and price to showcase items and experiment with header colors.

Create a flexible product model with mongoose by defining a comprehensive product schema, including name, description, slug, category, subcategory, details, subproducts, reviews, and refund policies.

Define category and subcategory models in mongoose, with schemas for name and slug, including required, min/max length, lowercase, and unique index; reference parent category via ObjectId.

Learn to add products and categories to the database, fetch them via server-side props, and render products with subproducts (colors, sizes, images) in a Next.js e-commerce app.

Build dynamic product cards in a Next.js React project, showing hover image movement, color variations, size-based price ranges, and discounts through sub-products and mapped data.

Implement a responsive product card carousel using a swiper, with autoplay, hover-to-pause, and image mapping from product data, integrating styles and next/link navigation.

Learn to build a dynamic product card with discount display, truncating long names, handling multiple prices and styles, rendering images and color swatches, and integrating a product swiper.

Fetch product data from the database using slug, build sub products with style and size variations, compute price ranges and discounts, and prepare server-side props for the interface.

Build a product page header and dynamic path by populating category and subcategory data with a category model in a React and Next.js ecommerce site.

Learn to display product images with a main image and zoom options, plus a thumbnail swiper, using a component-based setup in a React/Next.js ecommerce site.

Implement the infos component for product details in a React JS Next.js ecommerce site, wiring size data, price range, SKU, name, rating with Material UI, and discount display.

Learn to display shipping info (including free shipping when available), stock by size, and dynamic price ranges with discounts for size variants using Next.js.

Refine the product page by adding review text spacing and parentheses, implement color swatches with active states and dynamic images, and manage size and quantity via state and router queries.

Enable add to cart and wishlist actions with quantity-based disable states, reflect out-of-stock conditions, and implement social sharing via React Share with Facebook, Messenger, and other icons.

Learn to build a reusable product infos accordion in a React and Next.js ecommerce site, wiring details and description data into a master UI component with customizable styling.

Implement a similar products swiper using React JS and Next.js, mapping product data to images with navigation, slides per view, and responsive breakpoints for a polished ecommerce catalog.

Develop a customer reviews module with an average rating and percentage stats, a login-to-review gate, and a submit form for size, style, fit, images, and star ratings.

Learn to build a quiz-driven product review flow gated by user login, with a login prompt that preserves state, a review form, and a size-select component for submissions.

Build an ecommerce UI with React and Next.js by implementing hover-driven visibility, size and color selectors, and data filtering to show matching options.

Create a product review form with a size fit select (small to large), a review text area with placeholder write your review here, a rating control, and a submit button.

Create a React image upload form with a hidden file input and a custom add images button, showing previews, removal, and enforcing up to three jpg/png/jpeg files under five MB.

Implement a reviews table with smooth pagination for a product, rendering reviews with related user data, and wiring per-page pages and navigation using React and Next.js components.

Build a dynamic review card for an ecommerce site using React and Next.js, featuring user initials, avatar, rating, review text, images, likes, and date, with responsive flex layouts.

Enhance the ecommerce reviews table by building a dynamic header with reusable select components to filter by rating, region, size including all sizes, color, style, and order.