📸 Sitesnap

Sitesnap is a modern, secure website screenshot tool built with Next.js. It leverages the ScreenshotOne API for high-fidelity captures and integrates Cloudflare Turnstile to protect your API quota from bot abuse.

✨ Features

Pixel-Perfect Screenshots: Powered by ScreenshotOne to render modern web technologies accurately.
🛡️ Bot Protection: Integrated Cloudflare Turnstile CAPTCHA to prevent API abuse and spam.
Device Presets: One-click toggles for Mobile (iPhone), Tablet (iPad), and Desktop views.
Customizable Viewport: Fine-tune width, height, and delays (0-10s).
Full Page Support: Smart scrolling to capture entire landing pages.
Dark Mode Ready: Fully responsive UI with dark/light mode support.

🚀 Getting Started

Follow these steps to get the project running locally. Prerequisites

Node.js (v18+ recommended)
ScreenshotOne Account (Get API Key)
Cloudflare Account (Get Turnstile Keys)

Clone the repository git clone https://github.com/zulfikawr/sitesnap.git cd sitesnap
Environment Setup This project uses specific environment variables for the screenshot engine and security verification.

Copy the example environment file: cp .env.example .env.local
Open .env.local and configure your keys:

        env
        Wait...
      

SCREENSHOTONE_API_KEY=your_screenshotone_access_key
NEXT_PUBLIC_CF_TURNSTILE_SITE_KEY=your_cloudflare_site_key
CF_TURNSTILE_SECRET_KEY=your_cloudflare_secret_key

Install Dependencies

        bash
        Wait...
      

npm install

Run the Development Server

        bash
        Wait...
      

npm run dev

Open http://localhost:3000 with your browser to use the application.

🛡️ Architecture & Security

Sitesnap uses a secure flow to ensure only humans can trigger the screenshot API, saving your credits.

Client: The user solves the Cloudflare Turnstile widget.
Client: The widget returns a cfCaptchaToken.
Client: This token is sent to the Next.js API route alongside the screenshot parameters.
Server: The API validates the token with Cloudflare using CF_TURNSTILE_SECRET_KEY.
Server: Only if valid, the request is forwarded to ScreenshotOne.

📡 API Reference

The internal API route handles validation and proxying. Endpoint: /api/screenshot Method: POST Request Body

Parameter	Type	Required	Description
url	string	Yes	The target website URL.
cfCaptchaToken	string	Yes	The Turnstile token generated by the frontend.
width	number	No	Viewport width (320px – 3840px).
height	number	No	Viewport height (480px – 2160px).
delay	number	No	Capture delay in seconds (0 – 10).
fullPage	boolean	No	Scroll and capture full height.

Example Request

        json
        Wait...
      

{
  "url": "https://vercel.com",
  "cfCaptchaToken": "0.x.xxxxx.xxxx...",
  "width": 1920,
  "height": 1080,
  "delay": 2,
  "fullPage": true
}

🛠️ Tech Stack

Framework: Next.js (App Router)
UI Components: shadcn/ui
Styling: Tailwind CSS
Icons: Lucide React
Security: Cloudflare Turnstile ☁️ Deploy on Vercel The easiest way to deploy is using the Vercel Platform.
Push your code to GitHub.
Import the project into Vercel.
Important: Add the 3 Environment Variables (SCREENSHOTONE_API_KEY, NEXT_PUBLIC_CF_TURNSTILE_SITE_KEY, CF_TURNSTILE_SECRET_KEY) in the Vercel Project Settings.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

Distributed under the MIT License.