{"id":15630722,"url":"https://github.com/basir/next-tailwind-amazona","last_synced_at":"2025-11-03T17:39:02.905Z","repository":{"id":38449162,"uuid":"485302844","full_name":"basir/next-tailwind-amazona","owner":"basir","description":"Build Ecommerce Like Amazon By NEXT JS","archived":false,"fork":false,"pushed_at":"2023-08-01T15:48:09.000Z","size":967,"stargazers_count":241,"open_issues_count":14,"forks_count":145,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-30T15:08:14.962Z","etag":null,"topics":["cart","ecommerce","mongodb","mongoose","nextjs","paypal","shopping-cart"],"latest_commit_sha":null,"homepage":"https://next-tailwind-amazona.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-25T09:21:39.000Z","updated_at":"2025-03-24T08:02:23.000Z","dependencies_parsed_at":"2024-10-23T01:33:41.373Z","dependency_job_id":null,"html_url":"https://github.com/basir/next-tailwind-amazona","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fnext-tailwind-amazona","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fnext-tailwind-amazona/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fnext-tailwind-amazona/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fnext-tailwind-amazona/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basir","download_url":"https://codeload.github.com/basir/next-tailwind-amazona/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509237,"owners_count":20950232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cart","ecommerce","mongodb","mongoose","nextjs","paypal","shopping-cart"],"created_at":"2024-10-03T10:35:49.587Z","updated_at":"2025-11-03T17:39:02.853Z","avatar_url":"https://github.com/basir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build Nextjs ECommerce Website Like Amazon\n\n- Tech: Nextjs 13, Next Auth 4\n- UI: Tailwind, chart.js, react-chartjs\n- DB: MongoDB, Mongoose\n- Payment: PayPal, Stripe\n- Content Hosting: cloudinary\n- Deploy: Github, Vercel, MongoDB Atlas\n\n![next amazona](/public/app.jpg)\n\n## Resources\n\n- Youtube Video : https://youtu.be/_IBlyR5mRzA\n- Demo Website :  https://next-tailwind-amazona.vercel.app\n- Source Code   :  https://github.com/basir/next-tailwind-amazona\n- Full Course: [basir.thinkific.com](https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=SAVE90)\n\n## What you will learn\n\n- NextJS basics like setting up project, navigating between pages and data fetching\n- NextJS advanced topics like dynamic routing, image optimization,  SSG and SSR\n- Tailwind CSS framework to build responsive website using custom theme, animation and carousel\n- ReactJS including decomposing components, context API and hooks\n- Next Auth package to authenticate customers and admin users\n- MongoDB and Mongoose to save and retrieve data like products, orders and users\n- PayPal developer api to make online payment\n- Deploy web applications on servers like Vercel and Netlify\n\n## Full Course\n\nGet this course by 90% discount on Thinkific:\nhttps://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=SAVE90\n\n## Run Locally\n\n1. Clone repo\n\n   ```shell\n    $ git clone git@github.com:basir/next-tailwind-amazona.git\n    $ cd next-tailwind-amazona\n   ```\n\n2. Create .env File\n\n   - duplicate .env.example and rename it to .env\n\n3. Setup MongoDB\n\n   - Local MongoDB\n   - Install it from [here](https://www.mongodb.com/try/download/community)\n   - In .env file update MONGODB_URI=mongodb://localhost/amazona\n   - OR Atlas Cloud MongoDB\n   - Create database at [https://cloud.mongodb.com](https://cloud.mongodb.com)\n   - In .env file update MONGODB_URI=mongodb+srv://your-db-connection\n\n4. Install and Run\n\n   ```shell\n     npm install\n     npm run dev\n   ```\n\n5. Seed Data\n\n   - Run this on browser: http://localhost:5000/api/seed\n   - It returns admin email and password and 6 sample products\n\n6. Admin Login\n\n   - Run http://localhost:3000/login\n   - Enter admin email and password and click Login\n\n## Lessons\n\n1. Introduction\n2. Install Tools\n3. Create Next App\n4. Publish to Github\n5. Create Website Layout\n   1. create layout component\n   2. add header\n   3. add main section\n   4. add footer\n   5. add tailwind classes\n6. List Products\n   1. add data.js\n   2. add images\n   3. render products\n7. Create Product Details\n   1. create product page\n   2. create 3 columns\n   3. show image in first column\n   4. show product info in second column\n   5. show add to cart action on third column\n   6. add styles\n8. Handle Add To Cart\n   1. define react context\n   2. define cart items state\n   3. create addd to cart action\n   4. add reducer\n   5. create store provider\n   6. handle add to cart button\n9. Create Cart Page\n   1. create cart.js\n   2. use context to get cart items\n   3. list items in cart items\n   4. redirect to cart screen after add to cart\n10. Update Quantity In The Cart\n    1. add select box for quantity\n    2. handle select box change\n11. Save Cart Items\n    1. install js-cookie package\n    2. save and retreive cart items in cookies\n12. Create Login Form\n    1. install react hook form\n    2. create input boxes\n    3. add login button\n13. Connect To MongoDB\n    1. install mongoose\n    2. install mongodb or use mongodb atlas\n    3. save connection url in .env file\n    4. create db utils file\n    5. create sample users\n14. Create Login API\n    1. install next-auth\n    2. create nextauth.js\n    3. implement signin\n    4. use signin in login form\n15. Add User Menu\n    1. check user authentication\n    2. install headlessui\n    3. show user menu\n16. Create Shipping Screen\n    1. display address fields\n    2. save address in context\n17. Create Payment Method Screen\n    1. dispaly payment methods\n    2. save payment method in context\n18. Seed sample products\n    1. create product model in mongoose\n    2. insert sample products to mongodb\n19. Load Products MongoDB\n    1. load products in home page from mongodb\n    2. load products in product page from mongodb\n    3. use product api to check count in stock in add to cart\n20. Create Place Order Screen\n    1. display shipping address\n    2. display payment method\n    3. display order items\n    4. implment create order\n21. Create Order Screen\n    1. implement backend api for order details\n    2. load order data from backend\n    3. display order details\n22. Create Register Screen\n    1. add signup api\n    2. create register page\n    3. call api on form submit\n23. Pay Order By PayPal\n    1. add paypal button\n    2. handle payment\n    3. create backend api\n    4. update order state\n24. Create Order History Screen\n    1. create my order api\n    2. create order history component\n    3. fetch orders and display them\n25. Publish On Vercel\n    1. create vercel account\n    2. connect to github\n    3. set next auth and mongodb db in env vars\n    4. push code to github\n26. Update User Profile\n    1. create profile screen\n    2. show user info\n    3. handle update user info\n27. Create Admin Dashboard\n    1. Create Admin Menu\n    2. create dashboard screen\n    3. Implement admin summary api\n28. List Orders For Admin\n    1. create orders page\n    2. create orders api\n    3. use api in page\n29. Deliver Order For Admin\n    1. create deliver api\n    2. add deliver button\n    3. implement click handler\n30. List Products For Admin\n    1. create products page\n    2. create products api\n    3. use api in page\n31. Create Product Edit Page\n    1. create edit page\n    2. create api for product\n    3. show product data in form\n32. Upload Product Image\n    1. create cloudinary account\n    2. get cloudinary keys\n    3. create upload api\n    4. upload files in edit page\n33. Create And Delete Products\n    1. add create product button\n    2. build new product api\n    3. add handler for delete\n    4. implement delete api\n34. List Users For Admin\n    1. create users page\n    2. create users api\n    3. use api in page\n35. Add Carousel\n    1. create featured products\n    2. feed carousel data\n    3. show popular products\n36. Create Search Page\n    1. create filters\n    2. list products\n    3. show filters\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasir%2Fnext-tailwind-amazona","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasir%2Fnext-tailwind-amazona","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasir%2Fnext-tailwind-amazona/lists"}