https://github.com/richardhosler/nextjs-redis-puppeteer-screenshot-capture-tool

Small tool to capture screenshots of websites, learning Redis and puppeteer
https://github.com/richardhosler/nextjs-redis-puppeteer-screenshot-capture-tool

nextjs puppeteer redis

Last synced: about 1 month ago
JSON representation

Small tool to capture screenshots of websites, learning Redis and puppeteer

• Host: GitHub
• URL: https://github.com/richardhosler/nextjs-redis-puppeteer-screenshot-capture-tool
• Owner: richardhosler
• Created: 2024-11-30T23:50:19.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-30T23:51:11.000Z (about 1 month ago)
• Last Synced: 2024-12-01T00:27:59.762Z (about 1 month ago)
• Topics: nextjs, puppeteer, redis
• Language: TypeScript
• Homepage:
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next.js Redis Puppeteer Screenshot Capture Tool

![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white) 

![Redis](https://img.shields.io/badge/Redis-D10000?style=for-the-badge&logo=redis&logoColor=white) 

![Puppeteer](https://img.shields.io/badge/Puppeteer-1B1D24?style=for-the-badge&logo=puppeteer&logoColor=white)

A service for capturing screenshots of websites using **Next.js**, **Redis**, and **Puppeteer**. Redis is used for job queue management, and a Next.js backend worker processes the queue to take screenshots with Puppeteer.

## Features

- 🗂️ Job queue management with Redis

- 📸 Website screenshot capture using Puppeteer

- 🛠️ Simple API to add URLs to the job queue

- 🔄 Job processing in the backend using Next.js

## Screenshots

![Screenshot 1](./screenshots/Screenshot_1.png)

![Screenshot 2](./screenshots/Screenshot_2.png)

## Usage

1. **Add a URL to the job queue**  

   You can add URLs for screenshot capture through the front-end interface. The URL will be added to the Redis job queue and can be processed by the backend worker.

   - The front-end makes a **POST** request to `/api/add-to-queue` with the URL to be captured. 

     - Example request body:  

      ```json

       { "url": "https://example.com", "process": true }

      ```

     - Example response:  

      ```json

       { "success": true, "queue": ["https://example.com", "https://earlier.example.com"] }

      ```

2. **Get the screenshot**  

   After the job is processed, you can view the screenshot directly on the front-end. The back-end stores images in the path specified in the .env file.

This setup allows users to interact with the screenshot capture service via an intuitive front-end, without needing to manually interact with the API endpoints.

## Acknowledgements

- [Next.js](https://nextjs.org/)

- [Redis](https://redis.io/)

- [Puppeteer](https://pptr.dev/)