Some people complain about Amazon's UI but most people realize how complex Amazon's website truly is. If you want to improve your skills as a full stack developer, creating an Amazon clone will give you practice in many different areas.
We just published a 12-hour course that will teach you how to build a full stack e-commerce app with Flutter, Javascript, Node.js, Express, MongoDB and Mongoose.
Rivaan Ranawat created this course. Rivaan has created many popular Flutter courses.
In this tutorial, you'll learn to build the UI of Amazon from scratch, create REST APIs, store data in MongoDB using Mongoose, use REST APIs with Flutter & Dart using Models, use the Flutter State Management tool as a provider, and create a cross platform app that works on Android and iOS.
You will learn how to implement features such as authentication with email/password, cart, searching products, fetching products based on category, rating products, fetching deal of the day, checking out using GPay/Apple Pay, viewing the orders, viewing and graphing total sales, and more.
Here are all the sections covered in this course:
- Introduction & Demo
- Setting Up The Flutter Project
- Setting Up Themes
- Folder Structure
- Setting Up Routes
- Auth Screen UI
- What is Node.js
- Node.js Installation
- Initialising Node
- First Node.js Script
- NPM & Dependencies
- Creating Server
- Nodemon
- Create your First API
- Exercise 1: Create GET API
- Solution 1
- Routers
- Middleware
- Sign up Route
- Connecting to MongoDB
- Creating User Model
- Sign up Route cntd
- Connecting Sign Up Route With Client Side
- Adding TextField & Form Validator
- Sign In Route / Exercise 2
- Creating Sign In Route (Solution 2)
- Connecting Sign In Route with Client Side
- Persisting State
- Creating BottomNavBar
- Account Screen UI
- Home Screen UI
- Admin Screen BottomNavBar
- Add Product Screen UI
- Picking Images
- Admin - Selling Product
- Create Admin Middleware / Exercise
- Solution
- Sell Product Contd.
- Admin - Fetching & Displaying All Products
- Admin - Deleting Product
- Self Exercise (Add Product Realtime)
- Getting & Displaying Products Based on Category
- Searching & Displaying Products
- Optional Exercise (Creating Search Product API)
- Product Details Screen UI
- Rating Products
- Rating Product API / Exercise
- Solution
- Display Ratings
- Fetch Deal of The Day (Optional Exercise)
- Adding To Cart
- Displaying Cart Products
- Decreasing Quantity in Cart
- Address Screen
- Adding GPay/ Apple Pay
- Storing User Address & Ordering
- Viewing My Orders
- Viewing Order Details
- Admin - Viewing All Orders
- Admin - Change Order Status
- Total & Category-Wise Earnings
- Display Sales Chart
- Log Out
- Deployment to Heroku
- Testing on Android Device
Watch the full course below or on the freeCodeCamp.org YouTube channel (12-hour watch).