Flutter & Node JS Master Class: Amazon Clone with Admin Panel | Flutter ECommerce App

preview_player
Показать описание
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.

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:

Connect With Me Here:

#flutter #node #ecommerce
Рекомендации по теме
Комментарии
Автор

This guy is only 16 years old. Huge respect dude

CodeAshutosh
Автор

This is just impossible to grasp, how one person can have such amazing content. I haven't watch *yet* any of the videos, I'm still trying to make time for them, but when I have the time, oh boy.. I usually don't comment or put likes in videos but you sir will get it everywhere!! Huge thanks and keep up the good work!

xCalecax
Автор

Great course Rivaan! I'm stunned by the depth of it, and the fact that it's free is even crazier, you're helping a lot of people in becoming professional developers.

kahanx
Автор

Thanks, Rivaan! Learning a lot from you!

raad-sh
Автор

I must be honest. I usually never stick with long tutorials, usually I will watch 30 min or something and then put it aside. But with your tutorial I am already 3 hours straight watching it 😂😂😂

MsSplashIt
Автор

Awesome brother. For full stack project in Flutter with Node.js this guy and his this tutorial have it all. You don't need to waste your time poor searching anywhere.

Thank you Rivaan for this amazing tutorial. Keep it up. May Allah bless you

nahidfullstackdev
Автор

I never commented on Youtube this is my first time! This tutorial is a life saver! I only thanks

creatorTechnology
Автор

Oh my god, this looks like the complete package, can't wait to try this out.

BST-SLYR
Автор

I wish to complete this tutorial during the holidays after the semester ends. I am highly enthusiastic about this course and tons of learning is waiting for me.

dpxy
Автор

Bro, I was searching for the past two days! finally saw your video. 11 hours!!! too good man. thank you so much for your effort. easy to follow, better understanding.

arunpraseeth
Автор

My goodness 😱
I haven't started this course but you know what i am gonna try this from tommorow morning
I am sure this is gonna be a masterpiece video
I can't wait to start this ❤
Btw i can't imagine my self as a flutter developer without your YouTube channel and videos
Thank you very much bro
Love from gujarat ❤😍🤗👍

flutterdeveloper
Автор

Thank you so much for creating this guide! Keep doing full stacks guides they are the best!

VolantesAdHollander
Автор

Great video. Tip: before calling super.dispose(), dispose all the TextEditingController

elhadjbabacarcisse
Автор

Wow! what i love the most is that you used node js. thanks alot. you are adding value to our lifes.

thegospellight
Автор

This is an insane amount of knowledge in one video. Nice work, man.. and thank you!

slikk
Автор

Hey Rivaan,
Really glad to see this tutorial,
I have few questions,
1. Is this tutorial 100% complete ?
2. Can we use this apps database for website made on MERN stack which also uses mongo DB?
3. are you going to add any delivery boy module in it later?

tauseefahmed
Автор

Hi everyone!
I work in outsource company as a Junior flutter developer alone without any older flutter developer. I should make login module completely whith connection to my company backend. And of cause I got the problems but I remember that video!!! So again, huge thanks, Rivaan, I used this video and created my own backend to MongoDB and decided all connections to backend from my UI Login Module.
Thanks, Bro!
All the best!

seamensclubaihub
Автор

Amazing course bro! You are such a good tutor your teaching style is so much good

ghulammurtaza
Автор

Holy shit, wow, dude I genuinely appreciate you making this course, and for free, man thanks a lot!

kslash
Автор

Hi Rivaan, was wondering if you can create a flutter web tutorial? something like an admin dashboard or maybe a simple crm?
Your content are the best btw, everything in your channel are useful and great! You are a blessing to us all. Thank you!

mikeruusan
visit shbcf.ru