📸 Snapee – Screenshot Tool

A modern, high-performance website screenshot tool built with Next.js 14, React, and Puppeteer.
Snapee features a beautiful glassmorphism UI, light/dark mode, and a powerful REST API for programmatic usage.

---

🚀 Features

• Dual Engine Architecture

  • Full Puppeteer for local development
  • Lightweight @sparticuz/chromium for production (Netlify / Vercel)
  • Bypasses serverless size limits

• High Definition Screenshots

  • HD (1280×720)
  • Full HD (1920×1080)

• Glassmorphism UI

  • Custom CSS system
  • Animated background blobs
  • Frosted glass panels

• Theming

  • Built‑in Light & Dark mode toggle

• Responsive Layout

  • Two‑column dashboard on desktop
  • Stacked layout on mobile

• API Ready

  • Public REST API for automation & integrations

---

🛠️ Installation & Local Development

1. Clone the repository

git clone https://github.com/yourusername/snapee.git
cd snapee

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Open in browser

Navigate to:

http://localhost:3000

---

☁️ Deployment (Netlify)

This project is optimized for Netlify Serverless Functions.

Steps

1. Push the project to GitHub
2. Import the repository into Netlify
3. Use the following build settings:

Build Command

npm run build

Publish Directory

.next

4. Deploy 🚀

---

⚠️ Important Note: Netlify & Chromium

To fit within Netlify’s 50MB Serverless Function limit, Chromium is downloaded at runtime in production.

Inside:

src/app/api/capture/route.js

executablePath = await chromium.executablePath(
  "https://github.com/Sparticuz/chromium/releases/download/v123.0.1/chromium-v123.0.1-pack.tar"
);

⏱ Cold Start Warning

• Default Netlify timeout: 10 seconds
• Recommended timeout: 30–60 seconds
• Required for first‑time Chromium download

---

⚡ API Documentation

Use the screenshot engine without the UI.

Endpoint

POST /api/capture

Request Body (JSON)

Field	Type	Required	Description
url	string	✅ Yes	Full URL (e.g. https://google.com)
quality	string	❌ No	hd (1280×720) or fhd (1920×1080)

Example (cURL)

curl -X POST https://snapee.netlify.app/api/capture   -H "Content-Type: application/json"   -d '{"url":"https://github.com","quality":"fhd"}'   --output screenshot.png

---

🎨 Customization

Edit the theme variables in:

app/globals.css

:root {
  --accent: #6366f1;       /* Main Brand Color */
  --glass-bg: rgba(...);   /* Glass panel transparency */
  --blob-1: #ff9a9e;       /* Background Blob 1 */
  --blob-2: #fad0c4;       /* Background Blob 2 */
}

---

📁 Project Structure

├── app/
│   ├── api/capture/route.js   # Backend logic (Puppeteer)
│   ├── components/Sidebar.js # Navigation & theme toggle
│   ├── globals.css           # Glassmorphism styles
│   ├── layout.js             # Root layout & blobs
│   └── page.js               # Main UI
├── next.config.mjs
└── package.json

---

🤝 Contributing

Pull requests are welcome 🙌
For major changes, please open an issue first to discuss your ideas.

---

📄 License

MIT License
Feel free to use, modify, and distribute.