low-code-react-app-b/README.md

🔨 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, comprehensive testing suites, and persistent project management. Built with AI-powered code generation at its core.

✨ Features

🎯 Core Capabilities

• Project Management - Save, load, duplicate, export, and import complete projects with full state persistence
• Project Dashboard - At-a-glance overview of project status, completion metrics, and quick tips
• 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
• Component Tree Manager - Manage multiple named component trees for different app sections
• Workflow Designer - n8n-style visual workflow builder with triggers, actions, conditions, and lambdas
• Lambda Designer - Serverless function editor with multi-runtime support and trigger configuration
• 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
• CI/CD Integration - Generate workflow files for GitHub Actions, GitLab CI, Jenkins, and CircleCI
• Feature Toggles - Customize your workspace by enabling/disabling designer features
• Keyboard Shortcuts - Power-user shortcuts for rapid navigation and actions

🤖 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. Save Your Work - Use Save Project button to persist your work to the database
2. Load Projects - Click Load Project to view and switch between saved projects
3. Open the Documentation tab in the app for comprehensive guides
4. Use AI Generate to scaffold a complete application from a description
5. Navigate between tabs to design models, components, themes, and backend APIs
6. Click Export Project to download your complete Next.js application

Project Management

• Save Project - Save current work with name and description to database
• Load Project - Browse and load any saved project
• New Project - Start fresh with a blank workspace
• Duplicate - Create a copy of any saved project
• Export - Download project as JSON file for backup or sharing
• Import - Load a project from an exported JSON file
• Delete - Remove projects from database

Manual Building

1. Models Tab - Create your database schema with Prisma models
2. Components Tab - Build your UI component hierarchy
3. Component Trees Tab - Organize components into named trees
4. Workflows Tab - Design automation workflows visually
5. Lambdas Tab - Create serverless functions
6. Styling Tab - Design your theme with custom colors and typography
7. Flask API Tab - Configure your backend REST API
8. Settings Tab - Configure Next.js and npm packages
9. Code Editor Tab - Fine-tune generated code directly
10. 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
• CI/CD Guide - Complete setup guide for all CI/CD platforms

Access documentation by clicking the Documentation tab in the application.

🗺️ Roadmap

✅ Completed (v1.0 - v5.2)

• Project persistence with save/load functionality
• Project dashboard with completion metrics
• Monaco code editor integration
• Visual designers for models, components, and themes
• Multiple component trees management
• n8n-style workflow designer
• Lambda function designer with multi-runtime support
• 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
• ZIP file export with README generation
• Keyboard shortcuts for power users
• Complete CI/CD configurations (GitHub Actions, GitLab CI, Jenkins, CircleCI)
• Docker containerization with multi-stage builds
• Feature toggle system for customizable workspace
• Project export/import as JSON
• Project duplication and deletion

🔮 Planned

• Real-time preview with hot reload
• Database seeding designer
• API client generator
• Visual form builder
• Authentication designer (JWT, OAuth, sessions)
• GraphQL API designer
• State management designer (Redux, Zustand, Jotai)
• 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
• CI/CD Guide - Complete CI/CD setup and configuration guide

---

Built with ❤️ using GitHub Spark