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
Sass Styling System - Custom Material UI components with Sass, including utilities, mixins, and animations
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

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

Manual Building

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

📋 Technology Stack

Frontend

Next.js 14 with App Router
React 18 with TypeScript
Material UI 5
Sass/SCSS for custom styling
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
Sass Styles Guide - Custom Material UI components, utilities, mixins, and animations

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
Custom Sass styling system with utilities and mixins

🔮 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 - Complete product requirements and design decisions
Error Repair Guide - Error detection and repair system documentation

Built with ❤️ using GitHub Spark

Languages

TypeScript 90%

JavaScript 3.4%

Shell 2.9%

SCSS 2%

CSS 1.1%

Other 0.6%