AI React Playground 🚀

A simple, modern React playground for testing and showcasing React components and pages. Perfect for testing AI-generated React code or building your own components.

Features ✨

• 🎯 Simple Setup: Just clone and run the setup script
• 🎨 Modern Stack: React + TypeScript + Vite + Tailwind CSS
• 🔧 Component Generator: Create new components with one command
• 📱 Live Preview: See your components in action instantly
• 📝 Auto-Documentation: Components are automatically added to the sidebar
• 🎭 Page Support: Create and test full pages
• 🛠️ Developer Friendly: Hot reload, TypeScript support, and more

Quick Start 🏃‍♂️

1. Clone the repository:

git clone https://github.com/yourusername/ai-react-playground.git
cd ai-react-playground

2. Run the setup script:

chmod +x setup.sh
./setup.sh

3. Start the development server:

npm run dev

Usage 📖

Creating Components

# Using CLI
npm run create-component Button

# Or use interactive generator
npm run generate

Creating Pages

# Using CLI
npm run create-page Home

# Or use interactive generator
npm run generate

Testing AI-Generated Code

1. Get React component code from your favorite AI
2. Use the generator to create a new component
3. Paste the code
4. See it live in the browser
5. Iterate and improve

Documentation 📚

• Component Documentation
• Development Guide
• Troubleshooting

Project Structure 🏗️

├── src/
│   ├── components/     # Reusable UI components
│   ├── pages/         # Page components
│   ├── assets/        # Static assets
│   ├── App.tsx        # Main application component
│   └── main.tsx       # Application entry point
├── docs/             # Documentation
├── scripts/          # Development scripts
└── setup.sh          # Setup script

Contributing 🤝

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

Support 💬

• Check the Troubleshooting Guide
• Open an issue
• Start a discussion

Roadmap 🗺️

• Add more component templates
• Add testing setup
• Add CI/CD pipeline
• Add theme support
• Add more documentation
• Add more examples

Acknowledgments 🙏

• React Team
• Vite Team
• Tailwind CSS Team
• All contributors