AI Study Assistant

An AI-powered study companion for BSIT and college students — built as a portfolio-quality SaaS application.

Live Demo: https://ai-study-assistant-sigma-ten.vercel.app

---

Features

Feature	Description
AI Chat	Chat with Gemini AI — supports multi-turn conversations saved to DB
Flashcard Generator	AI generates Q&A flashcards from any topic; 3D flip study mode
Reviewer Generator	AI creates structured study reviewers (comprehensive, Q&A, key concepts)
PDF Summarizer	Upload PDFs → AI extracts text and generates summaries
Code Debugger	Paste broken code → AI explains the bug and provides a fix
Notes	Markdown note editor with 2-second auto-save
Bookmarks	Save any item (flashcard set, reviewer, note, material) for quick access
Admin Panel	Manage users, view AI usage charts, ban/unban accounts
Dark Mode	Full dark mode support with system preference detection

---

Tech Stack

Layer	Technology
Frontend	React 19 · Vite 8 · Tailwind CSS v4 · React Router v7
Backend	Node.js 20 · Express 5 · CommonJS
Database	PostgreSQL via Neon (free tier)
ORM	Prisma 7 with pg driver adapter
Auth	JWT (7-day expiry) + bcrypt (10 rounds)
AI	Google Gemini 2.5 Flash (free tier)
File Storage	Cloudinary (free tier — 25 GB storage)
Deployment	Vercel (frontend) · Render (backend)

---

Project Structure

AI_Study_Assistant/
├── client/                    # React + Vite frontend (→ Vercel)
│   ├── src/
│   │   ├── components/        # Reusable UI components
│   │   │   ├── admin/         # Admin panel components
│   │   │   ├── chat/          # Chat UI components
│   │   │   ├── debugger/      # Code debugger components
│   │   │   ├── flashcards/    # Flashcard components
│   │   │   ├── layout/        # Sidebar, Topbar, DashboardLayout
│   │   │   ├── notes/         # Note editor
│   │   │   ├── pdf/           # PDF uploader and summary viewer
│   │   │   ├── reviewer/      # Reviewer generator components
│   │   │   └── ui/            # Button, Card, Badge, Avatar, BookmarkButton
│   │   ├── context/           # AuthContext, ThemeContext
│   │   ├── hooks/             # useChat
│   │   ├── pages/             # One file per route
│   │   ├── services/          # Axios API wrappers (one per feature)
│   │   └── utils/             # cn(), formatDate(), timeAgo()
│   ├── vercel.json            # SPA routing config
│   └── .env.example
│
├── server/                    # Node.js + Express backend (→ Render)
│   ├── controllers/           # HTTP handlers — thin, call services
│   ├── middleware/            # auth, admin, upload, validate, rateLimiter
│   ├── prisma/                # schema.prisma + migrations
│   ├── routes/                # Express router files
│   ├── services/              # Business logic: AI, PDF, Cloudinary, DB
│   └── utils/                 # prismaClient, jwt.utils, logger
│
├── render.yaml                # Render deployment config
└── README.md

---

Local Development Setup

Prerequisites

• Node.js 20+
• A Neon free PostgreSQL database
• A Cloudinary free account
• A Google AI Studio API key

1. Clone the repository

git clone https://github.com/Iya15/AI-Study-Assistant.git
cd AI-Study-Assistant

2. Install dependencies

# Backend
cd server && npm install

# Frontend (new terminal)
cd client && npm install

3. Configure environment variables

# Backend
cd server
cp .env.example .env
# Edit .env with your actual values (see Environment Variables section below)

# Frontend
cd client
cp .env.example .env
# Leave VITE_API_URL empty for development (Vite proxy handles it)

4. Set up the database

cd server

# Apply all migrations to your Neon database
npx prisma migrate deploy

# Generate the Prisma client
npx prisma generate

5. Start development servers

# Terminal 1 — Backend (http://localhost:5000)
cd server && npm run dev

# Terminal 2 — Frontend (http://localhost:5173)
cd client && npm run dev

---

Environment Variables

Backend (server/.env)

