technifyedWeekly list
Menu
Opportunities
Learn
Prepare
Get the weekly list

freeCodeCamp

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

via YouTube Free video

Compare with others

Overview

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

❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)

⭐️ 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

Chapters 60

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

Advantages and disadvantages

Advantages

  • Completely free, with no ads inside the lessons.
  • Project-based: you build real apps as you learn.
  • freeCodeCamp's own certifications are free and well known among developers.
  • Free, one long video that covers a topic end to end.
  • Use the chapters to jump to what you need.
  • 308,764 views, so help and notes are easy to find.
  • Completely free.
  • Self-paced: start any time.

Disadvantages

  • YouTube videos are long single recordings; you pace yourself.
  • Less theory than a university course.
  • No exercises or certificate: code along to make it stick.
  • No certificate.
  • No graded assignments or feedback.

Some points apply to every course of this kind; see how we rank.

Free

  • Free: Watch on YouTube, no account needed.
  • Certificate: None. Code or take notes along to make it stick.

freeCodeCamp is in Tier 3: good universities, respected companies, nonprofits and well-known teachers of our institution ranking (78/100). Free full courses and certifications; practical, but not university-level depth.

Similar courses

Compare these

Massachusetts Institute of Technology

MIT 6.01SC Introduction to EECS I

Instructor: Dennis Freeman, Kendra Pugh This course provides an integrated introduction to electrical engineering and computer science, including modern software engineering, linear systems analysis, electronic circuits, and decision-making. The lecture videos provide an overview of each topic, whi…

  • Free video
  • 27 videos, 17 hours

Harvard University

CS50's Introduction to Computer Science

An introduction to the intellectual enterprises of computer science and the art of programming.

  • Free to audit
  • 12 weeks, 5 - 14 hours per week

Massachusetts Institute of Technology

MIT MAS.S62 Cryptocurrency Engineering and Design, Spring 2018

Instructor: Neha Narula, Tadge Dryja View the complete course: https://ocw.mit.edu/MAS-S62S18 YouTube Playlist: https://www.youtube.com/playlist?list... This course looks at the design of Bitcoin and other cryptocurrencies and how they function in practice, focusing on cryptography, game theory, an…

  • Free video
  • 20 videos, 25 hours

Harvard University

CS50's Introduction to Programming with Python

An introduction to programming using Python, a popular language for general-purpose programming, data science, web programming, and more.

  • Free to audit
  • 10 weeks, 3 - 6 hours per week

Harvard University

CS50's Computer Science for Business Professionals 2017

This course is a variant of Harvard College's introduction to computer science, CS50, designed especially for business professionals. Whereas CS50 itself takes a bottom-up approach, emphasizing mastery of low-level concepts and implementation details thereof, this course takes a top-down approach,…

  • Free video
  • 6 videos, 6.5 hours