Cloud-Based React Component Builder

A powerful drag-and-drop web-based builder tool that allows you to visually design React components and save them as JSON schemas to Supabase. Components can be rendered in both React.js and React Native applications using separate client libraries.

Features

✅ MVP Features

• Drag-and-Drop Builder: Visual canvas for designing components with drag-and-drop interface
  • Support for Containers, Buttons, Text, and Images
  • Resizing, nesting, and styling capabilities
  • Real-time preview
• Component Storage: Save component JSON schemas to Supabase database
  • Cloud storage for assets (images/icons)
  • Component metadata (name, version, author)
• JSON Schema Generation: Components are saved as platform-agnostic JSON schemas
• Client Libraries: Separate npm packages for rendering:
  • @your-org/component-builder-react - For React.js applications
  • @your-org/component-builder-react-native - For React Native applications
• Props Support: Components support dynamic props with template expressions ({{ props.title }})
• Undo/Redo: Full history management for component editing

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Drag & Drop: react-dnd
• Database: Supabase (PostgreSQL + Storage)

Getting Started

Prerequisites

• Node.js 18+ and npm
• A Supabase account (free tier works)

Installation

1. Clone and install dependencies:

   npm install

2. Set up Supabase:

   • Create a new project at supabase.com
   • Go to SQL Editor and run the SQL from supabase-setup.sql
   • Copy your project URL and anon key from Settings > API

3. Configure environment variables:

   cp .env.local.example .env.local

   Then edit .env.local and add your Supabase credentials:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run the development server:

   npm run dev

5. Open your browser: Navigate to http://localhost:3000

Usage

Building Components

1. Navigate to /builder to open the component builder
2. Drag elements from the left palette onto the canvas
3. Click on elements to select and edit their properties in the right panel
4. Nest elements by dragging into containers
5. Use Undo/Redo buttons to manage your editing history
6. Click "Save" to save your component to the cloud

Rendering Components

Note: This builder project only creates and saves component schemas. For production rendering, install the appropriate client library:

For React.js Applications

npm install @your-org/component-builder-react

import { Component } from '@your-org/component-builder-react';

// Basic usage
<Component name="test" />

// With props
<Component name="test" title="Hello World" />

// With version
<Component name="test" version="1.0.0" title="Hello World" />

For React Native Applications

npm install @your-org/component-builder-react-native

import { Component } from '@your-org/component-builder-react-native';

// Basic usage
<Component name="test" />

// With props
<Component name="test" title="Hello World" />

The client libraries will automatically fetch the JSON schema from Supabase and render platform-specific components.

Project Structure

src/
├── app/
│   ├── builder/          # Builder page
│   ├── page.tsx          # Home page
│   └── layout.tsx        # Root layout
├── components/
│   ├── builder/          # Builder components
│   │   ├── Canvas.tsx
│   │   ├── CanvasElement.tsx
│   │   ├── ElementPalette.tsx
│   │   ├── PropertiesPanel.tsx
│   │   └── BuilderToolbar.tsx
│   └── renderer/         # Simple web-only demo renderer (for preview)
│       ├── Component.tsx
│       └── RenderNode.tsx
├── lib/
│   ├── supabase.ts       # Supabase client & functions
│   └── history.ts        # Undo/redo logic
└── types/
    └── component.ts      # TypeScript types

Component Schema

Components are stored as JSON schemas with the following structure:

{
  id: string;
  name: string;
  version: string;
  author?: string;
  userId?: string;
  root: ComponentNode;
  createdAt?: string;
  updatedAt?: string;
}

Each ComponentNode can be:

• container: Can contain other elements
• button: Clickable button with text
• text: Text element
• image: Image element

Database Schema

The Supabase table structure:

components (
  id UUID PRIMARY KEY,
  name VARCHAR(255),
  version VARCHAR(50),
  author VARCHAR(255),
  user_id UUID,
  schema JSONB,
  created_at TIMESTAMP,
  updated_at TIMESTAMP
)

Architecture

This project is the builder tool (web-based). It:

• Provides a drag-and-drop interface for designing components
• Saves component schemas as JSON to Supabase
• Includes a simple web-only renderer for preview/demo purposes

Production rendering is handled by separate client libraries:

• @your-org/component-builder-react - React.js renderer
• @your-org/component-builder-react-native - React Native renderer

These libraries:

• Fetch JSON schemas from Supabase
• Render platform-specific components (React DOM or React Native)
• Support props and template expressions ({{ props.title }})

Screenshots

Future Enhancements

• Create and publish React.js client library
• Create and publish React Native client library
• Component versioning and history
• Team collaboration features
• Component marketplace
• Advanced styling options
• Export to code
• Asset upload to Supabase Storage
• Authentication and user management

License

MIT