diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..bbe261e --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,71 @@ +# Claude Code Task Management Guide + +## Documentation Available + +📚 **Project Documentation**: Check the documentation files in this directory for project-specific setup instructions and guides. +**Project Tasks**: Check the tasks directory in documentation/tasks for the list of tasks to be completed. Use the CLI commands below to interact with them. + +## MANDATORY Task Management Workflow + +🚨 **YOU MUST FOLLOW THIS EXACT WORKFLOW - NO EXCEPTIONS** 🚨 + +### **STEP 1: DISCOVER TASKS (MANDATORY)** +You MUST start by running this command to see all available tasks: +```bash +task-manager list-tasks +``` + +### **STEP 2: START EACH TASK (MANDATORY)** +Before working on any task, you MUST mark it as started: +```bash +task-manager start-task +``` + +### **STEP 3: COMPLETE EACH TASK (MANDATORY)** +After finishing implementation, you MUST mark the task as completed: +```bash +task-manager complete-task "Brief description of what was implemented" +``` + +## Task Files Location + +📁 **Task Data**: Your tasks are organized in the `documentation/tasks/` directory: +- Task JSON files contain complete task information +- Use ONLY the `task-manager` commands listed above +- Follow the mandatory workflow sequence for each task + +## MANDATORY Task Workflow Sequence + +🔄 **For EACH individual task, you MUST follow this sequence:** + +1. 📋 **DISCOVER**: `task-manager list-tasks` (first time only) +2. 🚀 **START**: `task-manager start-task ` (mark as in progress) +3. 💻 **IMPLEMENT**: Do the actual coding/implementation work +4. ✅ **COMPLETE**: `task-manager complete-task "What was done"` +5. 🔁 **REPEAT**: Go to next task (start from step 2) + +## Task Status Options + +- `pending` - Ready to work on +- `in_progress` - Currently being worked on +- `completed` - Successfully finished +- `blocked` - Cannot proceed (waiting for dependencies) +- `cancelled` - No longer needed + +## CRITICAL WORKFLOW RULES + +❌ **NEVER skip** the `task-manager start-task` command +❌ **NEVER skip** the `task-manager complete-task` command +❌ **NEVER work on multiple tasks simultaneously** +✅ **ALWAYS complete one task fully before starting the next** +✅ **ALWAYS provide completion details in the complete command** +✅ **ALWAYS follow the exact 3-step sequence: list → start → complete** + +## Final Requirements + +🚨 **CRITICAL**: Your work is not complete until you have: +1. ✅ Completed ALL tasks using the mandatory workflow +2. ✅ Committed all changes with comprehensive commit messages +3. ✅ Created a pull request with proper description + +Remember: The task management workflow is MANDATORY, not optional! diff --git a/app/globals.css b/app/globals.css index 0d27128..26c5e8a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,11 +1,27 @@ -@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..800&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; -.logo-text { - font-family: Parkinsans, sans-serif; +/* Modern font overrides */ +body { + font-family: 'Inter', var(--font-geist-sans), sans-serif !important; +} + +.font-mono { + font-family: 'JetBrains Mono', var(--font-geist-mono), monospace !important; +} + +/* Black and white theme utilities */ +.bg-pattern { + background-image: + linear-gradient(45deg, #f8f8f8 25%, transparent 25%), + linear-gradient(-45deg, #f8f8f8 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #f8f8f8 75%), + linear-gradient(-45deg, transparent 75%, #f8f8f8 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } @layer utilities { diff --git a/app/layout.tsx b/app/layout.tsx index 7cf0a76..92c03d4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -14,8 +14,8 @@ const geistMono = localFont({ }) export const metadata: Metadata = { - title: 'CodeGuide Starter Lite', - description: 'Starter kit from codeguide.dev', + title: 'Codespace - AI CLI Tool', + description: 'Intelligent command-line interface that understands your code and accelerates your productivity.', } export default function RootLayout({ diff --git a/app/page.tsx b/app/page.tsx index c401399..15b831f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,6 @@ "use client" -import { Hero } from '@/components/ui/animated-hero' +import { Hero } from '../components/ui/animated-hero' import Image from 'next/image' export default function Home() { diff --git a/components/ui/animated-hero.tsx b/components/ui/animated-hero.tsx index b47fa57..6f5d845 100644 --- a/components/ui/animated-hero.tsx +++ b/components/ui/animated-hero.tsx @@ -1,12 +1,11 @@ import { useEffect, useMemo, useState } from 'react' import { motion } from 'framer-motion' -import { MoveRight, PhoneCall } from 'lucide-react' -import { Button } from '@/components/ui/button' -import Image from 'next/image' +import { Terminal, Download, ChevronRight, Code } from 'lucide-react' +import { Button } from './button' function Hero() { const [titleNumber, setTitleNumber] = useState(0) - const titles = useMemo(() => ['Modern', 'Full-stack', 'Secure', 'Scalable', 'Powerful'], []) + const titles = useMemo(() => ['Intelligent', 'Efficient', 'Powerful', 'Modern'], []) useEffect(() => { const timeoutId = setTimeout(() => { @@ -15,63 +14,112 @@ function Hero() { } else { setTitleNumber(titleNumber + 1) } - }, 2000) + }, 2500) return () => clearTimeout(timeoutId) }, [titleNumber, titles]) return ( -
-
-
-
- - CodeGuide - CodeGuide - +
+
+
+ {/* Logo and Brand */} +
+
+
+ +
+

