Build a Google Docs Clone with Flutter and Mongodb

Implement Google sign-in for Android in a Flutter app by configuring Google Cloud project, creating Android credentials, enabling scopes, adding test users, and integrating google-services.json with build setup.

Configure Google auth for iOS by creating credentials in Google Cloud console, adding the Google service plist to the iOS runner, and updating the Info.plist with the reverse client id.

Create an auth client id in the cloud console for a web application, set localhost:3000 as the authorized origin, and paste the client id into web index.html.

Create an authentication repository in flutter by configuring asset images, adding the google sign-in and http packages, and wiring a sign-in method with state management for later backend integration.

Set up riverpod providers and an auth repository to enable Google sign-in in a Flutter app, using ref and wrapping the app in provider scope; enable People API for sign-in.

Build a Node.js backend for a Google Docs clone by creating a server folder, initializing npm, and setting up an express app with nodemon and mongoose for MongoDB.

Set up a real-time express server using socket.io, json web token, and cors, configure middleware, and run on port 3001 to enable live updates and authenticated user sessions.

Establish a MongoDB Atlas cloud database for the docs clone app, then connect with mongoose using the connection string and verify MongoDB connected successfully.

Create a signup route in an Express backend for a Google Docs MongoDB app, and handle name, email, and profile pic from the front end while registering the router.

Model the user collection with a mongoose schema for name, email, and profile fields, all required. Convert the schema into a user model and export it for CRUD operations.

Test the sign up API with Postman by using the user model to read and create MongoDB data, check email existence, save new users, and return JSON with status codes.

Create a user data model in Flutter, implement JSON serialization with the Dart Data Class Generator, and configure a private host for API calls using a MongoDB-backed backend.

Learn to call the signup API from the client after Google sign-in, send user data as JSON, and manage results and errors with a result model.

Test the sign-in flow by signing in with Google, display the user's email from the provider on the home screen, show errors with snackbars, and use push replacement to navigate.

Generate a json web token on signup, store it in local storage, and implement an auth middleware to validate the token from the x-auth-token header and protect routes.

Create an auth route to fetch the user data behind the auth middleware, returning the user and token when authentication succeeds.

Store the user token on the device with shared preferences, creating a local storage repository with set token and get token functions; call set token on Google sign-in.

Implement client side check auth state by retrieving token, fetching user data with an authenticated get request, decoding user info, and storing the token for persistent login.

Learn to implement the Routemaster package in Flutter to manage dynamic links and authentication-based routing. Replace Navigator with Routemaster, configure router delegate and route maps for logged-in and logged-out states.

Implement an app bar with sign out and new document actions, using the auth repository to clear tokens and sign out from Google, returning to the login screen.

Create a new document screen and backend route to save documents in MongoDB via mongoose, using an id, uid, and initial 'untitled' title with a created at timestamp.

Create a document repository method that posts to the API /doc/create with token authentication, sending a document model with title, content, and created at.

Create a document function wired to a document repository provider, using token authentication, navigate to the document screen, register routes, and test data flow with MongoDB.

Fetch all a user's documents by implementing the /docs/me route with auth, retrieving documents via mongoose, and displaying them in a future builder list.

Design the document screen ui by building an app bar with a logo, a title text field, and a share action controlled by a title editing controller.

Learn to build a document editor in Flutter using the Flutter Quill text editor, set up the Quill toolbar and editor with a controller, and edit document content.

Implement a post route /doc/title with auth to update a document title, and call it from the document repository and screen to refresh the UI.

Fetch a document by ID using a new server route, update the title in the document screen, and reflect changes on both the document and home screens.

Establish a client-server socket connection using socket.io in a Flutter app, build a singleton socket client, configure the server, and handle a join event to create document rooms.

Explore real-time collaborative editing using sockets, typing events, and room-based broadcasting to synchronize document changes across clients in a flutter quill setup.

Implement real-time auto save for a Google Docs clone by emitting save events with delta data via sockets, updating MongoDB-backed documents every two seconds.

Learn to copy and share document links in a flutter google docs clone, using routemaster navigation, clipboard copy, and snackbar feedback, with backend emphasis on NodeJS, MongoDB, and Socket.io.