Build Nextjs ECommerce Website Like Amazon

• Tech: Nextjs 13, Next Auth 4
• UI: Tailwind, chart.js, react-chartjs
• DB: MongoDB, Mongoose
• Payment: PayPal, Stripe
• Content Hosting: cloudinary
• Deploy: Github, Vercel, MongoDB Atlas

Resources

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

What you will learn

• NextJS basics like setting up project, navigating between pages and data fetching
• NextJS advanced topics like dynamic routing, image optimization,  SSG and SSR
• Tailwind CSS framework to build responsive website using custom theme, animation and carousel
• ReactJS including decomposing components, context API and hooks
• Next Auth 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-tailwind-amazona.git $ cd next-tailwind-amazona

1. Create .env File

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

3. Setup MongoDB

4. Local MongoDB

5. Install it from here
6. In .env file update MONGODB_URI=mongodb://localhost/amazona
7. OR Atlas Cloud MongoDB
8. Create database at https://cloud.mongodb.com

9. In .env file update MONGODB_URI=mongodb+srv://your-db-connection

10. Install and Run

shell npm install npm run dev

1. Seed Data

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

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

4. Admin Login

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

6. Enter admin email and password and click Login

Lessons

1. Introduction
2. Install Tools
3. Create Next App
4. Publish to Github
5. Create Website Layout
6. create layout component
7. add header
8. add main section
9. add footer
10. add tailwind classes
11. List Products
12. add data.js
13. add images
14. render products
15. Create Product Details
16. create product page
17. create 3 columns
18. show image in first column
19. show product info in second column
20. show add to cart action on third column
21. add styles
22. Handle Add To Cart
23. define react context
24. define cart items state
25. create addd to cart action
26. add reducer
27. create store provider
28. handle add to cart button
29. Create Cart Page
30. create cart.js
31. use context to get cart items
32. list items in cart items
33. redirect to cart screen after add to cart
34. Update Quantity In The Cart
    1. add select box for quantity
    2. handle select box change
35. Save Cart Items
    1. install js-cookie package
    2. save and retreive cart items in cookies
36. Create Login Form
    1. install react hook form
    2. create input boxes
    3. add login button
37. Connect To MongoDB
    1. install mongoose
    2. install mongodb or use mongodb atlas
    3. save connection url in .env file
    4. create db utils file
    5. create sample users
38. Create Login API
    1. install next-auth
    2. create nextauth.js
    3. implement signin
    4. use signin in login form
39. Add User Menu
    1. check user authentication
    2. install headlessui
    3. show user menu
40. Create Shipping Screen
    1. display address fields
    2. save address in context
41. Create Payment Method Screen
    1. dispaly payment methods
    2. save payment method in context
42. Seed sample products
    1. create product model in mongoose
    2. insert sample products to mongodb
43. Load Products MongoDB
    1. load products in home page from mongodb
    2. load products in product page from mongodb
    3. use product api to check count in stock in add to cart
44. Create Place Order Screen
    1. display shipping address
    2. display payment method
    3. display order items
    4. implment create order
45. Create Order Screen
    1. implement backend api for order details
    2. load order data from backend
    3. display order details
46. Create Register Screen
    1. add signup api
    2. create register page
    3. call api on form submit
47. Pay Order By PayPal
    1. add paypal button
    2. handle payment
    3. create backend api
    4. update order state
48. Create Order History Screen
    1. create my order api
    2. create order history component
    3. fetch orders and display them
49. Publish On Vercel
    1. create vercel account
    2. connect to github
    3. set next auth and mongodb db in env vars
    4. push code to github
50. Update User Profile
    1. create profile screen
    2. show user info
    3. handle update user info
51. Create Admin Dashboard
    1. Create Admin Menu
    2. create dashboard screen
    3. Implement admin summary api
52. List Orders For Admin
    1. create orders page
    2. create orders api
    3. use api in page
53. Deliver Order For Admin
    1. create deliver api
    2. add deliver button
    3. implement click handler
54. List Products For Admin
    1. create products page
    2. create products api
    3. use api in page
55. Create Product Edit Page
    1. create edit page
    2. create api for product
    3. show product data in form
56. Upload Product Image
    1. create cloudinary account
    2. get cloudinary keys
    3. create upload api
    4. upload files in edit page
57. Create And Delete Products
    1. add create product button
    2. build new product api
    3. add handler for delete
    4. implement delete api
58. List Users For Admin
    1. create users page
    2. create users api
    3. use api in page
59. Add Carousel
    1. create featured products
    2. feed carousel data
    3. show popular products
60. Create Search Page
    1. create filters
    2. list products
    3. show filters