+ Codespace +

+
+
-
-

- -   - {titles.map((title, index) => ( - index ? -150 : 150, - opacity: 0, - } - } - > - {title} - - ))} - - Starter Kit Lite -

-

- Start building with a modern web application template featuring authentication, - database integration. Built with Next.js 14, Clerk, Supabase. + {/* Animated Title */} +

+
+

+ + {titles.map((title, index) => ( + index ? -100 : 100, + opacity: 0, + } + } + > + {title} + + ))} + +

+
+

+ AI CLI Tool +

+
+
+ +

+ Supercharge your development workflow with an intelligent command-line interface + that understands your code and accelerates your productivity.

-
- + +
+ + {/* Features Grid */} +
+
+ +

Smart Code Analysis

+

+ Understands your codebase and provides intelligent suggestions and optimizations. +

+
+
+ +

Natural Language

+

+ Execute complex commands using plain English. No need to memorize syntax. +

+
+
+
+ AI +
+

Context Aware

+

+ Learns from your project structure and coding patterns for personalized assistance. +

+
diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 36496a2..2c1f020 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "@/lib/utils" +import { cn } from "../../lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", diff --git a/documentation/app_flowchart.md b/documentation/app_flowchart.md new file mode 100644 index 0000000..2a55993 --- /dev/null +++ b/documentation/app_flowchart.md @@ -0,0 +1,17 @@ +flowchart TD + A[Start] --> B[Collect User Input] + B --> C[Generate Outline] + C --> D{Create Summary} + D -->|Yes| E[Generate Summary] + D -->|No| F[Customize Output] + E --> F + F --> G{Export Or Integrate} + G -->|Export| H[Export To Formats] + G -->|Integrate| I[Integrate With Tools] + H --> J{Enable Collaboration} + I --> J + J -->|Yes| K[Collaborate And Share] + J -->|No| L[View Analytics] + K --> L + L --> M[Display Analytics And Insights] + M --> N[End] \ No newline at end of file diff --git a/documentation/backend_structure_document.md b/documentation/backend_structure_document.md new file mode 100644 index 0000000..a91f397 --- /dev/null +++ b/documentation/backend_structure_document.md @@ -0,0 +1,227 @@ +# Backend Structure Document + +## 1. Backend Architecture + +We’ve chosen a modular, service-oriented design for the backend. Each major feature lives in its own module or microservice, which makes it easier to maintain, scale, and improve over time. + +• Service-Oriented Architecture (SOA): + • Outline Generation Service (Node.js/Express) + • Summary Creation Service (Python/FastAPI) + • Export & Integration Service (Node.js) + • Collaboration Service (Node.js + Socket.io) + • Analytics Service (Node.js) + +• Design Patterns & Frameworks: + • RESTful API for most data operations + • WebSockets (Socket.io) for real-time collaboration + • Message Queue (RabbitMQ or AWS SQS) to decouple heavy tasks like NLP processing or file exports + +### How It Supports Key Goals + +• Scalability: Each service can be scaled independently based on load (e.g., spin up more instances of the Summary Service when many users request summaries simultaneously). +• Maintainability: Smaller codebases per service allow teams to work in parallel and deploy updates with minimal risk. +• Performance: Caching (Redis) and message queues keep user-facing APIs snappy even when background tasks take time. + +## 2. Database Management + +• Primary Database: PostgreSQL (relational, reliable, ACID-compliant) +• Cache: Redis (in-memory store for session data, rate-limiting, and frequently used reads) +• Queue Storage: RabbitMQ or AWS SQS (for job scheduling and inter-service messaging) + +Data Flow: +1. User actions (create outline, request summary) hit the API. +2. Quick-write fields (sessions, drafts) are cached in Redis. +3. Permanent records (projects, templates, exports) are stored in PostgreSQL. +4. Heavy-lifting tasks (e.g., summary generation) are pushed onto a queue for the NLP service to pull and process. + +Best Practices: +• Use connection pooling for PostgreSQL to handle sudden traffic spikes. +• Archive old analytics data to a data warehouse or object storage (S3) after a set retention period. +• Implement regular backups and point-in-time restore for PostgreSQL. + +## 3. Database Schema + +In everyday language, here’s how our tables relate: + +• Users: stores account info (email, hashed password, profile settings) +• Projects: top-level container for outlines and summaries, linked to one user +• Outlines: broken down into sections and subsections, each tied to a project +• Summaries: saved outputs for each project with metadata (tone, length) +• Templates: user-defined structures for outlines or summaries +• Collaborations: tracks which users are editing which project in real time +• Exports: records of files generated (PDF, DOCX) with status and storage link +• Analytics: logs user activity, counts of outlines created, average summary lengths, etc. + +### PostgreSQL Schema (SQL) + +```sql +-- Users +CREATE TABLE users ( + id SERIAL PRIMARY KEY, + email TEXT UNIQUE NOT NULL, + password_hash TEXT NOT NULL, + created_at TIMESTAMP DEFAULT NOW() +); + +-- Projects +CREATE TABLE projects ( + id SERIAL PRIMARY KEY, + user_id INTEGER REFERENCES users(id), + name TEXT, + description TEXT, + created_at TIMESTAMP DEFAULT NOW() +); + +-- Outlines +CREATE TABLE outlines ( + id SERIAL PRIMARY KEY, + project_id INTEGER REFERENCES projects(id), + title TEXT, + parent_outline_id INTEGER REFERENCES outlines(id), + position INTEGER, + content TEXT +); + +-- Summaries +CREATE TABLE summaries ( + id SERIAL PRIMARY KEY, + project_id INTEGER REFERENCES projects(id), + tone TEXT, + length_pref TEXT, + content TEXT, + created_at TIMESTAMP DEFAULT NOW() +); + +-- Templates +CREATE TABLE templates ( + id SERIAL PRIMARY KEY, + user_id INTEGER REFERENCES users(id), + name TEXT, + structure JSONB, + created_at TIMESTAMP DEFAULT NOW() +); + +-- Collaborations +CREATE TABLE collaborations ( + id SERIAL PRIMARY KEY, + project_id INTEGER REFERENCES projects(id), + user_id INTEGER REFERENCES users(id), + role TEXT, + joined_at TIMESTAMP DEFAULT NOW() +); + +-- Exports +CREATE TABLE exports ( + id SERIAL PRIMARY KEY, + project_id INTEGER REFERENCES projects(id), + format TEXT, + status TEXT, + file_url TEXT, + requested_at TIMESTAMP DEFAULT NOW() +); + +-- Analytics +CREATE TABLE analytics ( + id SERIAL PRIMARY KEY, + user_id INTEGER REFERENCES users(id), + event_type TEXT, + metadata JSONB, + event_time TIMESTAMP DEFAULT NOW() +); +``` + +## 4. API Design and Endpoints + +We use RESTful JSON APIs for most operations, plus WebSockets for collaboration: + +• Authentication & User Management: + • POST /auth/signup + • POST /auth/login + • GET /auth/profile + +• Project & Outline: + • GET /projects + • POST /projects + • GET /projects/{id}/outlines + • POST /projects/{id}/outlines + • PUT /outlines/{id} + • DELETE /outlines/{id} + +• Summaries: + • POST /projects/{id}/summaries + • GET /summaries/{id} + +• Templates: + • GET /templates + • POST /templates + • PUT /templates/{id} + +• Exports & Files: + • POST /projects/{id}/export (body includes format) + • GET /exports/{id} + +• Collaboration (WebSocket channel `project-{id}`): real-time edit events, presence updates + +• Analytics: + • POST /analytics/events + • GET /analytics/user/{userId} + +## 5. Hosting Solutions + +We host on Amazon Web Services (AWS) to balance reliability, cost, and flexibility: + +• Elastic Beanstalk or ECS/EKS for containerized services +• RDS (PostgreSQL) for our main database +• ElastiCache (Redis) for caching/session store +• S3 for file storage (exports, backups) +• CloudFront CDN for serving static assets and export files + +Benefits: +• High availability with multi-AZ deployments +• Automatic scaling of service instances based on load +• Pay-as-you-go billing to optimize cost + +## 6. Infrastructure Components + +• Load Balancer (AWS ALB): Routes traffic to healthy service instances +• Caching (Redis via ElastiCache): Speeds up session reads and rate-limit checks +• CDN (CloudFront): Distributes static assets and export files close to users +• Message Queue (SQS or RabbitMQ on ECS): Decouples API requests from heavy-compute tasks +• VPN/VPC & Security Groups: Isolate database and cache in private subnets + +Together, these components ensure fast response times, even under heavy concurrent usage. + +## 7. Security Measures + +• HTTPS/TLS for all traffic between clients and API +• JWT tokens for stateless authentication +• Role-based access control (RBAC) in collaboration and project sharing +• Passwords hashed with bcrypt or Argon2 +• Data encryption at rest (RDS, S3) and in transit +• Rate limiting on APIs to prevent abuse +• Periodic security audits and dependency vulnerability scans + +These measures keep user data safe and help us comply with common data-privacy standards. + +## 8. Monitoring and Maintenance + +• AWS CloudWatch: monitors CPU, memory, latency, error rates +• Prometheus & Grafana: custom metrics and dashboards for deeper insight +• Sentry or Datadog: error tracking and alerting +• Automated Backups & Snapshots for PostgreSQL and Redis +• CI/CD pipeline (GitHub Actions or Jenkins): automated testing, linting, and deployments +• Scheduled maintenance windows and health checks + +Regularly reviewing logs and metrics helps us catch issues early and keep the system running smoothly. + +## 9. Conclusion and Overall Backend Summary + +In summary, our backend combines a modular, service-oriented design with proven cloud infrastructure to deliver a reliable, scalable platform for outline generation, summary creation, and real-time collaboration. By using PostgreSQL for core data, Redis for caching, and AWS services for hosting and scaling, we ensure performance under load. Security best practices, full monitoring, and automated maintenance rounds out a system that meets user needs and can grow as usage increases. + +Key differentiators: +• Decoupled NLP service for high-quality summaries without blocking the main API +• Real-time collaboration via WebSockets +• Flexible export pipeline for multiple file formats +• Built-in analytics to inform product decisions + +This structure provides a clear roadmap for developers and stakeholders to understand exactly how the backend supports every feature of the platform. \ No newline at end of file diff --git a/documentation/frontend_guidelines_document.md b/documentation/frontend_guidelines_document.md new file mode 100644 index 0000000..815170b --- /dev/null +++ b/documentation/frontend_guidelines_document.md @@ -0,0 +1,143 @@ +# Frontend Guideline Document + +This document outlines the architecture, design principles, styling, and tooling used in our content-generation platform’s frontend. It will help developers and non-technical stakeholders alike understand how the UI is built, organized, and maintained. + +## 1. Frontend Architecture + +### Frameworks and Libraries +- **React 18 + TypeScript**: User interfaces are built with React for component-based structure and TypeScript for static typing and early error detection. +- **Vite**: Development server and build tool offering fast startup, hot-module replacement, and lean production bundles. +- **React Query**: Manages server state (API calls, caching, background updates) for Outline Generation, Summary Creation, etc. +- **Redux Toolkit**: Manages global UI state (theme mode, user preferences, inputs) in a predictable way. + +### Scalability, Maintainability, Performance +- Component-based architecture ensures clear separation of concerns and easy reuse. +- TypeScript interfaces define component props and API responses, reducing bugs as the app grows. +- Lazy loading and code splitting (see Section 7) keep initial bundle sizes small. +- A modular folder structure (see Section 4) makes it simple to onboard new features or teams. + +## 2. Design Principles + +### Usability +- Clear, concise layouts guide users through key flows: outline creation, summary generation, customization, export. +- Progressive disclosure of controls—only show the options relevant to the current step. + +### Accessibility (a11y) +- All interactive elements meet WCAG 2.1 AA standards: proper color contrast, keyboard focus, ARIA labels. +- Semantic HTML tags ( `