Kashaf Abdullah

Posted on May 9

From Raw Text to Formatted Word Doc in Your Drive

#ai #webdev #programming #googledrive

Building a Serverless Notes App

I wanted a simple tool where I could paste raw text and have it automatically saved as a formatted Word document in my Google Drive – no server, no database, just a clean React app. That's how Notes to Drive was born.

The Problem

Most note taking apps are either too complex or don't give you Word documents. I wanted something minimal: type text, pick a folder, save as .docx to Drive. Simple. But building it came with some real challenges I didn't expect.

What I Used

The entire app is built with React and Vite.

For generating Word documents inside the browser, I used docx.js loaded via CDN (not npm) because the npm version is Node.js only and crashes in the browser.

To read existing .docx files for the "append" feature, I used mammoth.js, also via CDN.

Authentication and Drive access is handled entirely through Google Identity Services and the Google Drive REST API v3.

Setting Up Google Drive API

This was the trickiest part. Here's what you need to do:

Step 1: Go to Google Cloud Console and create a new project

Step 2: Enable the Google Drive API

Step 3: Set up an OAuth consent screen

Set the app to External

Add your own email as a test user (important – without this you get a 403 error)

Add the scope "drive.file" for uploading and "drive.readonly" for listing folders

Step 4: Create an OAuth 2.0 Client ID under Credentials

Set application type to Web Application

Add your localhost URL – in Vite's case that's http://localhost:5173 (not 3000, which tripped me up initially)

Step 5: Copy the Client ID and store it in a .env file as VITE_GOOGLE_CLIENT_ID

How the App Works

When a user signs in, the app uses Google Identity Services Token Client to get an OAuth access token entirely in the browser – no server callback needed.

It then:

Fetches the user's name from the Google userinfo endpoint

Loads all their Drive folders via the Drive API

The user can:

Select an existing folder from a dropdown

Type a new folder name and create it on the spot

Once a folder is selected, they type a title and their raw text, and hit save.

The Magic: Generating Word Documents

The raw text gets passed to docx.js which builds a proper Word document in memory with:

A heading

A timestamp

Each line of text as a formatted paragraph

Important: Use Packer.toBlob() – not Packer.toBuffer() or Packer.toArrayBuffer(). Both of those fail silently or throw errors in browser environments.

Uploading to Google Drive

The resulting Blob is uploaded to Google Drive using the multipart upload endpoint with FormData:

One part for the file metadata (including the parent folder ID)

One part for the actual file content

For updating existing files, the same endpoint is called with PATCH instead of POST.

The "Append to Existing" Feature

This was tricky. Here's how it works:

Download the selected .docx file from Drive

Extract its text using mammoth.js

Merge it with the new content under a new section heading

Rebuild the full document

Re-upload it to replace the original

Deployment to Netlify

Step 1: Run npm run build

Step 2: Drag the dist folder to Netlify

Step 3: Add VITE_GOOGLE_CLIENT_ID as an environment variable in site settings

Step 4: Go back to Google Cloud Console and add your Netlify URL to the Authorized JavaScript Origins of your OAuth client

Important Note: While the app is in Testing mode on Google Cloud, only emails added as test users can sign in. To make it publicly accessible, you need to publish the app to Production from the OAuth consent screen.