WebSketch

Transform your hand-drawn sketches into functional websites instantly using AI.

Built for Wildhacks 2025. Continuing to be built in private. This repo is now an archive.

Features

• Draw UI components using TLDraw's intuitive canvas
• Real-time preview of generated components
• Save and manage your sketches with Supabase
• Built-in code editor powered by Monaco Editor

Getting Started

Prerequisites

• Node.js and npm
• Python 3.x
• pip (Python package manager)

Installation

1. Clone the repository

   git clone https://github.com/Bardmemic/SketchReact.git
   cd SketchReact

2. Backend Setup

   cd backend
   pip install -r requirements.txt

3. Frontend Setup

   cd frontend
   npm install

Running the Application

1. Start the Backend Server

   cd backend
   python3 main.py

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

2. Start the Frontend Development Server

   cd frontend
   npm run dev

   The frontend will be available at http://localhost:5173

Technology Stack

Frontend

• React
• TLDraw (Sketch Canvas)
• Monaco Editor (Code Editor)
• Tailwind CSS (Styling)
• ShadcnUI (Components)

Backend

• Flask (Python Web Framework)
• Claude API (AI Code Generation)
• Gemini API (AI Chat Interface)

Database

• Supabase (User Data & Sketch Storage)

Acknowledgments

• Claude - AI Code Generation
• Gemini - AI Chat Interface
• TLDraw - Sketch Canvas
• Monaco Editor - Code Editor
• Supabase - Database and Authentication