Creating a Google Docs clone will help you learn a lot of new concepts.
We just published a full course on the freeCodeCamp.org YouTube channel that will teach you how to use Flutter to create a Google Docs clone.
Rivaan Ranawat created this course. Rivaan has created many popular technical courses about a variety of topics.
This tutorial is designed for beginners in Node.js and no prior knowledge Javascript is required. You will be using Flutter, Node, Express, Socket, MongoDB and Riverpod.
The clone you build has the following features:
- Google Authentication (without Firebase)
- State Persistence
- Creating new Documents
- Viewing List of Documents
- Updating title of Document
- Link sharing
- Auto saving
- Collaborative Editing in Rich Text Editor
- Sign Out
Here are all the sections in this course:
- Creating Flutter Project
- Designing Login Screen
- Google Cloud Platform oAuth Client ID
- Google Auth Android Setup
- Google Auth iOS Setup
- Google Auth Web Setup
- Important Note on Auth
- Running on Web on specific port
- Google Sign In using Node.js
- What is Node.js?
- Creating & setting up Node Server
- MongoDB Setup
- Creating Signup API
- Calling Signup API - Client Side
- Persisting the State - Explanation
- Generating JWT
- Auth Middleware
- Local Storage
- Testing on Android
- Routing
- Creating NavBar
- Signing Out
- Creating New Document
- Displaying all documents created by Me
- Designing Document Screen
- Updating Document Title
- Socket Introduction & Connection
- Collaborative Editing
- Auto-Save
- Routing Back to Main Page
- Sharing Link
- Conclusion
Watch the full course below or on the freeCodeCamp.org YouTube channel (5-hour watch).