https://github.com/aritra69/snapshotyourwebsite
An Open Source tool that captures high-quality screenshots of any website, built with Nextjs14 and Puppeteer.
https://github.com/aritra69/snapshotyourwebsite
axios docker express nextjs14 nodejs puppeteer react render shadcn-ui tailwindcss vercel zustand
Last synced: 3 months ago
JSON representation
An Open Source tool that captures high-quality screenshots of any website, built with Nextjs14 and Puppeteer.
- Host: GitHub
- URL: https://github.com/aritra69/snapshotyourwebsite
- Owner: ARITRA69
- License: mit
- Created: 2024-08-19T16:17:48.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-03T12:41:45.000Z (4 months ago)
- Last Synced: 2025-01-31T07:11:09.750Z (3 months ago)
- Topics: axios, docker, express, nextjs14, nodejs, puppeteer, react, render, shadcn-ui, tailwindcss, vercel, zustand
- Language: TypeScript
- Homepage: https://snapshotyourwebsite.com
- Size: 820 KB
- Stars: 19
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📸 Snapshotyourwebsite
Turn any website into a stunning screenshot in seconds! Whether you need to capture a hero section for inspiration or grab an entire webpage for documentation, Snapshotyourwebsite has got you covered.
## 🚀 What Makes Us Special
Snapshotyourwebsite isn't just another screenshot tool – it's your go-to solution for:
- Lightning-fast captures powered by Puppeteer
- Pixel-perfect screenshots of both hero sections and full pages
- Simple, intuitive interface that anyone can use
- Enterprise-grade security with robust URL validation
- Seamless download experience
## 🏗️ Architecture That Scales
### Frontend Magic (React + Next.js)
Our frontend is built with performance and user experience in mind:
- **Next.js Framework**: Leveraging server-side rendering for blazing fast load times
- **React Components**: Modular design for maximum maintainability
- **Responsive UI**: Beautiful on everything from phones to ultra-wide monitors
- **Real-time Preview**: See your screenshots instantly
- **Progressive Enhancement**: Works great even with JavaScript disabled
### Backend Power (Node.js + Docker)
Our containerized backend ensures consistent performance:
- **Puppeteer in Docker**: Isolated environment for secure screenshot capture
- **Node.js Runtime**: Efficient handling of concurrent requests
- **Queue Management**: Smart processing of screenshot requests
- **Caching Layer**: Quick retrieval of frequently captured pages
- **Error Handling**: Graceful recovery from any issues
## 🌐 Deployment Strategy
### Frontend (Vercel)
- Automatic HTTPS encryption
- Global CDN distribution
- Instant cache invalidation
- Zero-downtime deployments
- Built-in analytics and performance monitoring
### Backend (Render Docker)
- Auto-scaling container deployment
- Health monitoring and automatic restarts
- Persistent storage for screenshots
- Load balancing across regions
- Automatic failover
## 💡 Core Features
### Screenshot Capabilities
- **Hero Section Capture**: Perfect for landing page inspiration
- **Full Page Screenshots**: Nothing left behind
- **Custom Viewport Sizes**: Capture at any resolution
- **Multiple Formats**: Export as PNG, JPEG, or PDF
- **Quality Settings**: Adjust compression to your needs
### User Experience
- **Drag-and-Drop URL Input**: Just drop a link and go
- **Progress Tracking**: Real-time capture status
- **Instant Preview**: See results immediately
- **One-Click Download**: Get your screenshots faster
- **Sharing Options**: Direct links to your captures
## 🔒 Security First
We take security seriously with:
- **URL Validation**: Multi-layer checking for malicious links
- **Rate Limiting**: Protection against abuse
- **Sanitization**: Clean processing of all inputs
- **Access Control**: Optional private screenshots
- **CORS Policies**: Strict origin checking
## 🎯 Future Roadmap
Exciting features coming soon:
- Browser extension for instant captures
- Batch processing of multiple URLs
- API access for developers
- Custom capture annotations
- Cloud storage integration
## 🤝 Contributing
We love contributions! Check out our contribution guidelines to get started.
## 📜 License
MIT License - Feel free to use it in your projects!
---
Made with ❤️ by developers, for developers