mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-28 23:54:55 +00:00
136 lines
5.4 KiB
Markdown
136 lines
5.4 KiB
Markdown
# 🔨 CodeForge - Low-Code Next.js App Builder
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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**
|