Assignment details:
Objective
Your task is to build and deploy a full-stack web application that allows users to:
Sign up and log in using Google authentication.
Create and edit a text-based letter (like a simple word processor).
Save the letter to the user's Google Drive using the Google Drive API.
Requirements
Front-End: React (Preferred) or Angular/Vue.js
Back-End: Node.js with Express (Preferred) or Python with Flask/Django
Database: PostgreSQL, MySQL, or MongoDB (if needed)
Authentication: Google OAuth (via Firebase Auth or Passport.js)
Storage API: Google Drive API
Deployment: Any cloud provider (Netlify, Vercel, Heroku, AWS, Azure, or GCP)
Version Control: GitHub or GitLab repository
Features & Functionalities
Implement Google Sign-In so users can authenticate using their Google accounts.
Ensure secure session management (JWT or session-based authentication).
Provide a simple text editor where users can write and format a letter.
Allow users to save drafts within the application before uploading to Google Drive.
Ensure a user-friendly UI with minimal distractions.
Implement Google Drive API to allow users to save letters directly to their Google Drive.
Save letters in Google Docs format.
Allow users to retrieve and view their saved letters from Google Drive.
Ensure proper OAuth scopes and permissions to prevent unauthorized access.
Deploy the front-end and back-end so the application is accessible via a public URL.
Provide a .env.example file for environment variables such as API keys.
Implement folder organization in Google Drive (e.g., automatically create a "Letters" folder for saved documents).
Add rich text editing features (bold, italic, lists, etc.).
Implement role-based access control (e.g., admin and regular users).
Add real-time collaboration (Google Docs-style editing with WebSockets).
I want the full application with every bonus optional feautures also...
I'll help you build a full-stack web application that allows users to create, edit, and save letters to Google Drive. Let's use Next.js for both frontend and backend, which gives us a seamless full-stack experience 1.
We'll create a Next.js application with:
Let's start by setting up the project:
To get this application up and running, follow these steps:
Install dependencies:
npm installSet up environment variables:
.env.example to .env.localFill in the required environment variables:
Set up the database:
npx prisma db pushRun the development server:
npm run devThis application includes all the required features:
Google OAuth Authentication:
Letter Creation & Editing:
Google Drive API Integration:
Bonus Features:
To deploy this application to Vercel:
You might want to consider these enhancements:
This application provides a solid foundation that you can extend with additional features as needed.
Please make sure to add the following environment variables to your project:
Great! Now that you've added the Google OAuth credentials to your Vercel project, you're one step closer to getting your letter editor application up and running.
You'll need a PostgreSQL database for this application. Vercel offers a convenient Postgres database that integrates seamlessly with your project:
DATABASE_URL environment variable to your projectYou also need to add a NEXTAUTH_SECRET environment variable for secure session management:
Add a new variable named NEXTAUTH_SECRET with a secure random string
openssl rand -base64 32Make sure your Google OAuth credentials are properly configured:
Add your Vercel deployment URL to the "Authorized JavaScript origins" and "Authorized redirect URIs"
https://your-vercel-app.vercel.apphttps://your-vercel-app.vercel.app/api/auth/callback/googleNow you're ready to deploy your application:
After deployment, you need to run the Prisma migrations:
npm i -g vercelvercel loginvercel linkvercel env pull .env.localnpx prisma db pushOnce deployed, you should test the following functionality:
If you encounter any issues:
npx prisma db pushLet me know if you need any clarification or encounter any issues during the setup process!