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
- Technology Stack
-
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
- User Authentication (Google OAuth)
-
Implement Google Sign-In so users can authenticate using their Google accounts.
-
Ensure secure session management (JWT or session-based authentication).
- Letter Creation & Editing
-
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.
- Google Drive API Integration
-
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.
- Deployment
-
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.
- Bonus Features (Optional)
-
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...
Building a Full-Stack Letter Editor with Google Drive Integration
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.
Solution Overview
We'll create a Next.js application with:
- Google OAuth authentication using NextAuth.js
- A rich text editor for letter creation and editing
- Google Drive API integration for saving letters
- Deployment on Vercel
Let's start by setting up the project:
Project Setup Instructions
To get this application up and running, follow these steps:
- Clone the repository to your local machine
Install dependencies:
npm installSet up environment variables:
- Copy
.env.exampleto.env.local Fill in the required environment variables:
- Create a Google OAuth client ID and secret from the Google Cloud Console
- Enable the Google Drive API in your Google Cloud project
- Set up a PostgreSQL database (you can use Vercel Postgres)
- Copy
Set up the database:
npx prisma db pushRun the development server:
npm run dev
Features Implemented
This application includes all the required features:
Google OAuth Authentication:
- Users can sign in with their Google accounts
- Secure session management with NextAuth.js
Letter Creation & Editing:
- Rich text editor with formatting options (bold, italic, underline, headings, lists, text alignment)
- Draft saving functionality
Google Drive API Integration:
- Save letters directly to Google Drive as Google Docs
- Automatic creation of a "Letters" folder in Google Drive
- Retrieve and edit saved letters
Bonus Features:
- Folder organization in Google Drive (automatic "Letters" folder)
- Rich text editing features (bold, italic, lists, headings, text alignment)
- Dark mode support
- Responsive design for mobile and desktop
Deployment
To deploy this application to Vercel:
- Push your code to GitHub
- Connect your GitHub repository to Vercel
- Set up the required environment variables in the Vercel dashboard
- Deploy the application
Next Steps
You might want to consider these enhancements:
- Add real-time collaboration using WebSockets or the Google Docs API
- Implement role-based access control for team collaboration
- Add more advanced text formatting options
- Implement document templates
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.
Next Steps to Complete Your Setup
1. Set Up the Database
You'll need a PostgreSQL database for this application. Vercel offers a convenient Postgres database that integrates seamlessly with your project:
- Go to your Vercel project dashboard
- Navigate to the "Storage" tab
- Click "Connect Database" and select "Postgres"
- Follow the setup wizard to create a new Postgres database
- Vercel will automatically add the
DATABASE_URLenvironment variable to your project
2. Set Up NextAuth Secret
You also need to add a NEXTAUTH_SECRET environment variable for secure session management:
- Go to your Vercel project settings
- Navigate to the "Environment Variables" section
Add a new variable named
NEXTAUTH_SECRETwith a secure random string- You can generate one with:
openssl rand -base64 32
- You can generate one with:
3. Configure Google OAuth
Make sure your Google OAuth credentials are properly configured:
- Go to the Google Cloud Console
- Select your project
- Navigate to "APIs & Services" > "Credentials"
- Edit your OAuth client ID
Add your Vercel deployment URL to the "Authorized JavaScript origins" and "Authorized redirect URIs"
- Add:
https://your-vercel-app.vercel.app - Add:
https://your-vercel-app.vercel.app/api/auth/callback/google
- Add:
- Enable the Google Drive API in your Google Cloud project if you haven't already
4. Deploy Your Application
Now you're ready to deploy your application:
- Push your code to GitHub
- Connect your GitHub repository to Vercel if you haven't already
- Vercel will automatically deploy your application
5. Run Database Migrations
After deployment, you need to run the Prisma migrations:
- Install the Vercel CLI if you haven't already:
npm i -g vercel - Log in to Vercel:
vercel login - Link your project:
vercel link - Pull the environment variables:
vercel env pull .env.local - Run the Prisma migration:
npx prisma db push
Testing Your Application
Once deployed, you should test the following functionality:
- Authentication: Sign in with your Google account
- Letter Creation: Create a new letter with the rich text editor
- Google Drive Integration: Save the letter and verify it appears in your Google Drive
- Letter Management: Edit and delete letters
Troubleshooting
If you encounter any issues:
- Authentication Problems: Check that your Google OAuth credentials are correctly configured and that the redirect URIs match your deployment URL
- Database Issues: Verify that your Prisma schema has been properly deployed with
npx prisma db push - Google Drive API: Make sure the Google Drive API is enabled in your Google Cloud project and that you've granted the necessary permissions
Let me know if you need any clarification or encounter any issues during the setup process!