Code Generator Tool

A modern, web-based code generator and template management system built with React and Vite. This tool provides an intuitive interface for creating, editing, and managing code templates across multiple programming languages.

Features

🎯 Core Functionality

• Multi-language Support: CSS, Dart (Flutter), HTML, JavaScript, Python, React, Ruby
• Live Code Editor: Monaco Editor with syntax highlighting and IntelliSense
• Template System: Pre-built templates for common coding scenarios
• Live Preview: Real-time code preview with syntax highlighting

📝 Supported Templates

• CSS Stylesheets
• HTML Page Template
• CSS within HTML header
• JS within HTML header
• Flutter Widgets using Dart Language
• Python Scripts
• React Components
• Ruby on Rails Components

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Installation

1. Clone or download the project files
2. Navigate to the project directory
3. Install dependencies:

   npm install

Running the Application

Important: This is a React application that requires a development server to run properly.

To start the development server:

npm run dev

After running this command, you'll see output similar to:

> code-generator-tool@0.0.0 dev
> vite

  VITE v4.2.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open your browser and navigate to the localhost URL shown in the terminal (typically http://localhost:5173/).

Note: Do not open the index.html file directly in your browser - it will show a blank page because React applications need to be processed by the development server.

Available Scripts

• npm run dev - Starts the development server
• npm run build - Builds the app for production
• npm run preview - Preview the production build locally

How to Use

1. Select a Template: Choose from the available templates in the Template Selector panel
2. Edit Code: Use the Monaco code editor to modify or write new code
3. Change Language: Select different programming languages from the dropdown to change how the syntax is processed for errors, or color coded
4. Live Preview: View your code with syntax highlighting in the preview panel

Project Structure

src/
├── components/
│   ├── CodeEditor.jsx      # Monaco editor component
│   ├── TemplateSelector.jsx # Template selection interface
│   ├── ExportOptions.jsx   # Export functionality
│   ├── LivePreview.jsx     # Code preview with syntax highlighting
│   └── TemplateSharing.jsx # Template sharing features
├── utils/
│   └── templateUtils.js    # Template management utilities
├── styles/
│   └── globals.css         # Global styles and Tailwind CSS
└── App.jsx                 # Main application component

Technologies Used

• React 18 - UI framework
• Vite - Build tool and development server
• Monaco Editor - Code editor (same as VS Code)
• Tailwind CSS - Utility-first CSS framework
• React Syntax Highlighter - Code syntax highlighting
• PrismJS - Additional syntax highlighting support

Troubleshooting

Blank Page Issue

If you see a blank page, make sure you're:

1. Running npm run dev (not just npm run)
2. Accessing the localhost URL from the terminal output
3. Not opening index.html directly in your browser

Common Commands

• Check available scripts: npm run
• Start development server: npm run dev
• Install dependencies: npm install
• Check for vulnerabilities: npm audit

Contributing

This project uses modern web development practices with React hooks, component-based architecture, and responsive design. Feel free to extend the functionality by adding new templates, export formats, or language support.

License

This project is open source and available under the MIT License.