Sign in to confirm you’re not a bot
This helps protect our community. Learn more

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

freeCodeCamp.org
10.8M subscribers
300K views 2 years ago
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/flut... 💻 Colors and Images: https://github.com/RivaanRanawat/flut... ✏️ Rivaan Ranawat created this course. Check out his channel:    / rivaanranawat   📌 Rivaan's Discord Server:   / discord   ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Java... (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:1 …...more
...more

Run and Run without Debugging

2:12

App Bar

5:06

App Bar Theme

6:09

Color Scheme

7:54

Routes

10:39

Own Custom Error

14:59

Home Screen

17:02

Radio Button

20:19

Validations

24:28

Validator

26:41

Controllers

28:46

The Sign Up Button

32:30

Initialize Node Js

42:25

Change Package Name

42:53

Package Json

43:58

Dependencies

44:33

Mongoose

49:34

Mongodb

50:28

Api in Node Js

52:23

What Is Localhost

54:59

Callback Function

56:31

Depth Dependency

58:47

Install Nodemon

59:37

Create an Api

1:02:39

Create a Router

1:12:28

Middleware

1:17:46

Authenticate a Connection

1:29:25

Validate

1:37:03

Regex

1:37:48

User Type

1:40:50

Postman

1:54:19

Thunder Client

1:54:47
Flutter Mobile App + Node.js Back End Tutorial – Code an Amazon Clone [Full Course]
6.9KLikes
300,664Views
2022Jun 9
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/flut... 💻 Colors and Images: https://github.com/RivaanRanawat/flut... ✏️ Rivaan Ranawat created this course. Check out his channel:    / rivaanranawat   📌 Rivaan's Discord Server:   / discord   ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Java... (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

Follow along using the transcript.

freeCodeCamp.org

10.8M subscribers