This is Flutter E-Commerce app with Backend. This Shopping App uses Javascript, Node, Express, MongoDB and Mongoose and is designed for complete beginners. This 12 hour tutorial also covers Migration to Flutter 3 and preview of app with Material 3! This Flutter project also covers the complete UI of Amazon including features like auth with email/password, cart, searching products, fetching them based on category, rating them, fetching deal of the day, checking out using GPay/Apple Pay, viewing the orders, the details of the order along with their status which can be changed from the admin panel, view total sales and graph of sales based on category.
In this tutorial, you’ll learn to build the UI of Amazon from scratch, create REST API’s, store data in MongoDB using Mongoose, use REST API’s with Flutter & Dart using Models, use Flutter State Management tool as Provider and create a cross platform app that works on Android and iOS.
📌 Discord Server: https://discord.gg/Q8Rx8YWFVF
Source Code: https://github.com/RivaanRanawat/flutter-amazon-clone-tutorial
Flutter Clones Playlist: https://youtube.com/playlist?list=PLlzmAWV2yTgCjoZNF3hLX3puYJir9vSQO
Timestamps:
(00:00:00) Introduction & Demo
(00:01:01) Setting Up The Flutter Project
(00:05:27) Setting Up Themes
(00:09:02) Folder Structure
(00:10:28) Setting Up Routes
(00:16:55) Auth Screen UI
(00:38:54) What is Nodejs
(00:39:50) Nodejs Installation
(00:41:48) Initialising Node
(00:45:03) First Nodejs Script
(00:46:44) NPM & Dependencies
(00:52:22) Creating Server
(00:58:36) Nodemon
(01:02:34) Create your First API
(01:08:46) Exercise 1: Create GET API
(01:09:16) Solution 1
(01:2:09) Routers
(01:17:42) Middleware
(01:21:30) Sign up Route
(01:26:28) Connecting to MongoDB
(01:33:14) Creating User Model
(01:42:31) Sign up Route cntd
(02:09:16) Connecting Sign Up Route With Client Side
(02:31:01) Adding TextField & Form Validator
(02:34:42) Sign In Route / Exercise 2
(02:37:09) Creating Sign In Route (Solution 2)
(02:47:54) Connecting Sign In Route with Client Side
(03:03:58) Persisting State
(03:25:08) Creating BottomNavBar
(03:36:30) Account Screen UI
(04:04:36) Home Screen UI
(04:41:32) Admin Screen BottomNavBar
(04:49:35) Add Product Screen UI
(05:08:18) Picking Images
(05:17:13) Admin – Selling Product
(05:28:40) Create Admin Middleware / Exercise
(05:29:21) Solution
(05:31:36) Sell Product Contd.
(05:48:33) Admin – Fetching & Displaying All Products
(06:08:36) Admin – Deleting Product
(06:17:06) Self Exercise (Add Product Realtime)
(06:17:40) Getting & Displaying Products Based on Category
(06:41:16) Searching & Displaying Products
(06:47:56) Optional Exercise (Creating Search Product API)
(07:06:11) Product Details Screen UI
(07:25:55) Rating Products
(07:31:06) Rating Product API / Exercise
(07:31:40) Solution
(07:40:57) Display Ratings
(07:50:31) Fetch Deal of The Day (Optional Exercise)
(08:05:02) Adding To Cart
(08:31:43) Displaying Cart Products
(08:52:05) Decreasing Quantity in Cart
(09:00:30) Address Screen
(09:10:50) Adding GPay/ Apple Pay
(09:32:53) Storing User Address & Ordering
(09:55:52) Viewing My Orders
(10:06:04) Viewing Order Details
(10:28:34) Admin – Viewing All Orders
(10:37:39) Admin – Change Order Status
(10:45:50) Total & Category-Wise Earnings
(11:04:31) Display Sales Chart
(11:09:41) Log Out
(11:14:26) Deployment to Heroku
(11:19:52) Testing on Android Device
(11:21:43) (Bonus) Flutter 3 (Everything Works!)
(11:24:32) Material 3
Resources:
Colors and Images: https://github.com/RivaanRanawat/flutter-amazon-clone-tutorial/blob/master/lib/constants/global_variables.dart
Connect With Me Here:
Instagram: https://instagram.com/optimalcoding
GitHub: https://github.com/rivaanranawat
Linkedin: https://www.linkedin.com/in/rivaan-ranawat
Facebook: https://www.facebook.com/rivaan.ranawat/
Mail: namanrivaan@gmail.com
Medium: https://namanrivaan.medium.com
Twitter: https://twitter.com/RanawatRivaan
#flutter #node #ecommerce
Comments