Email AI

A monorepo project with a Vue client and Express server for an Email AI application.

Project Structure

• packages/client: Vue.js frontend application
• packages/server: Express.js backend API
• packages/shared: Shared types and utilities

Prerequisites

• Node.js (v18.0 or higher)
• pnpm (v7.0 or higher)

Setup

1. Install dependencies:

pnpm install

2. Build shared package:

cd packages/shared && pnpm build

3. Set up environment variables:

   • Create a .env file with the following content:

   SUPABASE_URL=your-supabase-project-url
   SUPABASE_ANON_KEY=your-supabase-anon-key
   

4. Supabase Setup:

   • Create a Supabase project at database.new
   • Get your project URL and anon key from the API settings in your Supabase dashboard
   • Execute the supabase-setup.sql file in your Supabase SQL editor to create the required tables

Supabase Integration

This project uses Supabase as the database backend. Database migrations are managed through Supabase CLI.

Prerequisites

• Install Supabase CLI: brew install supabase/tap/supabase

Migrations

The database schema is defined in migration files located in supabase/migrations.

To apply migrations to a local Supabase instance:

supabase start
supabase migration up

To apply migrations to a remote Supabase instance:

supabase login
supabase link --project-ref your-project-ref
supabase db push

Seed Data

Initial seed data is defined in supabase/seed.sql. To apply seed data:

supabase db reset

Environment Variables

Set the following environment variables in your .env file:

SUPABASE_URL=your-supabase-project-url
SUPABASE_ANON_KEY=your-supabase-anon-key

Development

Start both client and server in development mode:

pnpm dev

This command starts all packages in watch mode. When you make changes to the shared package, both the client and server will automatically update without manual rebuilds. See HOT_RELOAD_SHARED.md for detailed information.

Or run them separately:

# Client only
pnpm dev:client

# Server only
pnpm dev:server

# Shared package in watch mode
pnpm dev:shared

Client

The client is a Vue 3 application with TypeScript support. It features:

• Sidebar navigation
• Suggestions list populated from the server API
• Modern UI with responsive design

Access the client at http://localhost:5173/

Server

The server is an Express.js application with TypeScript support. It provides:

• REST API for suggestions
• Mock data for demonstration

API endpoints:

• GET /api/suggestions: Returns a list of AI-generated suggestions

The server runs at http://localhost:3000

Build for Production

pnpm build

This will build all packages for production use.

Production

pnpm start

Deploy to Heroku

This project is configured for easy deployment to Heroku. The Express server will serve the static frontend files in production.

Prerequisites

• Heroku CLI installed
• A Heroku account

Deployment Steps

1. Create a new Heroku app:

heroku create your-app-name

2. Set up environment variables:

heroku config:set NODE_ENV=production
heroku config:set SUPABASE_URL=your-supabase-url
heroku config:set SUPABASE_ANON_KEY=your-supabase-anon-key
heroku config:set SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key
heroku config:set OPENAI_API_KEY=your-openai-api-key

3. Push to Heroku:

git push heroku main

4. Open your deployed application:

heroku open

Notes

• The Procfile is configured to start the Express server, which serves both the API and the static Vue frontend
• The heroku-postbuild script in package.json builds the shared package, client, and server
• In production, API requests are routed to /api endpoints served by the Express server