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.
Common Pitfalls I Ran Into
Using localhost:3000 instead of 5173 for Vite
Forgetting to add test users – got 403 error
Using Packer.toBuffer() instead of Packer.toBlob()
Not adding the Netlify URL to Authorized JavaScript Origins
Links
Written by Kashaf Abdullah
Software Engineer | MERN Stack | Web Development