Chapters (33)
- 0:00Intro
- 0:57Creating Flutter Project
- 2:56Designing Login Screen
- 9:24Google Cloud Platform oAuth Client ID
- 13:00Google Auth Android Setup
- 15:30Google Auth iOS Setup
- 17:25Google Auth Web Setup
- 19:17Important Note on Auth
- 20:39Running on Web on specific port
- 21:19Google Sign In using Node.js
- 32:45What is Node.js?
- 35:53Creating & setting up Node Server
- 54:00MongoDB Setup
- 1:01:01Creating Signup API
- 1:32:16Calling Signup API - Client Side
- 2:00:04Persisting the State - Explanation
- 2:03:52Generating JWT
- 2:07:31Auth Middleware
- 2:22:50Local Storage
- 2:41:15Testing on Android
- 2:42:23Routing
- 2:51:28Creating NavBar
- 2:53:44Signing Out
- 2:59:52Creating New Document
- 3:23:32Displaying all documents created by Me
- 3:37:57Designing Document Screen
- 3:55:39Updating Document Title
- 4:10:20Socket Introduction & Connection
- 4:29:23Collaborative Editing
- 4:49:26Auto-Save
- 4:58:01Routing Back to Main Page
- 4:59:45Sharing Link
- 5:01:42Conclusion
Show the creator's full description
Build a responsive cross-platform Google Docs Clone using Flutter & Node.js. This tutorial is designed for beginners in Node.js and no prior knowledge Javascript is required. This course will go through Google Authentication WITHOUT Firebase, keeping the users logged in, creating new documents, viewing the list of documents created by user, updating the title of the document, sharing link of the document, adding a rich text editor, collaboratively editing with as many users as you want and creating responsive design. We will be using Flutter, Node, Express, Socket, MongoDB and Riverpod.
✏️ Course created by Rivaan Ranawat. Check out his channel: https://www.youtube.com/c/RivaanRanawat
💻 Source Code: https://github.com/RivaanRanawat/flutter-google-docs-clone
Special Thanks: @Aadhi Arun
Prerequisites: Flutter & Dart Basics
Flutter Version: 3.3
❤️ 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)
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:57) Creating Flutter Project
⌨️ (0:02:56) Designing Login Screen
⌨️ (0:09:24) Google Cloud Platform oAuth Client ID
⌨️ (0:13:00) Google Auth Android Setup
⌨️ (0:15:30) Google Auth iOS Setup
⌨️ (0:17:25) Google Auth Web Setup
⌨️ (0:19:17) Important Note on Auth
⌨️ (0:20:39) Running on Web on specific port
⌨️ (0:21:19) Google Sign In using Node.js
⌨️ (0:32:45) What is Node.js?
⌨️ (0:35:53) Creating & setting up Node Server
⌨️ (0:54:00) MongoDB Setup
⌨️ (1:01:01) Creating Signup API
⌨️ (1:32:16) Calling Signup API - Client Side
⌨️ (2:00:04) Persisting the State - Explanation
⌨️ (2:03:52) Generating JWT
⌨️ (2:07:31) Auth Middleware
⌨️ (2:22:50) Local Storage
⌨️ (2:41:15) Testing on Android
⌨️ (2:42:23) Routing
⌨️ (2:51:28) Creating NavBar
⌨️ (2:53:44) Signing Out
⌨️ (2:59:52) Creating New Document
⌨️ (3:23:32) Displaying all documents created by Me
⌨️ (3:37:57) Designing Document Screen
⌨️ (3:55:39) Updating Document Title
⌨️ (4:10:20) Socket Introduction & Connection
⌨️ (4:29:23) Collaborative Editing
⌨️ (4:49:26) Auto-Save
⌨️ (4:58:01) Routing Back to Main Page
⌨️ (4:59:45) Sharing Link
⌨️ (5:01:42) Conclusion
Resources:
SHA-1 Key: https://stackoverflow.com/questions/15727912/sha-1-fingerprint-of-keystore-certificate
Node Website: http://nodejs.org
NPM Website: https://www.npmjs.com
MongoDB: http://mongodb.com/
More about Status Codes: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.