Capture screenshots → AI teaches you instantly → Never forget again

🚀 Live Demo • 📖 Docs • 🐛 Report Bug • ✨ Features

---

🎯 The Problem It Solves

You screenshot something to learn it later. But you forget why you took it and never revisit it.

SnapSage turns every screenshot into an instant learning session. Upload a screenshot, write why you took it, and the AI identifies the topic and delivers a complete structured learning guide — right away.

---

✨ Features

Feature	Description
🤖 AI Vision Analysis	Groq's LLaMA-4 Scout reads your screenshot and extracts the topic
🎯 Intent-Aware Learning	Your reason shapes the AI's explanation — personalized every time
📚 Structured Teaching	Core Concept → Key Points → Real-World Use → One-liner Memory Hook
💾 Persistent Vault	All snaps stored in MongoDB Atlas, accessible from any device
🔍 Full-Text Search	Search across topics, tags, and your personal notes instantly
📱 Mobile-First UI	Designed for phone use — take screenshots and learn on the go
🏷️ Auto-Tagging	AI extracts relevant tags automatically for smart filtering
💾 Save Without AI	Save snaps even when offline or AI is unavailable
🌙 Cosmic Dark Theme	Easy on the eyes — deep space aesthetic with aurora glow

---

🏗️ Architecture

┌──────────────────────────────────────────────────────────┐
│                    CLIENT (React + Vite)                  │
│              Mobile-first • Cosmic Dark UI                │
└─────────────────────┬────────────────────────────────────┘
                      │ Axios (HTTP)
                      ▼
┌──────────────────────────────────────────────────────────┐
│               BACKEND (Node.js + Express)                 │
│    POST /api/snaps/analyze  →  Groq Vision AI             │
│    GET  /api/snaps          →  MongoDB Atlas              │
│    POST /api/snaps          →  MongoDB Atlas              │
│    DELETE /api/snaps/:id    →  MongoDB Atlas              │
└──────────┬───────────────────────────┬────────────────────┘
           │                           │
           ▼                           ▼
  ┌────────────────┐         ┌──────────────────┐
  │   Groq Cloud   │         │  MongoDB Atlas   │
  │ LLaMA-4 Scout  │         │  Free Cluster    │
  │ 14,400 req/day │         │  Snap Collection │
  └────────────────┘         └──────────────────┘

---

🗂️ Project Structure

snapsage/
│
├── 📁 backend/
│   ├── 📁 src/
│   │   ├── 📁 config/
│   │   │   └── db.js                # MongoDB Atlas connection
│   │   ├── 📁 controllers/
│   │   │   └── snap.controller.js   # AI analysis + CRUD logic
│   │   ├── 📁 middleware/
│   │   │   └── errorHandler.js      # Global error handling
│   │   ├── 📁 models/
│   │   │   └── Snap.model.js        # Mongoose schema
│   │   └── 📁 routes/
│   │       └── snap.routes.js       # API route definitions
│   ├── server.js                    # Express entry point
│   ├── .env.example                 # Environment template
│   └── package.json
│
├── 📁 frontend/
│   ├── 📁 src/
│   │   ├── 📁 api/
│   │   │   └── snapApi.js           # Axios API calls
│   │   ├── 📁 components/
│   │   │   ├── Library.jsx          # Vault grid view
│   │   │   ├── Capture.jsx          # Upload + analyze + save
│   │   │   ├── Detail.jsx           # Full snap view
│   │   │   └── BottomNav.jsx        # Mobile navigation
│   │   ├── 📁 hooks/
│   │   │   └── useSnaps.js          # Data fetching hook
│   │   ├── 📁 utils/
│   │   │   ├── imageUtils.js        # Image compression
│   │   │   └── timeUtils.js         # Timestamp formatting
│   │   ├── App.jsx                  # Root component
│   │   ├── App.css                  # Cosmic design system
│   │   └── main.jsx                 # React DOM entry
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
│
├── .gitignore
├── LICENSE
└── README.md

---

🔌 API Reference

POST /api/snaps/analyze

Sends screenshot to Groq Vision AI and returns a structured learning guide.

{
  "imageBase64": "string (base64 JPEG, no data URI prefix)",
  "reason": "string (why you took the screenshot)"
}

{
  "success": true,
  "analysis": "string (full AI markdown response)",
  "topic": "string",
  "tags": ["string"]
}

POST /api/snaps — Save a snap

GET /api/snaps?search=query — Get all snaps (with optional search)

GET /api/snaps/:id — Get single snap

DELETE /api/snaps/:id — Delete a snap

GET /health — Health check → { "status": "ok" }

---

⚙️ Prerequisites

• Node.js v18+
• Git
• MongoDB Atlas account (free)
• Groq account (free)

---

🚀 Local Setup

1. Clone

git clone https://github.com/YOUR_USERNAME/snapsage.git
cd snapsage

2. Backend

cd backend
npm install
cp .env.example .env

Fill in backend/.env:

PORT=5000
MONGODB_URI=mongodb+srv://<user>:<password>@cluster.mongodb.net/snapsage
GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxx
FRONTEND_URL=http://localhost:5173

npm run dev
# ✅ Server running on port 5000
# ✅ MongoDB connected

3. Frontend

cd frontend
npm install
cp .env.example .env

Fill in frontend/.env:

VITE_API_URL=http://localhost:5000/api

npm run dev
# ✅ http://localhost:5173

4. Phone Access (Same WiFi)

# Find your PC IP
ipconfig   # Windows → IPv4 Address under Wi-Fi

Update frontend/.env:

VITE_API_URL=http://192.168.X.XXX:5000/api

Open on phone: http://192.168.X.XXX:5173

---

☁️ Deployment

Backend → Render

1. Push to GitHub
2. render.com → New Web Service → Connect repo
3. Configure:
   • Root Directory: backend
   • Build: npm install
   • Start: node server.js
4. Add environment variables:
   • MONGODB_URI, GROQ_API_KEY, FRONTEND_URL (your Vercel URL)
5. Deploy ✅

Frontend → Vercel

1. vercel.com → New Project → Import repo
2. Configure:
   • Root Directory: frontend
   • Framework: Vite
3. Add environment variable:
   • VITE_API_URL = your Render backend URL + /api
4. Deploy ✅

---

🔐 Environment Variables

Backend

Variable	Description
PORT	Server port (default: 5000)
MONGODB_URI	MongoDB Atlas connection string
GROQ_API_KEY	Groq API key from console.groq.com
FRONTEND_URL	Allowed CORS origin

Frontend

Variable	Description
VITE_API_URL	Backend API base URL

---

🛠️ Tech Stack

Layer	Tech	Why
Frontend	React 18 + Vite	Fast, component-based
Styling	Custom CSS + Cosmic Design System	Unique, mobile-first
HTTP	Axios	Clean API calls
Backend	Node.js + Express	Lightweight REST API
Database	MongoDB Atlas + Mongoose	Flexible, free cloud
AI	Groq — LLaMA-4 Scout Vision	14,400 req/day free
Frontend Deploy	Vercel	Free, instant GitHub deploy
Backend Deploy	Render	Free, simple config

---

🚀 Future Upgrades

• 🔐 User Authentication (JWT)
• 📂 Folder/Category system for snaps
• 🔁 Spaced Repetition reminders
• 📤 Export vault as PDF
• 🌐 Share snap analysis with friends
• 🔔 Push notifications for review reminders

---

👨‍💻 Built By

Rafiul Islam

IoT & Robotics Engineering Student | UFTB — 2nd Year

---

📄 License

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

⭐ Star this repo if SnapSage helped you learn better!