Building a SaaS Screenshot Service with PicStream

What We're Building

By the end of this tutorial, you'll have a fully functional screenshot service that:

• Captures any webpage as a high-quality image
• Supports multiple viewport sizes
• Caches results for instant delivery
• Handles thousands of requests per minute

Prerequisites

• Node.js 18+
• A PicStream account (free tier works!)
• Vercel account for deployment

Step 1: Project Setup

``bash npx create-next-app@latest screenshot-service cd screenshot-service npm install @picstream/sdk `

Step 2: Create the API Route

`typescript // app/api/screenshot/route.ts import { PicStream } from '@picstream/sdk';

const client = new PicStream(process.env.PICSTREAM_API_KEY);

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const url = searchParams.get('url'); const width = searchParams.get('width') || '1280'; const height = searchParams.get('height') || '720';

if (!url) { return Response.json({ error: 'URL required' }, { status: 400 }); }

const screenshot = await client.screenshot({ url, viewport: { width: parseInt(width), height: parseInt(height) }, format: 'webp', quality: 90 });

return Response.json({ imageUrl: screenshot.url }); } `

Step 3: Add Caching

Implement smart caching to serve repeated requests instantly:

`typescript const cacheKey = screenshot:${url}:${width}x${height}; const cached = await redis.get(cacheKey);

if (cached) { return Response.json({ imageUrl: cached, cached: true }); }

// ... generate screenshot ...

await redis.setex(cacheKey, 3600, screenshot.url); `

Step 4: Deploy

`bash vercel deploy --prod `

Testing the Service

`bash curl "https://your-service.vercel.app/api/screenshot?url=https://example.com" ``

Performance Optimization

For high-traffic scenarios, consider:

1. Using regional edge functions
2. Implementing request queuing
3. Setting up webhook callbacks for async processing

Conclusion

You now have a production-ready screenshot service. Scale it further by adding authentication, rate limiting, and usage analytics.