Next.js 13 Ecommerce App from Scratch 2023

Create and style the login and register pages in a Next.js 13 ecommerce app. Define routes under /auth, configure Tailwind colors, and build a two-column authentication UI.

Create a registration form with entity form components, including name, email, and password fields, arranged vertically and submitted to log values in the console.

Replicate the registration form into the login page in a Next.js 13 ecommerce app, remove the name field, implement reusable validations for email and password, and ensure responsive layout.

Learn to set up Next.js 13 API routes without a custom server. Create /api/users and nested routes, implement a get endpoint with NextResponse, and test with localhost.

Create a configs/db config.ts with a connect db function using mongoose to connect Next.js API endpoints to MongoDB Atlas. Use the dot env mongo url and the shop-nextjs udemy database.

Create a user model with mongoose for authentication APIs, defining a simple user schema including name, email, password, delivery addresses, payment methods, isActive, isAdmin, and timestamps.

Register a new user via post /api/register, check for existing email, hash the password with bcrypt, save to MongoDB, and return a success response.

Integrate the registration api with the ui by posting to /api/user/register via Axios, manage loading, and display a success message or 'user already exists' errors as needed.

Implement the login API by validating user existence and bcrypt password comparison, then issue a JWT and store it in an http-only cookie with seven-day expiry.

Integrate the login API in a Next.js 13 app using axios, manage loading and errors, and redirect to the home page on success while cookies and JWT tokens are handled.

Learn to protect pages in a Next.js 13 app by distinguishing public login and register pages from private user pages, using middleware and cookies to gate access and redirect.

Learn to protect api endpoints by building a private current user api that decodes a token from cookies, validates jwt, retrieves the user by id, and restricts access.

Learn to build a consistent layout for logged-in pages in a next.js 13 ecommerce app, with a shared header and a layout provider for private pages.

Explore building a header with a cart icon and user menu in a Next.js 13 ecommerce app, configure Tailwind, fetch current user via axios, and implement a profile/logout popover.

Implement logout in a Next.js 13 ecommerce app by removing the token from cookies, updating the header to show the current user, and adding a loading indicator during auth requests.

Design and implement a full-screen loader that appears while fetching the current user, hiding private pages until data loads, with a centered spinning animation.

Implement Redux Toolkit to manage the current user and drive a role-based profile with admin and normal user tabs. Create a user slice, store, and provider to access user data.

Design a dynamic profile page in a Next.js 13 ecommerce app, rendering admin tabs (products, categories, orders, users) or user tabs (orders, personal information) using a Redux Toolkit user state.

Explore dynamic categories in a Next.js ecommerce app by implementing a front-end and back-end CRUD for categories, using a model pop up to add new categories with name and description.

Build a category model and API for a Next.js ecommerce app, with a protected post route using jwt, a created-by reference, and unique category name enforcement.

Fetch and display all categories in the admin ui via an api route, validate jwt, and render created by names in a data table with tab navigation.

Learn to implement category edit and delete actions in a Next.js 13 ecommerce app, including pre-populated modal forms, selecting a category, and data indexing aligned with MongoDB.

Implement edit category with a nested domain/api/category/{categoryId} put request and update the frontend to axios put /api/categories/{categoryId}, showing 'category updated successfully' and refreshing the list sorted by created time.

Implement a delete category feature in a Next.js 13 ecommerce app. Build a backend API to delete by category id, handle errors, and show per-button loading with Axios delete.

Implement product CRUD in a Next.js app by building a product form for add and edit pages, including name, description, price, category from MongoDB via Axios, and stock, with layout.

Learn to build an image upload UI for the product form using the entity image upload component, supporting multiple images, previews, and saving URLs to Firebase.

Define the product model and API for a Next.js 13 ecommerce app, then connect a UI form to create products with name, category, description, price, stock, images, and created by.

Fixes a bug in the product model by deleting the old Mongoose model when it exists, ensuring the new properties are used and preparing for image upload with Firebase.

Learn how to implement image upload with Firebase storage in a Next.js ecommerce app, including setting up a Firebase project, exporting config, uploading files, and retrieving download URLs.

Learn to display products in a Next.js 13 ecommerce app by fetching data with axios and rendering a table with images, created by, and actions, while handling loading and routing.

Navigate to the edit product route and pre-populate the form with data by the product id from the route params. Reuse the add product form and implement existing images handling.

Explore how to save edits in the product flow by managing a loading state and images, existing plus new images, and updating via the API /api/products put request.

Implement the delete product feature in the next.js 13 ecommerce app by wiring an axios delete call to /api/products/{id}, managing loading state, and refreshing the product list.

Implement product features as a dynamic bullet list by using a form list component to collect features into an array, then save and display them with the product.