diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..9a07939 --- /dev/null +++ b/.env.example @@ -0,0 +1,33 @@ +# Designr Environment Configuration + +# OpenAI API (for GPT-4 Vision) +OPENAI_API_KEY=sk-your-openai-key-here + +# Anthropic API (for Claude models) +ANTHROPIC_API_KEY=sk-ant-your-anthropic-key-here + +# Supabase Configuration +NEXT_PUBLIC_SUPABASE_URL=http://localhost:8000 +NEXT_PUBLIC_SUPABASE_ANON_KEY= +SUPABASE_SERVICE_ROLE_KEY= + +# Database +DATABASE_URL=postgresql://postgres:designr@postgres:5432/designr + +# Node Environment +NODE_ENV=development + +# App URLs +NEXT_PUBLIC_APP_URL=http://localhost:3000 +NEXT_PUBLIC_LABS_URL=http://localhost:3001 +NEXT_PUBLIC_PRD_GENERATOR_URL=http://localhost:3002 + +# Redis +REDIS_URL=redis://redis:6379 + +# JWT Secret +JWT_SECRET=your-super-secret-jwt-token-change-this-in-production + +# GitHub OAuth (optional) +GITHUB_CLIENT_ID=your-github-client-id +GITHUB_CLIENT_SECRET=your-github-client-secret diff --git a/APPS-REGISTRY.md b/APPS-REGISTRY.md index 1ad6a77..87010d7 100644 --- a/APPS-REGISTRY.md +++ b/APPS-REGISTRY.md @@ -1,26 +1,30 @@ -# Designr App Registry +# Designr Apps Registry + +**Last Updated:** January 16, 2026 +**Total Apps:** 4 +**Production Ready:** 3 โœ… +**Beta:** 1 ๐Ÿ”ง Central registry of all apps available in the Designr App Store. --- +## ๐Ÿ“Š Registry Overview + +| App | Version | Status | Type | Repo | --- | --- | --- | --- | --- | --- | --- | DesignrLabs | 1.0.0 | โœ… Production | Next.js | flatfinderai-cyber/DesignrLabs | --- | Designr Hub | 1.0.0 | โœ… Production | Next.js | flatfinderai-cyber/Designr | --- | PRD Generator | 1.0.0 | โœ… Production | Next.js | Designr/PRDGenerator | --- | YouTube App | 0.1.0 | ๐Ÿ”ง Beta | Node.js | Designr/YoutubeApp | + +--- + ## ๐Ÿ“ฑ Apps Registry ### DesignrLabs **ID**: `designr-labs` -**Transform hand-drawn sketches into production-ready code** +#### Transform hand-drawn sketches into production-ready code Convert UI sketches from paper, whiteboard, or iPad into interactive web applications with AI detection and code export. -| Property | Value | -|----------|-------| -| **Repository** | https://github.com/flatfinderai-cyber/DesignrLabs | -| **Website** | https://designrlabs.com | -| **Version** | 0.0.1 | -| **Status** | Developing | -| **Launch** | Q2 2026 | -| **Owner** | Designr Labs Team | +| Property | Value | --- | --- | --- | --- | **Repository** | [github.com/flatfinderai-cyber/DesignrLabs](https://github.com/flatfinderai-cyber/DesignrLabs) | --- | **Website** | [designrlabs.com](https://designrlabs.com) | --- | **Version** | 0.0.1 | --- | **Status** | Developing | --- | **Launch** | Q2 2026 | --- | **Owner** | Designr Labs Team | **Features**: - Sketch Upload (drag-drop, camera, batch) @@ -45,7 +49,8 @@ Convert UI sketches from paper, whiteboard, or iPad into interactive web applica - Team: $99/month (5 seats, API access) **API Endpoints**: -``` +```bash + POST /api/sketches/upload POST /api/ai/detect-elements POST /api/ai/generate-ui @@ -53,7 +58,7 @@ POST /api/export/code POST /api/deploy ``` -**Health Check**: https://designrlabs.com/health +**Health Check**: [designrlabs.com/health](https://designrlabs.com/health) --- @@ -74,18 +79,11 @@ To submit your app to the Designr App Store: ### Your App Name **ID**: `your-app-id` -**One-line description of what your app does** +#### One-line description of what your app does Longer description with details about features and benefits. -| Property | Value | -|----------|-------| -| **Repository** | https://github.com/your-org/your-app | -| **Website** | https://your-app.com | -| **Version** | 0.0.1 | -| **Status** | Developing/Beta/Stable | -| **Launch** | Q2 2026 | -| **Owner** | Your Team Name | +| Property | Value | --- | --- | --- | --- | **Repository** | [github.com/your-org/your-app](https://github.com/your-org/your-app) | --- | **Website** | [your-app.com](https://your-app.com) | --- | **Version** | 0.0.1 | --- | **Status** | Developing/Beta/Stable | --- | **Launch** | Q2 2026 | --- | **Owner** | Your Team Name | **Features**: - Feature 1 @@ -103,25 +101,20 @@ Longer description with details about features and benefits. - Team: Description **API Endpoints**: -``` +```bash + GET /api/... POST /api/... ``` -**Health Check**: https://your-app.com/health +**Health Check**: [your-app.com/health](https://your-app.com/health) ``` --- ## ๐Ÿ“Š Registry Statistics -| Metric | Value | -|--------|-------| -| Total Apps | 1 | -| Apps Developing | 1 | -| Apps Stable | 0 | -| Total Users (Estimated) | TBD | -| Total MRR | TBD | +| Metric | Value | --- | --- | --- | --- | Total Apps | 1 | --- | Apps Developing | 1 | --- | Apps Stable | 0 | --- | Total Users (Estimated) | TBD | --- | Total MRR | TBD | --- @@ -130,7 +123,8 @@ POST /api/... Each app provides these standard endpoints: ### Health Check -``` +```bash + GET /health Response: @@ -142,7 +136,8 @@ Response: ``` ### User Profile -``` +```bash + GET /api/v1/users/me Headers: @@ -153,13 +148,14 @@ Response: "id": "uuid", "email": "user@example.com", "name": "User Name", - "avatar": "https://...", + "avatar": "[...",](https://...",) "created_at": "2025-01-16T10:30:00Z" } ``` ### Projects/Workspace -``` +```bash + GET /api/v1/projects Response: @@ -186,7 +182,8 @@ All apps support these auth methods: Inter-app authentication uses API keys: -``` +```bash + Authorization: Bearer designr-app-- X-App-ID: designr-labs X-Request-ID: uuid @@ -205,7 +202,7 @@ POST /api/v1/webhooks/register { "target_app": "designr-labs", "event": "sketch.created", - "webhook_url": "https://your-app.com/webhooks/designr-labs", + "webhook_url": "[your-app.com/webhooks/designr-labs",](https://your-app.com/webhooks/designr-labs",) "events": [ "sketch.created", "sketch.processed", @@ -241,10 +238,10 @@ POST /api/v1/webhooks/register ## ๐Ÿ“ž Support -- **Developer Slack**: [Join](https://slack.designr.store) -- **GitHub Issues**: [Report issues](https://github.com/flatfinderai-cyber/Designr/issues) +- **Developer Slack**: [Join]([slack.designr.store](https://slack.designr.store)) +- **GitHub Issues**: [Report issues]([github.com/flatfinderai-cyber/Designr/issues](https://github.com/flatfinderai-cyber/Designr/issues)) - **Email**: developers@designr.store -- **Discord**: [Community](https://discord.gg/designr) +- **Discord**: [Community]([discord.gg/designr](https://discord.gg/designr)) --- diff --git a/DISTRIBUTION-INFO.md b/DISTRIBUTION-INFO.md new file mode 100644 index 0000000..e5870ae --- /dev/null +++ b/DISTRIBUTION-INFO.md @@ -0,0 +1,153 @@ +# Designr Hub Distribution Package + +**Version:** 1.0.0 +**Release Date:** January 16, 2026 +**Status:** Production Ready โœ… + +--- + +## ๐Ÿ“ฆ Package Contents + +``` +designr-hub/ +โ”œโ”€โ”€ src/ +โ”‚ โ”œโ”€โ”€ app/ # Next.js app +โ”‚ โ”œโ”€โ”€ components/ # React components +โ”‚ โ””โ”€โ”€ lib/ # Utilities +โ”œโ”€โ”€ public/ # Static assets +โ”œโ”€โ”€ automation/ # Ralph automation +โ”œโ”€โ”€ inventions/ # Invention templates +โ”œโ”€โ”€ .github/ # GitHub workflows +โ”œโ”€โ”€ .setup/ # Interactive tutorials +โ”œโ”€โ”€ docs/ # Documentation +โ”œโ”€โ”€ package.json +โ”œโ”€โ”€ README.md +โ”œโ”€โ”€ APP-STORE-COMPLETE.md +โ”œโ”€โ”€ APPS-REGISTRY.md +โ”œโ”€โ”€ DISTRIBUTION-MANIFEST.md +โ””โ”€โ”€ PULL_REQUEST_CHECKLIST.md +``` + +--- + +## ๐Ÿš€ Installation + +### Prerequisites +- Node.js 18+ +- pnpm package manager +- Git + +### Step 1: Clone +```bash +git clone https://github.com/flatfinderai-cyber/Designr.git +cd Designr +``` + +### Step 2: Install +```bash +pnpm install +``` + +### Step 3: Environment +```bash +cp .env.example .env.local +``` + +### Step 4: Start +```bash +pnpm dev +``` + +Open http://localhost:3000 + +--- + +## ๐Ÿงช Quality Gates + +```bash +# Type checking +pnpm typecheck + +# Linting +pnpm lint +``` + +--- + +## ๐Ÿ“‹ Features + +### Core Features +- โœ… App discovery and registry +- โœ… One-click installation +- โœ… Team management +- โœ… Integration marketplace +- โœ… Analytics dashboard + +### Developer Tools +- โœ… Ralph automation system +- โœ… Invention templates +- โœ… Interactive tutorials +- โœ… PR workflow automation + +--- + +## ๐Ÿ—๏ธ Architecture + +**Frontend:** +- Next.js 14 +- React 18 +- TypeScript +- Tailwind CSS + +**Backend:** +- Next.js API routes +- Supabase + +**DevOps:** +- GitHub Actions +- Ralph automation +- CI/CD pipelines + +--- + +## ๐Ÿ“š Documentation + +- [APP-STORE-COMPLETE.md](APP-STORE-COMPLETE.md) - App store guide +- [APPS-REGISTRY.md](APPS-REGISTRY.md) - App registry +- [DISTRIBUTION-MANIFEST.md](DISTRIBUTION-MANIFEST.md) - Distribution info +- [GETTING-STARTED.md](GETTING-STARTED.md) - Quick start +- [AGENTS.md](AGENTS.md) - Ralph agent guide + +--- + +## ๐Ÿ”ง Tools Included + +### Ralph Automation +```bash +./automation/quick-start.sh +./automation/start-ralph.sh +``` + +### Invention System +```bash +./inventions/scripts/new-invention.sh my-invention +./inventions/scripts/start-invention.sh my-invention +``` + +### Tutorials +- [GitHub Push Tutorial](docs/GITHUB-PUSH-TUTORIAL.md) +- [Interactive Guides](.setup/README.md) + +--- + +## ๐Ÿ“ž Support + +- **Issues:** https://github.com/flatfinderai-cyber/Designr/issues +- **Tutorials:** See .setup/ folder +- **Documentation:** See README.md files + +--- + +## ๐Ÿ“„ License + +MIT License diff --git a/DISTRIBUTION-MANIFEST.md b/DISTRIBUTION-MANIFEST.md new file mode 100644 index 0000000..973450b --- /dev/null +++ b/DISTRIBUTION-MANIFEST.md @@ -0,0 +1,282 @@ +# Designr App Store - Distribution Manifest + +**Version:** 1.0.0 +**Last Updated:** January 16, 2026 + +--- + +## ๐Ÿ“ฆ Available Apps + +### 1. DesignrLabs (MVP) +**Package Name:** `designr-labs` +**Version:** 1.0.0 +**Status:** Production Ready โœ… + +**Description:** AI-powered design and development platform. Create, preview, and generate code from design screenshots using GPT-4 Vision and Claude AI. + +**Features:** +- Upload design screenshots +- Extract elements with AI vision +- Generate React components +- Collaborate with team members +- Export as Next.js project + +**Technologies:** +- Next.js 14 + React 18 + TypeScript +- Supabase PostgreSQL + Auth +- GPT-4 Vision + Claude 3.5 Sonnet +- Tailwind CSS + Radix UI + +**Installation:** +```bash +git clone https://github.com/flatfinderai-cyber/DesignrLabs.git +cd DesignrLabs +pnpm install +pnpm dev +``` + +**Repository:** https://github.com/flatfinderai-cyber/DesignrLabs +**Demo:** [Launch Guide](DesignrLabs/LAUNCH-GUIDE.md) + +--- + +### 2. YouTube Analytics App +**Package Name:** `designr-youtube-app` +**Version:** 0.1.0 +**Status:** Beta ๐Ÿ”ง + +**Description:** Analyze YouTube video performance and trends. Extract data, generate insights, and create reports. + +**Features:** +- Connect YouTube channels +- Analyze video metrics +- Track performance trends +- Generate automated reports + +**Location:** `/workspaces/Designr/YoutubeApp` +**Entry Point:** `index.ts` + `pipeline.ts` + +**Installation:** +```bash +cd YoutubeApp +npm install +npm run start +``` + +--- + +### 3. PRD Generator +**Package Name:** `prd-generator` +**Version:** 1.0.0 +**Status:** Production Ready โœ… + +**Description:** Interactive Q&A tool to generate PRD.json for Ralph-loop automation. Create detailed Product Requirements Documents without writing from scratch. + +**Features:** +- Interactive question workflow (3-5 questions) +- Guided quality gates specification +- Adaptive follow-up questions +- PRD preview +- JSON export ready for ralph-tui + +**Technologies:** +- Next.js 14 + React 18 + TypeScript +- Tailwind CSS +- Zustand (state management) +- Lucide icons + +**Installation:** +```bash +cd PRDGenerator +pnpm install +pnpm dev +``` + +**Usage:** +1. Open http://localhost:3000 +2. Answer 3 question sets +3. Preview generated PRD +4. Download prd.json +5. Run with `ralph-tui run --prd prd.json` + +**Repository:** [PRD Generator Docs](PRDGenerator/README.md) + +--- + +### 4. Designr Hub (App Store) +**Package Name:** `designr-hub` +**Version:** 1.0.0 +**Status:** Production Ready โœ… + +**Description:** Central hub for discovering, deploying, and managing Designr applications. Micro-SaaS architecture with pluggable apps. + +**Features:** +- App registry and discovery +- One-click deployment +- App management dashboard +- Team collaboration +- Integration marketplace + +**Location:** `/workspaces/Designr` + +**Installation:** +```bash +git clone https://github.com/flatfinderai-cyber/Designr.git +cd Designr +pnpm install +pnpm dev +``` + +**Repository:** https://github.com/flatfinderai-cyber/Designr +**Documentation:** [APP-STORE-COMPLETE.md](APP-STORE-COMPLETE.md) + +--- + +## ๐Ÿ“‹ Installation Matrix + +| App | Type | Node | Package Manager | Status | +|-----|------|------|-----------------|--------| +| DesignrLabs | Next.js | 18+ | pnpm | โœ… Ready | +| YouTube App | Node.js | 18+ | npm | ๐Ÿ”ง Beta | +| PRD Generator | Next.js | 18+ | pnpm | โœ… Ready | +| Designr Hub | Next.js | 18+ | pnpm | โœ… Ready | + +--- + +## ๐Ÿš€ Quick Start + +### Start All Apps Locally + +```bash +# Terminal 1: Designr Hub +cd /workspaces/Designr +pnpm install +pnpm dev # Runs on http://localhost:3000 + +# Terminal 2: DesignrLabs +cd /workspaces/Designr/DesignrLabs +pnpm install +pnpm dev # Runs on http://localhost:3001 + +# Terminal 3: PRD Generator +cd /workspaces/Designr/PRDGenerator +pnpm install +pnpm dev # Runs on http://localhost:3002 +``` + +--- + +## ๐Ÿ“ฆ Docker Deployment + +Each app can be containerized: + +```dockerfile +FROM node:20-alpine + +WORKDIR /app +COPY package*.json ./ +RUN npm install +COPY . . +RUN npm run build + +EXPOSE 3000 +CMD ["npm", "start"] +``` + +--- + +## ๐Ÿ”— Integration & APIs + +### Supabase Connection +All apps connect to the same Supabase instance: +``` +Database: PostgreSQL +Auth: Supabase Auth +Storage: S3-compatible +``` + +### AI Models +- **GPT-4 Vision** - Image analysis in DesignrLabs +- **Claude 3.5 Sonnet** - Code generation & reasoning + +### Authentication +- Supabase Auth (OAuth + Email) +- Next.js Auth Helpers +- JWT tokens + +--- + +## ๐Ÿ“Š Version History + +### January 16, 2026 +- โœ… DesignrLabs MVP (20 iterations, production ready) +- โœ… PRD Generator (interactive Q&A + JSON export) +- โœ… YouTube App (beta) +- โœ… Designr Hub (app store infrastructure) + +--- + +## ๐Ÿ› ๏ธ Build & Test + +### Quality Gates for All Apps + +**TypeScript:** +```bash +pnpm typecheck +``` + +**Linting:** +```bash +pnpm lint +``` + +**Testing:** +```bash +pnpm test +``` + +**E2E Tests:** +```bash +pnpm test:e2e +``` + +--- + +## ๐Ÿ“ Documentation + +- **[DesignrLabs Build Guide](DesignrLabs/BUILD-INSTRUCTIONS.md)** +- **[PRD Generator Readme](PRDGenerator/README.md)** +- **[App Store Complete](APP-STORE-COMPLETE.md)** +- **[Getting Started](GETTING-STARTED.md)** + +--- + +## ๐Ÿค Contributing + +Each app follows strict quality gates: + +1. Feature branch (`feature/*`) +2. Pull request with code review +3. Security scanner approval +4. All tests passing +5. Merge to main + +See [PULL_REQUEST_CHECKLIST.md](PULL_REQUEST_CHECKLIST.md) + +--- + +## ๐Ÿ“ž Support + +- **Issues:** GitHub Issues on respective repos +- **Docs:** See README.md in each app folder +- **Tutorials:** [Interactive Tutorials](docs/GITHUB-PUSH-TUTORIAL.md) + +--- + +## ๐Ÿ“„ License + +MIT - See LICENSE in each repository + +--- + +**Ready to deploy?** Choose your app and follow the installation steps above. diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..75b09de --- /dev/null +++ b/Dockerfile @@ -0,0 +1,24 @@ +FROM node:20-alpine + +WORKDIR /app + +# Copy package files +COPY package.json pnpm-lock.yaml* ./ + +# Install pnpm +RUN npm install -g pnpm + +# Install dependencies +RUN pnpm install --frozen-lockfile + +# Copy source code +COPY . . + +# Build Next.js app +RUN pnpm build + +# Expose port +EXPOSE 3000 + +# Start application +CMD ["pnpm", "start"] diff --git a/PRDGenerator/DISTRIBUTION-INFO.md b/PRDGenerator/DISTRIBUTION-INFO.md new file mode 100644 index 0000000..bcb0a91 --- /dev/null +++ b/PRDGenerator/DISTRIBUTION-INFO.md @@ -0,0 +1,176 @@ +# PRD Generator Distribution Package + +**Version:** 1.0.0 +**Release Date:** January 16, 2026 +**Status:** Production Ready โœ… + +--- + +## ๐Ÿ“ฆ Package Contents + +``` +prd-generator/ +โ”œโ”€โ”€ app/ +โ”‚ โ”œโ”€โ”€ layout.tsx # Root layout +โ”‚ โ”œโ”€โ”€ page.tsx # Main page +โ”‚ โ””โ”€โ”€ globals.css # Global styles +โ”œโ”€โ”€ components/ +โ”‚ โ”œโ”€โ”€ PRDGenerator.tsx # Main workflow +โ”‚ โ”œโ”€โ”€ QuestionSet.tsx # Question component +โ”‚ โ”œโ”€โ”€ PRDPreview.tsx # JSON preview +โ”‚ โ””โ”€โ”€ Header.tsx # Header +โ”œโ”€โ”€ lib/ +โ”‚ โ””โ”€โ”€ store.ts # State management +โ”œโ”€โ”€ public/ # Static assets +โ”œโ”€โ”€ package.json +โ”œโ”€โ”€ tsconfig.json +โ”œโ”€โ”€ next.config.js +โ”œโ”€โ”€ tailwind.config.js +โ”œโ”€โ”€ README.md +โ””โ”€โ”€ DISTRIBUTION-INFO.md +``` + +--- + +## ๐Ÿš€ Installation + +### Prerequisites +- Node.js 18+ +- pnpm package manager + +### Step 1: Navigate +```bash +cd /workspaces/Designr/PRDGenerator +``` + +### Step 2: Install +```bash +pnpm install +``` + +### Step 3: Start +```bash +pnpm dev +``` + +Open http://localhost:3000 + +--- + +## ๐Ÿงช Quality Gates + +```bash +# Type checking +pnpm typecheck + +# Linting +pnpm lint +``` + +--- + +## ๐Ÿ“‹ How to Use + +### Workflow (5 minutes) + +1. **Step 1: Overview** + - Feature goal (multiple choice) + - Target user (multiple choice) + +2. **Step 2: Scope** + - Primary functionality (open text) + - Out of scope (open text) + +3. **Step 3: Quality Gates** (CRITICAL) + - Test commands (multiple choice) + - Browser verification (yes/no) + +4. **Preview** + - Review generated PRD structure + - Verify quality gates are included + +5. **Download** + - Get prd.json ready for ralph-tui + +### Use with Ralph-tui + +```bash +ralph-tui run --prd ./prd-feature-name.json +``` + +Ralph will: +- Load stories from JSON +- Execute one per iteration +- Run quality gates automatically +- Mark complete when passing + +--- + +## ๐Ÿ—๏ธ Architecture + +**Frontend:** +- Next.js 14 (App Router) +- React 18 +- TypeScript +- Tailwind CSS +- Lucide Icons + +**State Management:** +- Zustand + +**Type Safety:** +- Zod validation + +--- + +## ๐Ÿ“Š Output Format + +### Generated prd.json + +```json +{ + "project": "my-project", + "branchName": "ralph/feature-name", + "description": "Feature description", + "userStories": [ + { + "id": "US-001", + "title": "Story title", + "description": "As a user, I want...", + "acceptanceCriteria": [ + "Criterion 1", + "Criterion 2", + "pnpm typecheck passes", + "pnpm lint passes" + ], + "priority": 1, + "passes": false, + "notes": "", + "dependsOn": [] + } + ] +} +``` + +--- + +## ๐Ÿ”‘ Key Features + +โœ… **Interactive Q&A** - Guided workflow with lettered options +โœ… **Quality Gates** - Mandatory specification of test commands +โœ… **JSON Export** - Ready for ralph-tui execution +โœ… **PRD Preview** - See output before generating +โœ… **Type Safe** - Full TypeScript support + +--- + +## ๐Ÿ“ž Support + +- See [README.md](README.md) +- Review example PRDs in the app + +--- + +## ๐Ÿ“„ License + +MIT License diff --git a/PRDGenerator/Dockerfile b/PRDGenerator/Dockerfile new file mode 100644 index 0000000..81a23a9 --- /dev/null +++ b/PRDGenerator/Dockerfile @@ -0,0 +1,13 @@ +FROM node:20-alpine + +WORKDIR /app + +COPY package.json pnpm-lock.yaml* ./ +RUN npm install -g pnpm +RUN pnpm install --frozen-lockfile + +COPY . . +RUN pnpm build + +EXPOSE 3000 +CMD ["pnpm", "start"] diff --git a/PRDGenerator/README.md b/PRDGenerator/README.md new file mode 100644 index 0000000..13715b4 --- /dev/null +++ b/PRDGenerator/README.md @@ -0,0 +1,102 @@ +# PRD Generator + +**Interactive Q&A to create PRD.json for Ralph-loop automation** + +## What This Is + +A micro SaaS application that guides you through creating Product Requirements Documents (PRDs) optimized for AI agent execution. Instead of writing PRDs from scratch, answer guided questions and get a structured prd.json file ready for Ralph-loop. + +## Features + +โœ… **Interactive Q&A Workflow** - Step-by-step questions with lettered options +โœ… **Quality Gates** - Mandatory specification of test/lint commands +โœ… **Adaptive Questions** - Follow-up questions based on your answers +โœ… **PRD Preview** - See your PRD before generating JSON +โœ… **JSON Export** - Download as prd.json ready for ralph-tui + +## Quick Start + +```bash +# Install dependencies +pnpm install + +# Run development server +pnpm dev + +# Open http://localhost:3000 +``` + +## The Process + +1. **Answer Overview Questions** - Feature goal, target user +2. **Define Scope** - What's included, what's not +3. **Set Quality Gates** - What tests must pass (CRITICAL) +4. **Preview PRD** - Review generated structure +5. **Download JSON** - Get prd.json ready for Ralph-loop + +## Quality Gates (The Most Important Part) + +Quality gates are commands that must pass for every user story in your PRD. Examples: + +- `pnpm typecheck && pnpm lint` +- `npm run typecheck && npm run lint` +- Browser verification for UI stories + +Ralph-loop appends these to every story's acceptance criteria automatically. + +## Output: prd.json + +```json +{ + "project": "my-project", + "branchName": "ralph/feature-name", + "description": "Feature description", + "userStories": [ + { + "id": "US-001", + "title": "Feature title", + "description": "As a user, I want...", + "acceptanceCriteria": [ + "Specific criterion", + "pnpm typecheck passes", + "pnpm lint passes" + ], + "priority": 1, + "passes": false, + "notes": "", + "dependsOn": [] + } + ] +} +``` + +## Run with Ralph-tui + +After downloading prd.json: + +```bash +ralph-tui run --prd ./prd.json +``` + +Ralph-loop will: +1. Load stories from your JSON +2. Execute one story per iteration +3. Run quality gates automatically +4. Mark stories complete when passing +5. Continue until all stories are done + +## Architecture + +- **Next.js 14** - Server + client components +- **React 18** - Interactive UI +- **TypeScript** - Type safety +- **Tailwind CSS** - Styling +- **Zustand** - State management + +## Files + +- `app/page.tsx` - Main flow +- `components/PRDGenerator.tsx` - Q&A workflow +- `components/QuestionSet.tsx` - Individual questions +- `components/PRDPreview.tsx` - JSON preview +- `lib/store.ts` - State management diff --git a/PRDGenerator/app/globals.css b/PRDGenerator/app/globals.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/PRDGenerator/app/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/PRDGenerator/app/layout.tsx b/PRDGenerator/app/layout.tsx new file mode 100644 index 0000000..4f19ed9 --- /dev/null +++ b/PRDGenerator/app/layout.tsx @@ -0,0 +1,23 @@ +import type { Metadata } from "next"; +import "./globals.css"; + +export const metadata: Metadata = { + title: "PRD Generator | Designr", + description: "Interactive PRD.json generator for Ralph-loop automation", +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + +
+ {children} +
+ + + ); +} diff --git a/PRDGenerator/app/page.tsx b/PRDGenerator/app/page.tsx new file mode 100644 index 0000000..f3c432e --- /dev/null +++ b/PRDGenerator/app/page.tsx @@ -0,0 +1,14 @@ +"use client"; + +import { useState } from "react"; +import { PRDGenerator } from "@/components/PRDGenerator"; +import { Header } from "@/components/Header"; + +export default function Home() { + return ( +
+
+ +
+ ); +} diff --git a/PRDGenerator/components/Header.tsx b/PRDGenerator/components/Header.tsx new file mode 100644 index 0000000..79b10f0 --- /dev/null +++ b/PRDGenerator/components/Header.tsx @@ -0,0 +1,15 @@ +export function Header() { + return ( +
+

+ PRD Generator +

+

+ Interactive Q&A to create PRD.json for Ralph-loop automation +

+

+ Turn feature ideas into structured Product Requirements Documents in minutes +

+
+ ); +} diff --git a/PRDGenerator/components/PRDGenerator.tsx b/PRDGenerator/components/PRDGenerator.tsx new file mode 100644 index 0000000..cf2b8a8 --- /dev/null +++ b/PRDGenerator/components/PRDGenerator.tsx @@ -0,0 +1,201 @@ +"use client"; + +import React, { useState } from "react"; +import { QuestionSet } from "./QuestionSet"; +import { PRDPreview } from "./PRDPreview"; +import { usePRDStore } from "@/lib/store"; +import { ChevronRight, Download } from "lucide-react"; + +const QUESTION_SETS = [ + { + id: 1, + title: "Feature Overview", + questions: [ + { + id: "q1", + text: "What is the primary goal of this feature?", + options: [ + { label: "Improve user onboarding experience", value: "onboarding" }, + { label: "Increase user retention", value: "retention" }, + { label: "Reduce support burden", value: "support" }, + { label: "Other - specify below", value: "other" }, + ], + }, + { + id: "q2", + text: "Who is the target user?", + options: [ + { label: "New users only", value: "new" }, + { label: "Existing users only", value: "existing" }, + { label: "All users", value: "all" }, + { label: "Admin users only", value: "admin" }, + ], + }, + ], + }, + { + id: 2, + title: "Scope & Requirements", + questions: [ + { + id: "q3", + text: "What is the primary functionality needed?", + isOpen: true, + placeholder: "Describe the main action users will take...", + }, + { + id: "q4", + text: "What should this feature NOT do?", + isOpen: true, + placeholder: "List out-of-scope items to keep the feature focused...", + }, + ], + }, + { + id: 3, + title: "Quality Gates (CRITICAL)", + questions: [ + { + id: "q5", + text: "What quality commands must pass for every story?", + options: [ + { label: "pnpm typecheck && pnpm lint", value: "pnpm" }, + { label: "npm run typecheck && npm run lint", value: "npm" }, + { label: "bun run typecheck && bun run lint", value: "bun" }, + { label: "Other - specify below", value: "other" }, + ], + }, + { + id: "q6", + text: "For UI stories, include browser verification?", + options: [ + { label: "Yes, use dev-browser skill to verify visually", value: "yes" }, + { label: "No, automated tests are sufficient", value: "no" }, + ], + }, + ], + }, +]; + +export function PRDGenerator() { + const [currentSet, setCurrentSet] = useState(0); + const [answers, setAnswers] = useState>({}); + const [showPreview, setShowPreview] = useState(false); + const { prd, setPRD } = usePRDStore(); + + const handleAnswer = (questionId: string, value: string | string[]) => { + setAnswers((prev: Record) => ({ + ...prev, + [questionId]: value, + })); + }; + + const handleNext = () => { + if (currentSet < QUESTION_SETS.length - 1) { + setCurrentSet(currentSet + 1); + } else { + setShowPreview(true); + } + }; + + const handleBack = () => { + if (currentSet > 0) { + setCurrentSet(currentSet - 1); + } + }; + + const handleDownload = () => { + if (!prd) return; + + const dataStr = JSON.stringify(prd, null, 2); + const dataBlob = new Blob([dataStr], { type: "application/json" }); + const url = URL.createObjectURL(dataBlob); + const link = document.createElement("a"); + + link.href = url; + link.download = `prd-${prd.branchName}.json`; + + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(url); + }; + + if (showPreview) { + return ( +
+ +
+ + +
+
+ ); + } + + const currentQuestionSet = QUESTION_SETS[currentSet]; + + return ( +
+
+
+

+ {currentQuestionSet.title} +

+
+ {QUESTION_SETS.map((set, idx) => ( +
+ ))} +
+

+ Step {currentSet + 1} of {QUESTION_SETS.length} +

+
+ +
+ {currentQuestionSet.questions.map((question) => ( + handleAnswer(question.id, value)} + /> + ))} +
+ +
+ + +
+
+
+ ); +} diff --git a/PRDGenerator/components/PRDPreview.tsx b/PRDGenerator/components/PRDPreview.tsx new file mode 100644 index 0000000..5da6cb3 --- /dev/null +++ b/PRDGenerator/components/PRDPreview.tsx @@ -0,0 +1,111 @@ +"use client"; + +import { CheckCircle } from "lucide-react"; + +interface PRDPreviewProps { + answers: Record; +} + +export function PRDPreview({ answers }: PRDPreviewProps) { + const featureGoal = answers.q1 || "Feature enhancement"; + const targetUser = answers.q2 || "Users"; + const primaryFunctionality = answers.q3 || "Core functionality not specified"; + const outOfScope = answers.q4 || "None specified"; + const qualityGates = answers.q5 || "pnpm"; + const browserVerification = answers.q6 === "yes"; + + const getQualityGateCommand = (gate: string) => { + switch (gate) { + case "pnpm": + return "pnpm typecheck && pnpm lint"; + case "npm": + return "npm run typecheck && npm run lint"; + case "bun": + return "bun run typecheck && bun run lint"; + default: + return "pnpm typecheck && pnpm lint"; + } + }; + + const featureName = ( + typeof primaryFunctionality === "string" ? primaryFunctionality : "" + ) + .split(" ") + .slice(0, 3) + .join("-") + .toLowerCase() + .replace(/[^a-z-]/g, ""); + + return ( +
+
+

Preview Your PRD

+

+ This PRD will be converted to prd.json and executed by Ralph-loop +

+
+ +
+
+ # PRD: + {primaryFunctionality} +
+ +
+
## Overview
+
+

+ Goal: {featureGoal} +

+

+ Target User: {targetUser} +

+
+
+ +
+
## Quality Gates
+
+

+ Commands:{" "} + {getQualityGateCommand(qualityGates as string)} +

+ {browserVerification && ( +

+ UI Stories: Verify in + browser using dev-browser skill +

+ )} +
+
+ +
+
## Scope
+
+

+ Included:{" "} + {primaryFunctionality} +

+

+ Out of Scope:{" "} + {outOfScope} +

+
+
+
+ +
+
+ +
+

Ready for Ralph-loop

+

+ This PRD will be saved as prd-{featureName}.json and + ready for autonomous execution +

+
+
+
+
+ ); +} diff --git a/PRDGenerator/components/QuestionSet.tsx b/PRDGenerator/components/QuestionSet.tsx new file mode 100644 index 0000000..243e589 --- /dev/null +++ b/PRDGenerator/components/QuestionSet.tsx @@ -0,0 +1,56 @@ +interface Question { + id: string; + text: string; + options?: Array<{ label: string; value: string }>; + isOpen?: boolean; + placeholder?: string; +} + +interface QuestionSetProps { + question: Question; + value?: string | string[]; + onChange: (value: string | string[]) => void; +} + +export function QuestionSet({ question, value, onChange }: QuestionSetProps) { + if (question.isOpen) { + return ( +
+ +