Variable	Description	Example
PORT	Server port	5000
NODE_ENV	Environment	development / production
CLIENT_URL	Frontend URL for CORS	https://your-app.vercel.app
DATABASE_URL	Neon PostgreSQL connection string	postgresql://...?sslmode=require
JWT_SECRET	64-char random hex string	node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"
JWT_EXPIRES_IN	Token lifetime	7d
GEMINI_API_KEY	Google AI Studio key	AIza...
CLOUDINARY_CLOUD_NAME	Cloudinary cloud name	mycloud
CLOUDINARY_API_KEY	Cloudinary API key	123456789012345
CLOUDINARY_API_SECRET	Cloudinary API secret	abc123...

Frontend (client/.env)

Variable	Description	Example
VITE_API_URL	Backend API base URL	https://your-api.onrender.com/api

Development: Leave VITE_API_URL empty — Vite proxies /api to localhost:5000 automatically.

---

Deployment Guide

Step 1 — Set up Neon (free PostgreSQL)

1. Go to neon.tech → Sign up for free
2. Create a new project (e.g. ai-study-assistant)
3. Go to Connection Details → copy the connection string
4. It looks like: postgresql://neondb_owner:password@ep-xxx.region.aws.neon.tech/neondb?sslmode=require
5. Save this as your DATABASE_URL

Step 2 — Set up Cloudinary (free file storage)

1. Go to cloudinary.com → Sign up for free
2. From the Dashboard, copy:
   • Cloud Name
   • API Key
   • API Secret
3. Free tier: 25 GB storage + 25 GB bandwidth/month — enough for hundreds of PDFs

Step 3 — Get your Gemini API key

1. Go to aistudio.google.com/app/apikey
2. Click Create API key → select an existing Google Cloud project or create new
3. Copy the key (starts with AIza...)
4. Free tier: 15 requests/minute, 1500 requests/day — sufficient for student usage

Step 4 — Deploy the Backend to Render

1. Go to render.com → Sign up (free tier available)
2. Click New → Web Service
3. Connect your GitHub repository
4. Configure:
   • Root Directory: server
   • Build Command: npm install && npm run build
   • Start Command: npm start
   • Node Version: 20
5. Add all environment variables from the table above (set NODE_ENV=production)
6. Click Create Web Service
7. Wait for deploy (~3 min). Note your service URL: https://your-service.onrender.com

Run migrations after first deploy:

# In your local terminal (one-time setup):
cd server
DATABASE_URL="your-production-neon-url" npx prisma migrate deploy

Free tier note: Render free services spin down after 15 minutes of inactivity. The first request after spin-down takes ~30 seconds. Upgrade to Render Starter ($7/mo) to avoid this.

Step 5 — Deploy the Frontend to Vercel

1. Go to vercel.com → Sign up with GitHub (free)
2. Click Add New Project → import your GitHub repo
3. Configure:
   • Framework Preset: Vite
   • Root Directory: client
   • Build Command: npm run build
   • Output Directory: dist
4. Add environment variable:
   • VITE_API_URL = https://your-service.onrender.com/api
5. Click Deploy

Auto-deploy: Every push to main automatically re-deploys both services.

Step 6 — Set CLIENT_URL on Render

After Vercel deploys:

1. Copy your Vercel URL (e.g. https://ai-study-assistant.vercel.app)
2. Go to Render → your service → Environment
3. Set CLIENT_URL = https://ai-study-assistant.vercel.app
4. Render will restart automatically

Step 7 — Create an Admin user

After deploying, register a user via the app, then manually promote them in Neon:

-- Run in Neon SQL Editor:
UPDATE users SET role = 'ADMIN' WHERE email = 'your@email.com';

---

Production Checklist

• All secrets in environment variables (none hardcoded)
• CORS locked to CLIENT_URL only
• Rate limiting on all AI routes (per-user, DB-backed)
• JWT expiry set to 7 days
• bcrypt 10 rounds for password hashing
• User enumeration prevented (identical error for wrong email/password)
• Admin routes double-protected (JWT + role check)
• console.log suppressed in production via logger.js
• Morgan HTTP logs use combined format in production
• Error handler hides stack traces in production
• File uploads capped at 10 MB
• Prisma isActive check prevents banned users from logging in
• SPA routing handled by vercel.json
• prisma generate runs during Render build step

---

Contributing

Pull requests welcome. For major changes, open an issue first to discuss what you'd like to change.

---

License

MIT