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 |
- 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
- 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
Get this course by 90% discount on Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=SAVE90
-
Clone repo
$ git clone git@github.com:basir/next-amazona-v2.git $ cd next-amazona-v2
-
Create .env File
- duplicate .env.example and rename it to .env
-
Setup MongoDB
- Local MongoDB
- Install it from here
- In .env file update MONGODB_URI=mongodb://localhost/amazona
- OR Atlas Cloud MongoDB
- Create database at https://cloud.mongodb.com
- In .env file update MONGODB_URI=mongodb+srv://your-db-connection
- Local MongoDB
-
Install and Run
npm install npm run dev
-
Seed Data
- Run this on browser: http://localhost:3000/api/seed
- It returns admin email and password and 6 sample products
-
Admin Login
- Run http://localhost:3000/signin
- Enter admin email "admin@example.com" and password "123456" and click Signin
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.
- Introduction
- Install Tools
- Create Next App
- Publish to Github
- List Products
- create product type
- add data.ts
- add images
- render products
- Create Product Details
- create product page
- create 3 columns
- show image in first column
- show product info in second column
- show add to cart action on third column
- add styles