JPEG Compression Web App Development

Job ID: 39503312

Budget: $750 – $1,500 USD

Project Title:

Build One-Page JPEG Compression Website with User Accounts, Stripe Subscriptions, and Google AdSense Integration


Project Overview:

I want to build a fully functional, one-page web app modeled after CompressJPEG.com — just like shown in this YouTube video: https://youtu.be/5qiXoWe6Z2o. It’s a JPEG and PNG image compressor with batch upload, instant preview, and both free and premium user tiers.

The site must be clean, minimal, responsive, and built for speed. It will generate revenue from Google AdSense (for free users) and Stripe-based subscriptions (for power users). No fluff. Just function, monetization, and a solid UI.

Core Functional Requirements:
Image Upload & Compression

Drag-and-drop uploader + file picker fallback

Accept JPEG & PNG files

Multiple file upload (batch support)

Async queue system to prevent crashing during large batch compression

Compression quality slider (10–100%) with presets like “Web Optimized” and “Best Quality”

Client-side compression using HTML5 Canvas or Compressor.js

Max file size limit: 10MB per image (for free users)

Real-time validation (wrong file types, too large, etc.)

UX & Visual Features

Before/after image preview slider

Real-time file size display (original vs. compressed)

Visual progress bars per image

Toggle buttons to switch views (original vs. compressed)

Batch compression progress tracker (e.g., “3 of 10 images compressed”)

Responsive design for mobile + desktop

Smooth transitions/animations to improve UX

User Account System

User registration & login (email + password)

Secure authentication (session-based or token)

Basic user dashboard with logout

Show “Premium User” badge when applicable

Premium features should be locked unless user has active subscription

Monetization & Limits

Free Tier (No payment required)

Max 5 files per compression session

No ZIP download

No metadata (EXIF) removal

Limited compression quality (capped at 70%)

Google AdSense visible in sidebar/footer and after result is shown

Ad scripts must meet Google’s policy & UX standards

Premium Tier (Paid via Stripe)

Unlimited file uploads

Unlimited compression sessions

ZIP file download (bulk download of all images)

Access to HD compression settings (up to 100%)

Metadata/EXIF removal

Higher priority queue (if possible)

No ads when logged in as premium

Stripe checkout with:

1-click hosted checkout

Monthly & Annual plan options

Webhooks to upgrade user account automatically

Confirmation email & success redirect

Admin/Backend Features (Optional)

Admin login (or Firebase backend) to view users and plans

Adjust upload limits or force upgrade manually (not required but useful)

Final Deliverables

Full working website (compressed build + source code)

Deployed version (Vercel, Replit, Netlify, or standard hosting)

Setup instructions for Stripe and AdSense if needed

Mobile-optimized layout

Clean, minimal UI with excellent performance

Testing + bug-free launch

Tech Stack Preferences (Flexible):

HTML5, JavaScript, Compressor.js (Frontend)

Firebase Auth OR Node.js backend for login/auth (preferred but open)

Stripe integration (required)

AdSense-ready front end

Replit, Vercel, Netlify, or your preferred hosting

How to Apply

When applying, please include:

Relevant samples (compression tools, single-page SaaS, Stripe integrations)

Your estimated timeline (in days)

What stack you plan to use

If you can also help deploy the site

Important

I’m NOT looking for WordPress or bloated CMS solutions. This is a lean, utility web app built for speed, simplicity, and scale. If you can do that, I’m ready to get started immediately.


Thank you

Koid
Related categories: PHP JavaScript Website Design HTML5 HTML