Vibecode-Together/SEO_iamge_renamer_starting_point
1
0
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

new-plan

Browse source
This commit is contained in:
DustyWalker 2025-08-04 21:04:50 +02:00
parent 04eb4fad08
commit 8faf2c9dde
1 changed files with 84 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

169
plan-for-devs.md
View file

@ -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. | Dev | Core tasks | Why / spec tie-in | Key refs |
*Specification refs §18, 26-32, 73-77* | ----- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------ |
| **A** | • Initialise mono-repo (pnpm workspaces)<br>• 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<br>• 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<br>• 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 | Dev | Core tasks | Spec link | External refs |
| ----- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------- |
* **Harden Google OAuth flow**: add state + PKCE, token verification, refresh‐token rotation ([Google for Developers][1], [DEV Community][2]) | **A** | • Implement Google OAuth 2.0 “code” flow (§18-21); store only hashed email | Google OAuth best practices ([Google for Developers][2]) | |
* **Finish REST endpoints** `/api/batch`, `/status`, `/zip`, `/keywords/enhance`, wiring them to DB via Prisma. | **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]) | |
* **Implement atomic quota decrement** when each image job is en-queued §56-57&#x20; | **C** | • Drag-and-drop component with quota gate & SHA-256 dedup (§26-28) | React D-n-D tutorial ([Medium][4]) | |
* **Create cron job** using node-crond to reset quotas at UTC 00:00 monthly §58&#x20;
* **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 .
--- ---
## Phase 3 – Paid Plans & Quota Enforcement (Weeks 5-8) ## Phase 2 – Vision Pipeline & Real-time Progress (Week 2)
### Dev A | Dev | Core tasks | Spec link | External refs |
| ----- | ----------------------------------------------------------------------------------- | ------------------------------------------------ | ------------- |
* **Stripe Billing integration**: Checkout, customer portal, webhooks updating `plan` & `quota_remaining` ([Stripe][5], [Stripe][6]). | **B** | • Integrate Google Cloud Vision label detection; discard < 0.40 confidence (§38-40) | Vision label API sample ([Google Cloud][5]) | |
* **Usage-meter rows** in `payments` table; expose `/api/usage` for dashboard. | **A** | • `/api/batch/{id}/status` + WebSocket publisher (§74, 77) | WebSocket progress patterns ([GeeksforGeeks][6]) | |
* **Automated downgrade** to Basic on cancellation (§25). | **C** | • Shimmer placeholder while waiting (§70); live progress bar | | |
### 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).
--- ---
## Phase 4 – Production Hardening (Weeks 9-12) ## Phase 3 – Filename Generation & Review UI (Week 3)
*All Devs participate; primary owner noted* | Dev | Core tasks | Spec link | External refs |
| ----- | --------------------------------------------------------------------------------------- | --------- | ------------- |
| Owner | Task | | **B** | • Implement filename algorithm (§43-48); unit-test collisions | | |
| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | | **C** | • Review Table with inline edit, regenerate, and disabled “Download ZIP” logic (§49-55) | | |
| **A** | **OpenTelemetry tracing + Sentry error capture** (§82-83). | | **A** | • `/api/batch/{id}/zip` stream preserving EXIF (§54-55) | | |
| **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]). |
--- ---
## Phase 5 – Growth & Ecosystem (Quarter 2) ## Phase 4 – Billing & Quota (Week 4)
* **CLI uploader & public API token auth** (Dev A). | Dev | Core tasks | Spec link | External refs |
* **LLM-powered keyword enhancement quality tuning** (Dev B). | ----- | ------------------------------------------------------------------------------- | ------------------------------------------ | ------------- |
* **Multi-language UI groundwork** (Dev C, extracting i18n JSON; spec §86). | **A** | • Stripe Checkout session & webhook handler (§22-24); store usage rows (§56-58) | Stripe usage-record API ([Stripe Docs][7]) | |
* **Admin analytics dashboard** (collab). | **B** | • Cron job to reset quotas monthly (§58) | | |
* **Optional: marketplace listing & SEO content marketing** (team). | **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. | Dev | Core tasks | Spec link | External refs |
* **Weekly demo** to keep UI/APIcontracts honest. | ----- | --------------------------------------------------------- | --------------------------------------- | ------------- |
* **Error budget & on-call**: 24 h chat response for prod issues once paying users arrive. | **B** | • ClamAV scan in worker before Vision call (§62) | Node-ClamAV guide ([Transloadit][8]) | |
* **Documentation**: keep `/docs/ARCHITECTURE.md` and API schema up-to-date. | **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 ..." ## Phase 7 – Beta, QA & Launch (Week 7+)
[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" 1. **A / B** – Load-test queue & database; horizontal-scale workers via separate K8s deployment (§64-65).
[6]: https://stripe.com/billing/usage-based-billing?utm_source=chatgpt.com "Stripe Usage-Based Billing Software" 2. **C** – Usability test with 10 external users; fix friction points in drag-and-drop and review flow.
[7]: https://min.io/docs/minio/container/index.html?utm_source=chatgpt.com "MinIO Object Storage for Container" 3. **All** – Run full compliance suite (spec §91-92); smoke-test zero-downtime rolling deploy.
[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" 4. **All** – Prepare launch comms, status-page, and support SOP.
[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" ## Milestone Calendar (gantt-style)
[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" | Week | Deliverable |
[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" | 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"