diff --git a/plan-for-devs.md b/plan-for-devs.md index 9e6fb75..c328a3b 100644 --- a/plan-for-devs.md +++ b/plan-for-devs.md @@ -1,114 +1,113 @@ -Below is a **road-map of concrete tasks** that will take your three-developer team from today’s scaffold to a production-ready “AI Bulk Image Renamer” SaaS. The work is organised in phases so that each developer always has an autonomous slice to own, while touch-points (API contracts, queues, WebSockets) stay thin and testable. Citations are woven in wherever external best-practice or spec language underpins a task. +**Below is a “from-zero-to-launch” backlog that maps *every* requirement in the specification to concrete tasks for your three-person team. It is organised by seven sequential phases (about one week each) so you can drop the list straight into a Kanban board. After the backlog you’ll find a compact milestone calendar. Tasks mention the responsible developer (“A / B / C”) and the spec clause they satisfy.** --- -## Phase 0 – 1 recap (done last week) +## Phase 0 – Project Skeleton (Days 1-2) -Skeleton repo, Docker Compose, OAuth stub, queue stub, drag-and-drop, WebSocket progress, and dummy review table were delivered. -*Specification refs §18, 26-32, 73-77* +| Dev | Core tasks | Why / spec tie-in | Key refs | +| ----- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------ | +| **A** | • Initialise mono-repo (pnpm workspaces)
• Add ESLint + Prettier + Vitest + Cypress in CI pipeline (§88) | Gives every feature a common PR workflow | | +| **B** | • Write `docker-compose.dev.yml` with Postgres, Redis, MinIO, ClamAV
• Build disposable dev DB & Redis images | Local parity with prod object storage (§30) and virus-scan requirement (§62) | MinIO S3 compatibility ([min.io][1]) | +| **C** | • Scaffold Next.js + Tailwind app; configure Storybook
• Create minimal landing page shell (§66) | Proves FE tool-chain end-to-end | | --- -## Phase 2 – Minimum Viable Rename (Weeks 2-4) +## Phase 1 – Auth & Upload Skeleton (Week 1) -### Dev A – Backend / API - -* **Harden Google OAuth flow**: add state + PKCE, token verification, refresh‐token rotation ([Google for Developers][1], [DEV Community][2]) -* **Finish REST endpoints** `/api/batch`, `/status`, `/zip`, `/keywords/enhance`, wiring them to DB via Prisma. -* **Implement atomic quota decrement** when each image job is en-queued §56-57 -* **Create cron job** using node-crond to reset quotas at UTC 00:00 monthly §58 -* **Write integration tests** (Vitest) for the above. - -### Dev B – Worker & Vision - -* **Swap dummy worker for real BullMQ worker**; configure 5-attempt exponential back-off §65 -* **Integrate ClamAV scan** for each file before Vision call ([Transloadit][3], [DEV Community][4]) (fulfils §62). -* **Call Azure AI Vision v4 tagging API** and persist tags ≥0.40 confidence §38-41 -* **Implement filename generation algorithm** satisfying §43-48, including stop-word removal and collision suffixes . -* **Stream progress via WebSocket** (`images/{id}/status`) when each step finishes §77 . - -### Dev C – Front-end / UX - -* **Keyword chip-list & “Enhance” button** with optimistic UI §33-37 . -* **Review Table** with inline-edit, regenerate-name, and shimmer placeholders §49-53, 70 . -* **Download ZIP** trigger once all rows DONE (§54-55) and show quota bar (§67). -* **Accessibility pass** (keyboard navigation, aria labels) towards Lighthouse ≥90 §59, 85 . +| Dev | Core tasks | Spec link | External refs | +| ----- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------- | +| **A** | • Implement Google OAuth 2.0 “code” flow (§18-21); store only hashed email | Google OAuth best practices ([Google for Developers][2]) | | +| **B** | • Write `/api/batch` endpoint: accept multipart form, persist originals to MinIO, enqueue stub job (§29-32, 73) | BullMQ queue skeleton ([docs.bullmq.io][3]) | | +| **C** | • Drag-and-drop component with quota gate & SHA-256 dedup (§26-28) | React D-n-D tutorial ([Medium][4]) | | --- -## Phase 3 – Paid Plans & Quota Enforcement (Weeks 5-8) +## Phase 2 – Vision Pipeline & Real-time Progress (Week 2) -### Dev A - -* **Stripe Billing integration**: Checkout, customer portal, webhooks updating `plan` & `quota_remaining` ([Stripe][5], [Stripe][6]). -* **Usage-meter rows** in `payments` table; expose `/api/usage` for dashboard. -* **Automated downgrade** to Basic on cancellation (§25). - -### Dev B - -* **Batch ZIP assembly** in worker using archiver; preserve EXIF (§54-55). -* **S3-compatible storage move to MinIO production cluster** with signed URLs (spec §30 + MinIO docs) ([min.io][7]). -* **Queue metrics** to Prometheus histogram (§84). - -### Dev C - -* **Billing page & upgrade modal** (§22-24, 71). -* **Plan badge & quota reset animation** after webhook arrives via SSE. -* **Error states UI** (e.g., virus detected, vision failure). +| Dev | Core tasks | Spec link | External refs | +| ----- | ----------------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | +| **B** | • Integrate Google Cloud Vision label detection; discard < 0.40 confidence (§38-40) | Vision label API sample ([Google Cloud][5]) | | +| **A** | • `/api/batch/{id}/status` + WebSocket publisher (§74, 77) | WebSocket progress patterns ([GeeksforGeeks][6]) | | +| **C** | • Shimmer placeholder while waiting (§70); live progress bar | | | --- -## Phase 4 – Production Hardening (Weeks 9-12) +## Phase 3 – Filename Generation & Review UI (Week 3) -*All Devs participate; primary owner noted* - -| Owner | Task | -| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| **A** | **OpenTelemetry tracing + Sentry error capture** (§82-83). | -| **B** | **Load testing and queue autoscale rules**; follow BullMQ robustness guidance ([Medium][8]). | -| **C** | **Lighthouse & a11y polish** to hit 90/90 (§59, 85). | -| **A** | **Prisma `migrate deploy` pipeline** and expand-and-contract strategy ([GitHub][9], [wasp.sh][10]). | -| **B** | **Security review**: ClamAV update job, Redis auth, secrets manager (§61-63). | -| **All** | **CI/CD**: ESLint, unit + e2e, Docker multi-stage build < 300 MB (§87) ([Docker Documentation][11], [blacksmith.sh][12], [GitHub][13]). | +| Dev | Core tasks | Spec link | External refs | +| ----- | --------------------------------------------------------------------------------------- | --------- | ------------- | +| **B** | • Implement filename algorithm (§43-48); unit-test collisions | | | +| **C** | • Review Table with inline edit, regenerate, and disabled “Download ZIP” logic (§49-55) | | | +| **A** | • `/api/batch/{id}/zip` stream preserving EXIF (§54-55) | | | --- -## Phase 5 – Growth & Ecosystem (Quarter 2) +## Phase 4 – Billing & Quota (Week 4) -* **CLI uploader & public API token auth** (Dev A). -* **LLM-powered keyword enhancement quality tuning** (Dev B). -* **Multi-language UI groundwork** (Dev C, extracting i18n JSON; spec §86). -* **Admin analytics dashboard** (collab). -* **Optional: marketplace listing & SEO content marketing** (team). +| Dev | Core tasks | Spec link | External refs | +| ----- | ------------------------------------------------------------------------------- | ------------------------------------------ | ------------- | +| **A** | • Stripe Checkout session & webhook handler (§22-24); store usage rows (§56-58) | Stripe usage-record API ([Stripe Docs][7]) | | +| **B** | • Cron job to reset quotas monthly (§58) | | | +| **C** | • Billing modal UX ≤ 3 clicks (§71) | | | --- -## Cross-cutting, continuous duties +## Phase 5 – Security, Rate-limiting & Observability (Week 5) -* **Code-review rotation**: each PR must be reviewed by one dev outside its domain. -* **Weekly demo** to keep UI/APIcontracts honest. -* **Error budget & on-call**: 24 h chat response for prod issues once paying users arrive. -* **Documentation**: keep `/docs/ARCHITECTURE.md` and API schema up-to-date. +| Dev | Core tasks | Spec link | External refs | +| ----- | --------------------------------------------------------- | --------------------------------------- | ------------- | +| **B** | • ClamAV scan in worker before Vision call (§62) | Node-ClamAV guide ([Transloadit][8]) | | +| **A** | • Redis-backed rate-limit middleware for all APIs | Redis limiter example ([webdock.io][9]) | | +| **B** | • OpenTelemetry trace IDs, Prometheus histograms (§82-84) | | | +| **C** | • ARIA labels & keyboard nav (§85) | | | --- -### Why this works +## Phase 6 – Hardening & Deploy (Week 6) -*Each developer owns a vertical slice* so they can deliver value independently and learn the adjacent stack surface. *Shared DevOps, security, and reviews* prevent silos. The plan aligns strictly with the numbered requirements in your spec §10-90 while following industry best-practices for OAuth ([Google for Developers][1], [DEV Community][2]), queues ([docs.bullmq.io][14], [Medium][8]), database migrations ([GitHub][9], [wasp.sh][10]), malware scanning ([Transloadit][3], [DEV Community][4]), computer-vision tagging ([Microsoft Learn][15], [Microsoft Learn][16]), billing ([Stripe][5], [Stripe][6]), object storage ([min.io][7]), and container builds ([Docker Documentation][11], [GitHub][13]). Follow this sequence and the team will ship a monetisable, secure, and maintainable SaaS on schedule. +| Dev | Core tasks | Spec link | External refs | +| ----- | ---------------------------------------------------------------- | ------------------------------------------------- | ------------- | +| **A** | • Multi-stage Dockerfile ≤ 300 MB (§87) | Docker multi-stage tutorial ([cloudnweb.dev][10]) | | +| **B** | • Helm charts / K8s manifests; liveness & readiness probes (§90) | | | +| **C** | • Achieve ≥ 90 Lighthouse scores (§59) | | | -[1]: https://developers.google.com/identity/protocols/oauth2/resources/best-practices?utm_source=chatgpt.com "Best Practices | Authorization Resources" -[2]: https://dev.to/hamzakhan/mastering-oauth-20-in-modern-web-applications-security-best-practices-for-2024-26ed?utm_source=chatgpt.com "🔒 Mastering OAuth 2.0 in Modern Web Applications ..." -[3]: https://transloadit.com/devtips/implementing-server-side-malware-scanning-with-clamav-in-node-js/?utm_source=chatgpt.com "Implementing server-side malware scanning with ClamAV ..." -[4]: https://dev.to/jfbloom22/how-to-virus-scan-file-users-upload-using-clamav-2i5d?utm_source=chatgpt.com "How to virus scan file users upload using ClamAV" -[5]: https://stripe.com/in/billing?utm_source=chatgpt.com "Stripe Billing | Recurring Payments & Subscription Solutions" -[6]: https://stripe.com/billing/usage-based-billing?utm_source=chatgpt.com "Stripe Usage-Based Billing Software" -[7]: https://min.io/docs/minio/container/index.html?utm_source=chatgpt.com "MinIO Object Storage for Container" -[8]: https://medium.com/%40karthiks05/how-we-built-a-robust-message-queue-using-bullmq-part-1-2d5ad1016958?utm_source=chatgpt.com "How We Built a Robust Message Queue Using BullMQ" -[9]: https://github.com/prisma/prisma/discussions/24571?utm_source=chatgpt.com "How should migration be done to Production? #24571" -[10]: https://wasp.sh/blog/2025/04/02/an-introduction-to-database-migrations?utm_source=chatgpt.com "A Gentle Introduction to Database Migrations in Prisma ..." -[11]: https://docs.docker.com/build/building/best-practices/?utm_source=chatgpt.com "Building best practices" -[12]: https://www.blacksmith.sh/blog/understanding-multi-stage-docker-builds?ref=geeknest.ru&utm_source=chatgpt.com "Understanding Multi-Stage Docker Builds" -[13]: https://github.com/goldbergyoni/nodebestpractices?utm_source=chatgpt.com "The Node.js best practices list (July 2024)" -[14]: https://docs.bullmq.io/guide/retrying-failing-jobs?utm_source=chatgpt.com "Retrying failing jobs" -[15]: https://learn.microsoft.com/en-us/azure/ai-services/computer-vision/whats-new?utm_source=chatgpt.com "What's new in Azure AI Vision?" -[16]: https://learn.microsoft.com/en-us/azure/ai-services/computer-vision/concept-tag-images-40?utm_source=chatgpt.com "Content tags - Image Analysis 4.0 - Azure AI services" +--- + +## Phase 7 – Beta, QA & Launch (Week 7+) + +1. **A / B** – Load-test queue & database; horizontal-scale workers via separate K8s deployment (§64-65). +2. **C** – Usability test with 10 external users; fix friction points in drag-and-drop and review flow. +3. **All** – Run full compliance suite (spec §91-92); smoke-test zero-downtime rolling deploy. +4. **All** – Prepare launch comms, status-page, and support SOP. + +--- + +## Milestone Calendar (gantt-style) + +| Week | Deliverable | +| ---- | ------------------------------------------------ | +| 0 | CI green, Docker Compose spins up | +| 1 | OAuth sign-in → drag-drop upload → stub progress | +| 2 | Vision tags + live progress bar | +| 3 | Review table & ZIP download | +| 4 | Stripe billing & enforced quotas | +| 5 | Security / monitoring budgets green | +| 6 | First prod deploy on Kubernetes | +| 7 | Public beta → launch | + +--- + +### Why these tasks guarantee spec coverage + +*Each numbered requirement in the specification (10-90) is matched to at least one backlog item above, ensuring nothing is missed.* External references back up every key architectural decision: OAuth hardening ([Google for Developers][2]), Stripe metered billing ([Stripe Docs][7]), BullMQ queue semantics ([docs.bullmq.io][3]), ClamAV scanning ([Transloadit][8]), Vision label extraction ([Google Cloud][5]), MinIO S3 parity ([min.io][1]), React drag-and-drop UX ([Medium][4]), WebSocket progress patterns ([GeeksforGeeks][6]), multi-stage Docker builds ([cloudnweb.dev][10]), and Redis rate-limiting ([webdock.io][9]). Together they give the three developers a clear, testable path to shipping a fully compliant, production-ready “AI Bulk Image Renamer” SaaS. + +[1]: https://min.io/product/s3-compatibility?utm_source=chatgpt.com "AWS S3 Compatible Object Storage" +[2]: https://developers.google.com/identity/protocols/oauth2/resources/best-practices?utm_source=chatgpt.com "Best Practices | Authorization Resources" +[3]: https://docs.bullmq.io/?utm_source=chatgpt.com "What is BullMQ | BullMQ" +[4]: https://medium.com/%40dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0?utm_source=chatgpt.com "Creating a Drag-and-Drop File Upload Component in React" +[5]: https://cloud.google.com/vision/docs/labels?utm_source=chatgpt.com "Detect Labels | Cloud Vision API" +[6]: https://www.geeksforgeeks.org/reactjs/real-time-updates-with-websockets-and-react-hooks/?utm_source=chatgpt.com "Real-time Updates with WebSockets and React Hooks" +[7]: https://docs.stripe.com/billing/subscriptions/usage-based/recording-usage-api?utm_source=chatgpt.com "Record usage for billing with the API" +[8]: https://transloadit.com/devtips/implementing-server-side-malware-scanning-with-clamav-in-node-js/?utm_source=chatgpt.com "Implementing server-side malware scanning with ClamAV ..." +[9]: https://webdock.io/en/docs/how-guides/database-guides/rate-limiting-redis-and-nodejs-under-hood?srsltid=AfmBOopRz8keqWAipmUZsrIyxdtxxce_tnd7TF7GkXrJgiB6vWHXAEZY&utm_source=chatgpt.com "Rate Limiting with Redis and Node.js: Under the Hood" +[10]: https://www.cloudnweb.dev/2019/10/crafting-multi-stage-builds-with-docker-in-node-js/?utm_source=chatgpt.com "Crafting multi-stage builds with Docker in Node.js - DEV Community"