Skip to content

Repository files navigation

Website Generator

A full-stack web application that generates websites based on text prompts using AI-powered templates.

🚀 Live Demo

Deployed Application: https://ogh5izcv1dkd.manus.space

📋 Features

  • Prompt-based Website Generation: Describe your website idea and get a fully functional website
  • Multiple Templates: Supports coffee shop, portfolio, business, and generic website templates
  • Real-time Preview: See your generated website instantly in the browser
  • Code Viewing: Inspect the generated HTML, CSS, and JavaScript code
  • Responsive Design: All generated websites are mobile-friendly
  • Interactive Elements: Generated websites include working buttons and animations

🛠 Technology Stack

Frontend

  • React.js - Modern UI framework
  • Vite - Fast build tool and development server
  • Tailwind CSS - Utility-first CSS framework
  • shadcn/ui - Beautiful and accessible UI components
  • Lucide Icons - Clean and consistent icons

Backend

  • Flask - Python web framework
  • Flask-CORS - Cross-origin resource sharing support
  • SQLAlchemy - Database ORM (optional)

🏗 Architecture

The application consists of two main components:

  1. Frontend (React): User interface for inputting prompts and displaying generated websites
  2. Backend (Flask): API server that processes prompts and generates website code

Data Flow

  1. User enters a prompt describing their desired website
  2. Frontend sends the prompt to the backend API
  3. Backend analyzes the prompt and selects an appropriate template
  4. Generated HTML, CSS, and JavaScript are returned to the frontend
  5. Frontend displays the website in a preview iframe and shows the code

📁 Project Structure

website_generator_app/
├── frontend/
│   └── website-generator-frontend/
│       ├── src/
│       │   ├── components/
│       │   ├── App.jsx
│       │   └── main.jsx
│       ├── package.json
│       └── vite.config.js
├── backend/
│   └── website-generator-backend/
│       ├── src/
│       │   ├── routes/
│       │   │   ├── generator.py
│       │   │   └── user.py
│       │   ├── models/
│       │   ├── static/
│       │   └── main.py
│       ├── venv/
│       └── requirements.txt
└── README.md

🚀 Local Development

Prerequisites

  • Node.js 20+ and pnpm
  • Python 3.11+
  • Git

Backend Setup

cd backend/website-generator-backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
python src/main.py

Frontend Setup

cd frontend/website-generator-frontend
pnpm install
pnpm run dev

The frontend will be available at http://localhost:5173 and the backend at http://localhost:5001.

🎨 Supported Website Types

The application can generate different types of websites based on keywords in your prompt:

  • Coffee Shop/Restaurant: Keywords like "coffee", "cafe", "restaurant", "food"
  • Portfolio: Keywords like "portfolio", "personal", "resume", "cv"
  • Business/Corporate: Keywords like "business", "company", "corporate", "startup"
  • Generic: Default template for any other type of website

🔧 API Endpoints

POST /api/generate_website

Generates a website based on a text prompt.

Request Body:

{
  "prompt": "Create a modern landing page for a coffee shop"
}

Response:

{
  "html": "<html>...</html>",
  "css": "body { ... }",
  "js": "console.log('Hello');"
}

🌟 Example Prompts

Try these example prompts to see the website generator in action:

  1. Coffee Shop: "Create a modern landing page for a coffee shop with a hero section, menu showcase, and contact information. Use warm colors and include images of coffee beans."

  2. Portfolio: "Create a professional portfolio website for a web developer with a modern design, project showcase, and contact section"

  3. Business: "Create a corporate website for a tech startup with services section, team information, and call-to-action buttons"

🚀 Deployment

The application is deployed using Manus deployment services:

  • Backend: Deployed as a Flask application with integrated frontend
  • Frontend: Built and served through the Flask backend's static files

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📝 License

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

🙏 Acknowledgments

  • Built with modern web technologies
  • UI components from shadcn/ui
  • Icons from Lucide
  • Deployed on Manus platform

Live Demo: https://ogh5izcv1dkd.manus.space

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages