Google Docs Clone: A responsive web app that lets you edit and save docs on the go

A responsive web app that lets you edit and save docs on the go. Changes are persistent and the document gets saved automatically in realtime.

Experience a rich text editor with smart editing and styling tools to help you easily format text and paragraphs. Choose from fonts, add links, images, and drawings.

Login using your google account to get started.

Link to the Web App: https://google-docs-cloned.vercel.app/

Tech Stack

• Next.js
• React
• Firebase
• NextAuth.js
• Draft.js
• Tailwind CSS
• material-tailwind

Features

• document gets saved automatically in realtime
• Login using Google
• Server-side Rendering (SSR)
• rich text editor
• Responsive Design
• Material Design

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

It uses the new Just-in-Time Mode for Tailwind CSS.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).