Flutter Mobile App + Node.js Back End Tutorial – Code an Amazon Clone [Full Course]



Build a full stack e-commerce app with Flutter, Javascript, Node.js, Express, MongoDB and Mongoose.

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.

💻 Source Code: https://github.com/RivaanRanawat/flutter-amazon-clone-tutorial
💻 Colors and Images: https://github.com/RivaanRanawat/flutter-amazon-clone-tutorial/blob/master/lib/constants/global_variables.dart

✏️ Rivaan Ranawat created this course. Check out his channel: https://www.youtube.com/c/RivaanRanawat
📌 Rivaan’s Discord Server: https://discord.gg/Q8Rx8YWFVF

⭐️ Course Contents ⭐️
(0:00:03) Introduction & Demo
(0:01:04) Setting Up The Flutter Project
(0:05:30) Setting Up Themes
(0:09:05) Folder Structure
(0:10:31) Setting Up Routes
(0:16:58) Auth Screen UI
(0:38:57) What is Node.js
(0:39:53) Node.js Installation
(0:41:51) Initialising Node
(0:45:06) First Node.js Script
(0:46:47) NPM & Dependencies
(0:52:25) Creating Server
(0:58:39) Nodemon
(1:02:37) Create your First API
(1:08:49) Exercise 1: Create GET API
(1:09:19) Solution 1
(1:20:12) Routers
(1:17:45) Middleware
(1:21:33) Sign up Route
(1:26:31) Connecting to MongoDB
(1:33:17) Creating User Model
(1:42:34) Sign up Route cntd
(2:09:19) Connecting Sign Up Route With Client Side
(2:31:04) Adding TextField & Form Validator
(2:34:45) Sign In Route / Exercise 2
(2:37:12) Creating Sign In Route (Solution 2)
(2:47:57) Connecting Sign In Route with Client Side
(3:04:01) Persisting State
(3:25:11) Creating BottomNavBar
(3:36:33) Account Screen UI
(4:04:39) Home Screen UI
(4:41:35) Admin Screen BottomNavBar
(4:49:38) Add Product Screen UI
(5:08:21) Picking Images
(5:17:16) Admin – Selling Product
(5:28:43) Create Admin Middleware / Exercise
(5:29:24) Solution
(5:31:39) Sell Product Contd.
(5:48:36) Admin – Fetching & Displaying All Products
(6:08:39) Admin – Deleting Product
(6:17:09) Self Exercise (Add Product Realtime)
(6:17:43) Getting & Displaying Products Based on Category
(6:41:19) Searching & Displaying Products
(6:47:59) Optional Exercise (Creating Search Product API)
(7:06:14) Product Details Screen UI
(7:25:58) Rating Products
(7:31:09) Rating Product API / Exercise
(7:31:43) Solution
(7:41:00) Display Ratings
(7:50:34) Fetch Deal of The Day (Optional Exercise)
(8:05:05) Adding To Cart
(8:31:46) Displaying Cart Products
(8:52:08) Decreasing Quantity in Cart
(9:00:33) Address Screen
(9:10:53) Adding GPay/ Apple Pay
(9:32:56) Storing User Address & Ordering
(9:55:55) Viewing My Orders
(10:06:07) Viewing Order Details
(10:28:37) Admin – Viewing All Orders
(10:37:42) Admin – Change Order Status
(10:45:53) Total & Category-Wise Earnings
(11:04:34) Display Sales Chart
(11:09:44) Log Out
(11:14:29) Deployment to Heroku
(11:19:55) Testing on Android Device
(11:21:46) (Bonus) Flutter 3 (Everything Works!)
(11:24:35) Material 3

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

source

This Post Has 21 Comments

  1. at 3:23:15, please let me know how you can pass context variable in getUserDate of initState(), because I don't see any declarations in initState function. Thanks!

  2. Eceb Guys

    THALAIVAR RASIGA MANDRAM SAARBAGA VIDEO VETRI ADAYA VALTHUKAL

  3. UltimateRich

    Hello,
    At 3:00:00, When i start to write the Provider and Navigator lines, a "Do not use BuildContexts across async gaps" error appears. Any fixes for this?

  4. Alejandro Lazo

    Thank you very much for this wonderful content. I was wondering if you could do a tutorial off an Amazon Delivery Package App. like Getting Email Alerts on delivery Status, scanning package code, and a Picture of the package Once is delivered, thanks.

  5. In case any one of you is getting Found non-callable @@iterator, make sure to add curly braces in res.json({token, …user._doc});

  6. Abdulsamet Aybaz

    He did 11 hours and I did one month 😀 by the way thanks for tutorial

  7. UltimateRich

    Hello , I am new to using flutter, this is my introduction video!
    Maybe I am not searching correctly or did not hear him explain it, but how does he do the "Wrap with Container" option in 31:35?
    I tried searching it up, but all it shows me is a wrap function. Many thanks in advance.

  8. Zeeshan Anwar

    when i attach bacend with my ui signup gives me mesage connection refused in snakbar
    how i can fix it?

  9. Wael sky7

    Please need tutorials on making repository patterns and services using javascript.

  10. Prasad Ranjane

    After creating the Sign In route and printing the res body, when I type in the user credentials in the sign in text fields I get a snack bar alert as User with same email address does not exist. I have changed the URI everywhere it is used still I am getting this problem. What should I do?

  11. Takor Ronald

    An amazing course. So easy to follow. I got stock connecting the app to the database. I get an XMLHttpRequest error, this happened when i replaced the localhost with my IP address. I am a bigginer and i need more guidance. But i am impressed with what i have been able to accomplish up to this point. Thanks

  12. natnael fitsum

    Great course, thank you. But Google pay button is not showing on my device when I use the pay plugin how can I fix this. I am from Ethiopia

  13. Sara Alruwais

    I get this error when I try to run your project. How can I fix it?

    "FlutterError (No ScaffoldMessenger widget found.
    MyApp widgets require a ScaffoldMessenger widget ancestor.
    The specific widget that could not find a ScaffoldMessenger ancestor was:
    MyApp "

  14. Emo

    thank you so much

  15. Sir I am getting an error of invalid media type: expected no more input . In headers parameter

  16. Hi great course dear. Plz tell me one thing . Why we are using our own ip adres ? what if we are developing app for someone else for release purpose? Why are we putting our ip adres statically???

  17. skyGwork

    Please help me, I'm getting this error during testing

    "error": "Cannot destructure property 'name' of 'req.body' as it is undefined."

  18. Kevin KONE

    Thank you very much, Sir Rivaan. I learned a lot of things during this tutorial.🙏🙏🙏🙏

Leave a Reply