Build Full-ECommerce By Next.js 13+, App Router, Server Components and Actions

Tech Nextjs 13+, Server Components & Actions, Route Handler
UI Tailwind, DaisyUI, Chart.js
Database MongoDB, Mongoose
Payment PayPal, Stripe
Deployment Github, Vercel, MongoDB Atlas
Authentication Auth.js, Google Auth
Others Cloudinary, Zustand, SWR

next amazona v2

Resources

What you will learn

  • NextJS basics like setting up project, creating pages and data fetching
  • NextJS advanced topics like app router, server component & actions, image optimization,
  • Tailwind CSS and DaisyUI framework to build responsive website using custom theme, animation and carousel
  • ReactJS including decomposing components, state management with Zustand and data fetching using swr
  • Auth.js package to authenticate customers and admin users
  • MongoDB and Mongoose to save and retrieve data like products, orders and users
  • PayPal developer api to make online payment
  • Deploy web applications on servers like Vercel and Netlify

Full Course

Get this course by 90% discount on Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=SAVE90

Run Locally

  1. Clone repo

     $ git clone git@github.com:basir/next-amazona-v2.git
     $ cd next-amazona-v2
  2. Create .env File

    • duplicate .env.example and rename it to .env
  3. Setup MongoDB

    • Local MongoDB
      • Install it from here
      • In .env file update MONGODB_URI=mongodb://localhost/amazona
    • OR Atlas Cloud MongoDB
  4. Install and Run

      npm install
      npm run dev
  5. Seed Data

  6. Admin Login

Promo

Welcome to version 2 of next.js amazona. it is coding course to build a full functional ecommerce website like amazon using next.js lastest features like App router, sever components and actions and route handler.

Lessons

  1. Introduction
  2. Install Tools
  3. Create Next App
  4. Publish to Github
  5. List Products
    1. create product type
    2. add data.ts
    3. add images
    4. render products
  6. Create Product Details
    1. create product page
    2. create 3 columns
    3. show image in first column
    4. show product info in second column
    5. show add to cart action on third column
    6. add styles