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

Resources

• Youtube Video : https://youtu.be/---
• Demo Website :  https://next-amazona-v2.vercel.app/
• Source Code   :  https://github.com/basir/next-amazona-v2
• Full Course: basir.thinkific.com

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

shell $ git clone git@github.com:basir/next-amazona-v2.git $ cd next-amazona-v2

1. Create .env File

2. duplicate .env.example and rename it to .env

3. Setup MongoDB

4. Local MongoDB

   • Install it from here
   • In .env file update MONGODB_URI=mongodb://localhost/amazona

5. OR Atlas Cloud MongoDB

   • Create database at https://cloud.mongodb.com
   • In .env file update MONGODB_URI=mongodb+srv://your-db-connection

6. Install and Run

shell npm install npm run dev

1. Seed Data

2. Run this on browser: http://localhost:3000/api/seed

3. It returns admin email and password and 6 sample products

4. Admin Login

5. Run http://localhost:3000/signin

6. Enter admin email "admin@example.com" and password "123456" and click Signin

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
6. create product type
7. add data.ts
8. add images
9. render products
10. Create Product Details
11. create product page
12. create 3 columns
13. show image in first column
14. show product info in second column
15. show add to cart action on third column
16. add styles