SubtleMail

SubtleMail is an AI-powered web application that generates professional, strategically crafted email responses for delicate workplace situations. Perfect for those moments when you need to communicate assertively while maintaining professionalism and diplomacy.

🎯 Features

• Smart Email Generation: AI-powered responses that strike the perfect balance between assertiveness and professionalism
• Tone Customization: Choose from multiple professional tones (Professional but firm, Diplomatic, Assertive but respectful, Polite but direct)
• Quick Templates: Pre-built examples for common workplace scenarios
• Saved Templates Page: View all your saved templates on a dedicated /templates page
• Copy from Templates: One-click copy of subject and body from any saved template
• Modern UI: Clean, dark-themed interface with responsive design
• Copy to Clipboard: One-click copying of generated emails
• Toast Notifications: User-friendly error handling and feedback

🏗️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS - Styling
• React Hot Toast - Toast notifications
• React Icons - Icon library

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• TypeScript - Type safety
• Prisma - Database ORM
• PostgreSQL - Database
• CORS - Cross-origin resource sharing
• dotenv - Environment variable management

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/mo-renike/subtleMail
   cd subtleMail

2. Install dependencies

   # Install client dependencies
   cd client
   npm install
   
   # Install server dependencies
   cd ../server
   npm install

3. Set up environment variables

   # In the server directory, create a .env file
   cd server
   touch .env

   Add the following to your .env file:

   PORT=3000
   DATABASE_URL="postgresql://username:password@localhost:5432/subtlemail"
   # Add your OpenAI API key when implementing AI features
   # OPENAI_API_KEY=your_api_key_here

4. Set up the database

   # Install Prisma CLI globally (if not already installed)
   npm install -g prisma
   
   # Generate Prisma client
   npx prisma generate
   
   # Run database migrations
   npx prisma migrate dev --name init
   
   # (Optional) Open Prisma Studio to view your data
   npx prisma studio

5. Start the development servers

   # Start the backend server (from server directory)
   npm run dev
   
   # In a new terminal, start the frontend (from client directory)
   cd client
   npm run dev

📖 Usage

1. Fill out the form with your situation details:

   • Title: Brief description of the issue
   • Situation: Detailed explanation of what happened
   • Recipient: Who you're writing to
   • Tone: Choose the appropriate professional tone

2. Use Quick Examples or create your own scenario

3. Generate Response - Click the button to get your AI-crafted email

4. Save Template - After generating a response, click 'Save Template' to store it for future use (requires login)

5. View Saved Templates

   • Click the 'Saved Templates' button at the top of the home page, or go to /templates
   • Browse all your saved templates, including their generated subject and body
   • Use the copy button to quickly copy the subject and body to your clipboard

6. Copy and Use - Copy the generated or saved email to your clipboard and use it in your email client

🎨 UI Components

Main Form

• Clean, dark-themed interface
• Responsive design for all devices
• Form validation and error handling

Response Section

• Professional email preview
• Subject line and body display
• One-click copy functionality
• Success feedback with checkmark

Quick Examples

• Pre-built templates for common scenarios
• Easy one-click form population
• Visual indicators and hover effects

Saved Templates Page

• Dedicated /templates page for all your saved templates
• Displays template details, generated subject, and body
• One-click copy for any saved template
• Consistent UI and feedback as the home page

🔧 Development

Project Structure

subtleMail/
├── client/                 # Next.js frontend
│   ├── app/               # App Router (pages, API routes, components, data)
│   │   ├── api/           # API routes (auth, etc.)
│   │   ├── components/    # React components
│   │   ├── data/          # Static/data files
│   │   ├── home/          # Home page
│   │   ├── layout.tsx     # App layout
│   │   └── page.tsx       # Main page
│   ├── public/            # Static assets
│   ├── middleware.ts      # Next.js middleware
│   ├── package.json       # Frontend dependencies & scripts
│   └── ...
├── server/                # Express.js backend
│   ├── src/               # Source code
│   │   ├── controllers/   # Route controllers (auth, email)
│   │   ├── middleware/    # Express middleware
│   │   ├── routes/        # Express routes (auth, email)
│   │   └── index.ts       # Main server file
│   ├── prisma/            # Database schema and migrations
│   │   ├── migrations/    # Prisma migrations
│   │   └── schema.prisma  # Prisma schema
│   ├── app/               # Generated Prisma client
│   ├── package.json       # Backend dependencies & scripts
│   └── ...
└── README.md

Database Models

The application uses PostgreSQL with Prisma ORM and includes the following models:

• User: Stores user information (id, email, name, timestamps)
• EmailTemplate: Stores email templates with situation details and tone preferences
• GeneratedResponse: Stores AI-generated email responses linked to templates and users

Relationships:

• Users can have multiple email templates and generated responses
• Email templates belong to users and can have multiple generated responses
• Generated responses are linked to both users and email templates

Available Scripts

Client (Next.js)

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

Server (Express.js)

npm run dev         # Start development server with nodemon & ts-node
npm run build       # Compile TypeScript to JavaScript (output in dist/)
npm run start       # Start production server (runs dist/index.js)
npm run lint        # Run ESLint
npm run postinstall # Generate Prisma client after install
npx prisma generate       # Generate Prisma client
npx prisma migrate dev    # Run database migrations
npx prisma studio         # Open Prisma Studio

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Next.js and Express.js
• Styled with Tailwind CSS
• Icons from React Icons
• Toast notifications with React Hot Toast