Gmail Classifier App

A full-stack web application that allows users to log in with Google, fetch their last 15 emails from Gmail, and classify them into categories using Gemini (Google AI). Built for the MagicSlides.app Full-Stack Engineer Intern Assignment.

---

Table of Contents

• Features
• Tech Stack
• Setup Instructions
• Usage
• Categories
• Contact
• Folder Structure
• Application Flow

---

Features

• Google OAuth: Secure login with Google.
• Gemini API Key Input: User provides their Gemini API key, stored in localStorage.
• Fetch Emails: Retrieves the last 15 emails from the user's Gmail inbox.
• Classify Emails: Uses Gemini to classify emails as Important, Promotions, Social, Marketing, Spam, or General.
• Modern UI: Responsive, accessible, and visually consistent black & purple theme.
• No DB Required: Emails are stored in localStorage and React state.
• Safe HTML Rendering: Email content is sanitized on the backend before display.

Tech Stack

• Frontend: Next.js (App Router), React, Tailwind CSS (utility classes)
• Backend: Next.js API routes
• Auth: NextAuth.js (Google provider)
• APIs: Gmail API, Gemini (Google AI)

Setup Instructions

1. Clone the repository

git clone https://github.com/payallenka/techguy
cd techguy

2. Install dependencies

npm install

3. Configure Environment Variables

Create a .env.local file in the root directory with the following:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-random-secret
NEXTAUTH_URL=http://localhost:3000

• Get Google credentials from Google Cloud Console.
• Important: Only users whose emails have been added as test users in the Google Cloud OAuth consent screen can log in and use the app. If you are not added as a test user, you will not be able to access the app.
• Before submission, add theindianappguy@gmail.com as a test user in your Google Cloud OAuth settings.

4. Run the development server

npm run dev

5. Open the app

Go to http://localhost:3000 in your browser.

Usage

1. Enter your Gemini API key on the login page. This is stored in your browser's localStorage.
2. Login with Google. Grant access to your Gmail account.
3. View your last 15 emails. Click "Classify" to categorize them using Gemini.
4. Click any email to view its full, sanitized content.

Categories

• Important: Personal/work emails requiring attention
• Promotions: Sales, discounts, marketing
• Social: Social networks, friends, family
• Marketing: Newsletters, notifications
• Spam: Unwanted/unsolicited
• General: Anything else

Contact

For questions, please open an issue.

Folder Structure

techguy/
├── pages/
│   └── api/
│       └── gmail/
│           └── emails.ts         # API route for fetching and sanitizing emails
│       └── classify.ts           # API route for classifying emails
│   └── _app.tsx, index.tsx, ...  # Next.js app entry points
├── src/
│   └── app/
│       └── page.tsx              # Main frontend page (UI, logic)
│       └── layout.tsx, globals.css, ...
│   └── components/               # React components (AuthShowcase, etc.)
├── utils/
│   └── sanitizeEmailHtml.ts      # Email HTML sanitization helper
├── public/                       # Static assets (SVGs, etc.)
├── .env.local                    # Environment variables
├── README.md                     # This file
├── package.json, tsconfig.json, ...

Application Flow

1. User visits the app and is prompted to enter their Gemini API key and log in with Google.
2. After login, the app fetches the last 15 emails from the user's Gmail using the Gmail API.
3. Emails are sanitized on the backend and sent to the frontend for display.
4. User clicks "Classify" to send emails (with subjects/snippets) to the Gemini API for categorization.
5. Classified emails are displayed with category labels and color coding.
6. User can click any email to view its full, sanitized content.

---

Thank you!