Component Generator

A modern React application that uses AI (Gemini) to generate React components based on natural language descriptions. Features include user authentication, session management, real-time chat with AI, and live component preview.

Features

• 🔐 User Authentication - Sign up and login with email/password
• 💬 AI Chat Interface - Natural language component generation
• 🎨 Live Preview - See generated components in real-time
• 📝 Code Editor - Edit JSX and CSS with syntax highlighting
• 💾 Session Management - Save and manage your component sessions
• 📱 Responsive Design - Works on desktop and mobile devices

Tech Stack

Backend

• Node.js with Express.js
• MongoDB with Mongoose ODM
• JWT for authentication
• Google Gemini AI for code generation

Frontend

• React with Vite
• Modern CSS with Flexbox/Grid
• Real-time preview of generated components

Setup Instructions

Prerequisites

• Node.js (v16 or higher)
• MongoDB database (local or cloud)
• Google Gemini API key

1. Clone the Repository

git clone <repository-url>
cd Component_generator

2. Backend Setup

Install Dependencies

cd server
npm install

Environment Configuration

Create a .env file in the server directory:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_here
PORT=3000
GEMINI_API_KEY=your_gemini_api_key_here

Get Gemini API Key

1. Go to Google AI Studio
2. Create a new API key
3. Copy the key and paste it in your .env file

Start the Server

npm start
# or
node server.js

The server will run on http://localhost:3000

3. Frontend Setup

Install Dependencies

cd frontend
npm install

Start Development Server

npm run dev

The frontend will run on http://localhost:5173

API Endpoints

Authentication

• POST /api/auth/signup - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user

Sessions

• GET /api/sessions - Get all user sessions
• POST /api/sessions - Create new session
• PUT /api/sessions/:id - Update session
• DELETE /api/sessions/:id - Delete session

AI Generation

• POST /api/ai/generate - Generate component from prompt

Usage

1. Sign Up/Login: Create an account or login with existing credentials
2. Create Session: Start a new session to begin generating components
3. Chat with AI: Describe the component you want in natural language
4. Preview: Switch to the Preview tab to see your component in action
5. Edit Code: Modify the generated JSX and CSS in the code editor
6. Save: Your changes are automatically saved to the session

Example Prompts

• "Create a button component with hover effects"
• "Make a card component with image and description"
• "Generate a navigation bar with logo and menu items"
• "Create a form with input fields and submit button"
• "Make a responsive grid layout for a portfolio"

Project Structure

Component_generator/
├── server/
│   ├── config/
│   │   └── db.js
│   ├── controllers/
│   │   ├── authController.js
│   │   ├── sessionController.js
│   │   └── aiController.js
│   ├── middleware/
│   │   └── authMiddleware.js
│   ├── models/
│   │   ├── User.js
│   │   └── Session.js
│   ├── routes/
│   │   ├── auth.js
│   │   ├── sessions.js
│   │   └── ai.js
│   ├── utils/
│   │   └── generateToken.js
│   ├── server.js
│   └── package.json
└── frontend/
    ├── src/
    │   ├── App.jsx
    │   ├── App.css
    │   └── main.jsx
    └── package.json

Troubleshooting

Common Issues

1. Server not starting

   • Check if MongoDB is running
   • Verify your .env file has all required variables
   • Ensure port 3000 is not in use

2. AI not generating components

   • Verify your Gemini API key is correct
   • Check the server logs for API errors
   • Ensure you have sufficient API quota

3. Frontend not connecting to backend

   • Verify the server is running on port 3000
   • Check CORS settings in server.js
   • Ensure the API_BASE URL is correct in App.jsx

Getting Help

If you encounter issues:

1. Check the browser console for frontend errors
2. Check the server console for backend errors
3. Verify all environment variables are set correctly
4. Ensure all dependencies are installed

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.