# 🔨 CodeForge - Low-Code Next.js App Builder

![CodeForge](https://img.shields.io/badge/CodeForge-v4.0-blueviolet)
![Next.js](https://img.shields.io/badge/Next.js-14-black)
![React](https://img.shields.io/badge/React-18-blue)
![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)
![AI Powered](https://img.shields.io/badge/AI-Powered-green)

A comprehensive visual low-code platform for generating production-ready Next.js applications with Material UI, Prisma, Flask backends, and comprehensive testing suites. Built with AI-powered code generation at its core.

## ✨ Features

### 🎯 Core Capabilities
- **Monaco Code Editor** - Full-featured IDE with syntax highlighting, autocomplete, and multi-file editing
- **Prisma Schema Designer** - Visual database model builder with relations and field configuration
- **Component Tree Builder** - Hierarchical React component designer with Material UI integration
- **Theme Designer** - Advanced theming with multiple variants (light/dark/custom) and unlimited custom colors
- **Flask Backend Designer** - Python REST API designer with blueprints, endpoints, and CORS configuration
- **Project Settings** - Configure Next.js options, npm packages, scripts, and build settings

### 🤖 AI-Powered Generation
- **Complete App Generation** - Describe your app and get a full project structure
- **Smart Code Improvements** - Optimize code for performance and best practices
- **Model Generation** - Create Prisma schemas from natural language
- **Component Generation** - Build complex React components with proper structure
- **Theme Generation** - Generate beautiful, accessible color palettes
- **Test Generation** - Create comprehensive E2E, unit, and integration tests
- **Code Explanations** - Understand any code snippet with detailed explanations
- **Auto Error Repair** - Detect and fix syntax, type, import, and lint errors automatically

### 🧪 Testing & Quality
- **Playwright Designer** - Visual E2E test builder with step-by-step configuration
- **Storybook Designer** - Component story builder with args and variations
- **Unit Test Designer** - Comprehensive test suite builder for components, functions, and hooks
- **Error Detection** - Automated scanning for syntax, type, and lint errors
- **Auto Repair System** - AI-powered context-aware error fixing

## 🚀 Getting Started

### Quick Start
1. Open the **Documentation** tab in the app for comprehensive guides
2. Use **AI Generate** to scaffold a complete application from a description
3. Navigate between tabs to design models, components, themes, and backend APIs
4. Click **Export Project** to download your complete Next.js application

### Manual Building
1. **Models Tab** - Create your database schema with Prisma models
2. **Components Tab** - Build your UI component hierarchy
3. **Styling Tab** - Design your theme with custom colors and typography
4. **Flask API Tab** - Configure your backend REST API
5. **Settings Tab** - Configure Next.js and npm packages
6. **Code Editor Tab** - Fine-tune generated code directly
7. **Export** - Download your complete, production-ready application

## 📋 Technology Stack

### Frontend
- Next.js 14 with App Router
- React 18 with TypeScript
- Material UI 5
- Monaco Editor
- Tailwind CSS
- Framer Motion

### Backend & Testing
- Flask REST API (Python)
- Prisma ORM
- Playwright (E2E Testing)
- Vitest + React Testing Library
- Storybook for Component Development

### AI Integration
- OpenAI GPT-4 for code generation
- Context-aware prompt engineering
- Intelligent error detection and repair
- Natural language to code translation

## 📚 Documentation

The application includes comprehensive built-in documentation:
- **README** - Complete feature overview and getting started guide
- **Roadmap** - Completed features and planned enhancements
- **Agents Files** - AI service architecture and integration points

Access documentation by clicking the **Documentation** tab in the application.

## 🗺️ Roadmap

### ✅ Completed (v1.0 - v4.0)
- Monaco code editor integration
- Visual designers for models, components, and themes
- AI-powered generation across all features
- Multi-theme variant support
- Testing suite designers (Playwright, Storybook, Unit Tests)
- Auto error detection and repair
- Flask backend designer
- Project settings and npm management

### 🔮 Planned
- Real-time preview with hot reload
- Database seeding designer
- API client generator
- Visual form builder
- Authentication designer (JWT, OAuth, sessions)
- Docker configuration generator
- GraphQL API designer
- State management designer (Redux, Zustand, Jotai)
- CI/CD pipeline generator
- Component library export
- Design system generator
- Collaboration features

## 🎨 Design Philosophy

CodeForge combines the power of visual low-code tools with professional IDE capabilities:
- **Empowering** - Control at both visual and code levels
- **Intuitive** - Complex generation made approachable
- **Professional** - Production-ready, best-practice code output

## 🤝 Contributing

CodeForge is built on the Spark platform. Contributions, feature requests, and feedback are welcome!

## 📄 License

The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc.

## 🔗 Resources

- [Full Documentation](./PRD.md) - Complete product requirements and design decisions
- [Error Repair Guide](./ERROR_REPAIR_GUIDE.md) - Error detection and repair system documentation

---

**Built with ❤️ using GitHub Spark**