SRS Addendum: Tech Architecture (Supabase + Next.js + Cloudinary)

1. System Architecture Overview

Stack

• Frontend: Next.js (App Router)

• Backend (BaaS): Supabase

• Storage (Media): Cloudinary

• Auth: Supabase Auth

• DB: PostgreSQL (Supabase)

2. High-Level Architecture

Client (Next.js)
↓
Supabase (Auth + DB + Realtime)
↓
Cloudinary (Images + PDFs)

3. Module Design

3.1 Authentication Module

Handled by Supabase Auth

Features

• Email/password login

• OAuth (Google optional)

• Session management (cookies)

Tables

• users (auto-managed by Supabase)

3.2 Notes Module

Fields

• id

• title

• description

• subject

• semester

• file_url (Cloudinary)

• thumbnail_url (Cloudinary)

• created_at

Flow

1. Admin uploads PDF → Cloudinary

2. Get URL

3. Save metadata in Supabase

3.3 MCQ Module

Tables

mcqs

• id

• question

• options (jsonb)

• correct_answer

• category_id

attempts

• id

• user_id

• score

• total

• created_at

3.4 Categories Module

categories

• id

• name

• parent_id (for nesting)

3.5 Articles Module

articles

• id

• title

• content (rich text JSON / HTML)

• tags

• created_at

3.6 File Upload System (Cloudinary)

Why Cloudinary

• CDN

• Auto optimization

• Easy upload API

Flow
Client → Next.js API → Cloudinary → URL → Supabase DB

4. API Design (Next.js Route Handlers)

Example Routes

POST /api/upload

• Upload image/pdf to Cloudinary

GET /api/notes

• Fetch notes

POST /api/mcq/submit

• Submit quiz

5. Database Design (PostgreSQL)

Key Tables

users (Supabase default)

notes
mcqs
categories
articles
attempts

6. Supabase Usage

Features Used

• Auth (JWT-based)

• Row Level Security (RLS)

• Postgres DB

• Realtime (optional for leaderboard)

RLS Example

• Users can only see their attempts

• Admin can manage content

7. Cloudinary Setup

Resource Types

• Images → thumbnails

• Raw → PDFs

Folder Structure

• notes/pdfs/

• notes/thumbnails/

• articles/images/

8. Frontend Structure (Next.js)

app/
(public)/
notes/
mcq/
articles/
(auth)/
login/
admin/
dashboard/
upload/
mcq/

components/
lib/
hooks/
services/

9. Security

• Supabase RLS policies

• Signed upload (Cloudinary)

• API route validation

10. Performance

• Use Cloudinary CDN

• ISR / caching (Next.js)

• Supabase query optimization

11. Future Enhancements

• AI MCQ generator

• Bookmark notes

• Offline support (PWA)

• Paid subscriptions (Stripe)

12. Key Advantages of This Stack

• No backend maintenance

• Fast MVP build

• Scalable (Supabase + CDN)

• Fits your experience (Next.js)