automail.

Technology Stack

This project is built using the T3 Stack, enhanced with additional tools for AI capabilities and payment processing. The tech stack includes:

• Authentication: Clerk
• Frontend Framework: Next.js (App Router)
• Backend Framework: tRPC
• Database ORM: Prisma
• Database: NeonDB (or locally containerized PostgreSQL)
• UI: TailwindCSS + ShadCN
• Payments: Stripe (To be integrated)
• Hosting: Vercel (potential alternative: self-hosting on EC2 with NGINX as a reverse proxy)
• AI Capabilities:
  • Gemini API for text generation
  • Cohere for RAG-based chatbot
  • Orama for full-text search

---

Project's working and why I couldn't deploy it

📺 Watch the video: YouTube Link The project uses multiple APIs, here is a list of APIs that are employed in this project

• Aurinko for mail sync offers 15 day free trial
• Cohere API used for the RAG Chat generous monthly limit
• Gemini API use to interact with gemini-2.0-flash which is used for Text Generation generous limit

Challenges that I faced during the creation of this project

• AURINKO DOES NOT SUPPORT Gmail STRAIGHT OUT OF THE BOX and a lot of configuration were required from Google Cloud Platform
• Gemini + VertexAI complex setup did not allow me to generate embeddings for Orama
• HUGGINGFACE had a not-so-generous pricing for their Inference API it stops at the consumption of just $0.10
• Stripe Integration since it does not work that well in India because of KYC issues, setting it up was difficult even for mock payments

---

Architectural Flow

---

Project Structure

.
├── bun.lock
├── components.json
├── next.config.js
├── next-env.d.ts
├── package.json
├── package-lock.json
├── postcss.config.js
├── prettier.config.js
├── prisma
│   ├── migrations/
│   ├── migration_lock.toml
│   └── schema.prisma
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── app
│   │   ├── api/
│   │   ├── _components/
│   │   ├── mail/
│   │   ├── sign-in/
│   │   ├── sign-up/
│   │   └── layout.tsx
│   ├── components
│   │   ├── kbar/
│   │   ├── ui/
│   │   ├── link-account-button.tsx
│   │   ├── theme-provider.tsx
│   │   └── theme-toggle.tsx
│   ├── hooks/
│   ├── lib/
│   ├── server/
│   ├── styles/
│   ├── trpc/
│   ├── env.js
│   ├── middleware.ts
│   ├── playground.ts
│   └── page.tsx
├── start-database.sh
├── tailwind.config.ts
└── tsconfig.json

Step Zero: Preliminary Research

Before starting development, the following must be explored:

• Clerk Authentication (Completed)
• Aurinko (Completed)
• Orama Search (Completed)
• Gemini AI Text Generation (Completed)
• RAG Chat (Completed)
• Stripe payment (Pending)

---

Development Flow

1. Email Client Setup

• Understand how Aurinko fetches and manages emails.
• Configure API access for seamless email synchronization.

2. Project Bootstrapping

• Set up a Next.js project with Clerk authentication.
• Integrate ShadCN UI components.
• Initialize Prisma ORM with a PostgreSQL database.

3. API Configuration

• Set up Aurinko API to receive and sync emails.
• Implement database schema and webhook management for real-time updates.

4. Search and AI Integration

• Implement full-text search using Orama.
• Build UI components to display emails and threads.
• Implement search UI with dynamic filtering.

5. AI-Driven Features

• RAG-based chatbot using Cohere.
• AI-assisted replies and email composition (Copilot-like functionality).

6. Payments and Deployment

• Integrate Stripe for payment processing.
• Deploy the application on Vercel or EC2.
• Create a landing page for the SaaS product.

---

Project Initialization

This project follows the T3 Stack setup:

bun create t3-app@latest  # or use npm
docker run --name postgres-container -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=mysecretpassword -e POSTGRES_DB=postgres -p 5432:5432 -d postgres

Why T3 Stack?

• TypeScript-first approach for strong typing.
• tRPC enables a seamless full-stack API experience.
• Next.js for a robust React framework.
• Prisma for efficient database handling.
• TailwindCSS for fast UI development.

---

Clerk Authentication Setup

Clerk provides a complete authentication suite with:

• Multi-factor authentication
• Advanced security & bot detection
• Social sign-on options
• Session management

Install Clerk

bun install @clerk/nextjs

Middleware Configuration

Add a middleware.ts file inside src/:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isPublicRoute = createRouteMatcher([
    '/sign-in(.*)', '/sign-up(.*)'
]) 

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect()
  }
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

Wrapping layout.tsx with <ClerkProvider>

import "~/styles/globals.css";
import { ClerkProvider } from '@clerk/nextjs';
import { TRPCReactProvider } from "~/trpc/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <TRPCReactProvider>{children}</TRPCReactProvider>
        </body>
      </html>
    </ClerkProvider>
  );
}

---

Remaining Tasks

Critical Integrations:

• Stripe (Pending)
• Rate Limiting (Pending)
• Database Configuration:
  • Use NeonDB as the primary PostgreSQL instance.
  • Alternative: Self-host PostgreSQL on EC2 with NGINX.

AI Improvements:

• Improve context handling in responses.
• Fix missing EmailAddress and Name in replies.

Database Migration

Instead of npx prisma migrate, use:

bun prisma db push  # Pushes schema to DB

Important: Remove the "query" param from db.ts, as it complicates operations. Further research required.

---

Deployment Strategy

• Option 1: Deploy to Vercel (simple, managed hosting)
• Option 2: Host on EC2, using NGINX for reverse proxy

---

Summary

This document outlines the project setup, authentication flow, database configuration, and AI capabilities. Key tasks include AI fine-tuning, Stripe integration, and final deployment. The project follows a structured approach, leveraging modern frameworks to build a robust SaaS product.