04 — Phase 1 Implementation Plan (MVP)

Back to README | Prev: Database Design | Next: Roadmap

Goal

A user can open LaraSchema, design tables visually on a canvas, define relationships, preview and export working Laravel migration files.

Build Order — 8 Steps

Each step builds on the previous one. The project should be runnable and testable after each step.

Step 1: Project Scaffolding

What: Create the Laravel app and package skeleton.

Tasks:

1. Create a Laravel 12 app (with Pest) in a temp folder, then move into LaraSchema/
2. Install Livewire 4: composer require livewire/livewire
3. Verify Tailwind CSS 4 + Vite setup (Laravel 12 ships with it)
4. Add @source "../../packages/laraschema/resources/views"; to resources/css/app.css so Tailwind scans package views
5. Create the package directory structure under packages/laraschema/
6. Create packages/laraschema/composer.json with:
   • PSR-4 autoload (LaraSchema\\ maps to src/)
   • Laravel auto-discovery for the service provider
   • Dependencies: illuminate/support, livewire/livewire
7. Add path repository to root composer.json and require laraschema/laraschema:@dev
8. Run composer update to symlink the package

Files created/modified:

• packages/laraschema/composer.json (new)
• Root composer.json (modified — path repo + require)
• resources/css/app.css (modified — Tailwind source path)

Verify: composer update completes without errors. Package is symlinked in vendor/laraschema/.

Step 2: Package Foundation

What: Service provider, config, routes, migrations, models, enums, and layout.

Service Provider — src/LaraSchemaServiceProvider.php

• Merges config from config/laraschema.php
• Loads routes from routes/web.php (with configurable prefix + middleware)
• Loads views namespaced as laraschema::
• Publishes migrations to host app
• Registers Livewire components via Livewire::addNamespace('laraschema', ...)

Config — config/laraschema.php

• route_prefix (default: laraschema)
• middleware (default: ['web'])
• default_canvas settings (zoom, pan, grid_size, snap_to_grid)
• default_table settings (width, color)

Routes — routes/web.php

Migrations (5 files)

All prefixed laraschema_ — see Database Design for full schemas.

Models (5 files in src/Models/)

Enums (2 files in src/Enums/)

Layout — resources/views/layouts/app.blade.php

• Uses @vite() from host app
• Includes @livewireStyles / @livewireScripts
• Simple nav bar with "LaraSchema" branding
• Renders Livewire component dynamically

Files created:

packages/laraschema/src/LaraSchemaServiceProvider.php
packages/laraschema/config/laraschema.php
packages/laraschema/routes/web.php
packages/laraschema/database/migrations/ (5 files)
packages/laraschema/src/Models/ (5 files — Project, Table, Column, Relationship, Index)
packages/laraschema/src/Enums/ (2 files — ColumnType, RelationshipType)
packages/laraschema/resources/views/layouts/app.blade.php

Verify: php artisan migrate creates all 5 tables. Visit /laraschema renders the layout.

Step 3: Project Management (CRUD)

What: List, create, rename, and delete projects.

Livewire Component — ProjectManager.php

• Lists all projects in a card grid with pagination
• Create new project (name + description) via modal
• Rename project inline
• Delete project with confirmation
• Navigate to canvas designer on click

View — project-manager.blade.php

• Card grid showing: project name, description, table count, created date
• "Create New Project" button opens Alpine.js modal
• Action buttons per card: Open Designer, Rename, Delete

Files created:

packages/laraschema/src/Http/Livewire/ProjectManager.php
packages/laraschema/resources/views/livewire/project-manager.blade.php

Verify: Create, rename, delete projects via the UI. Database records update correctly.

Steps 4 & 5: Canvas + Table Nodes

What: The visual canvas with pan, zoom, drag, and table node rendering. This is the most technically complex step.

Canvas Livewire Component — Canvas.php

Canvas View — canvas.blade.php

Structure:

┌─────────────────────────────────────────────────────┐
│  Toolbar: [Add Table] [Reset View] [Zoom: 100%]    │
├─────────────────────────────────────────────┬───────┤
│                                             │ Table │
│  SVG Canvas (full viewport)                 │Editor │
│  ┌──────────────┐                           │ Panel │
│  │  users        │    ┌──────────────┐      │(when  │
│  │  id           │────│  posts        │      │select │
│  │  name         │    │  id           │      │ed)   │
│  │  email        │    │  user_id (FK) │      │       │
│  └──────────────┘    │  title        │      │       │
│                       └──────────────┘      │       │
│                                             │       │
└─────────────────────────────────────────────┴───────┘

• Full-viewport <div x-data="schemaCanvas(...)"> wrapping an SVG
• SVG grid background using <pattern> (minor + major grid lines)
• <g :transform="viewTransform"> applies pan/zoom to all content
• Table nodes via <template x-for>: white card with colored header, column rows
• wire:ignore on SVG container prevents Livewire DOM-diffing during drags

Alpine.js schemaCanvas Component (inline in canvas view)

Files created:

packages/laraschema/src/Http/Livewire/Canvas.php
packages/laraschema/resources/views/livewire/canvas.blade.php

Verify: Add tables, drag to reposition, refresh page — positions persist. Zoom/pan works smoothly at 60fps.

Step 6: Table Editor Panel

What: Side panel for editing table settings and columns.

Livewire Component — TableEditor.php

View — table-editor.blade.php

┌─────────────── Table Editor ──────────────┐
│  Table: [users          ]                  │
│  Color: [■ #3B82F6]                       │
│                                            │
│  ☑ id()  ☑ timestamps()  ☐ softDeletes() │
│                                            │
│  ── Columns ──────────────────────────     │
│  name    │ string  │ ☐N ☐U ☐I │ [×]      │
│  email   │ string  │ ☑N ☐U ☑I │ [×]      │
│  bio     │ text    │ ☑N ☐U ☐I │ [×]      │
│                                            │
│  ── Add Column ───────────────────────     │
│  Name:  [____________]                     │
│  Type:  [string     ▼]                     │
│  [☐ Nullable] [☐ Unique] [☐ Index]       │
│  [+ Add Column]                            │
│                                            │
│  [🗑 Delete Table]                         │
└────────────────────────────────────────────┘

• Right-side sliding panel (w-96, full height)
• Table settings section at top
• Scrollable column list in middle
• "Add Column" form at bottom

Files created:

packages/laraschema/src/Http/Livewire/TableEditor.php
packages/laraschema/resources/views/livewire/table-editor.blade.php

Verify: Click table to open editor. Add/edit/remove columns. Canvas table node updates to show changes.

Step 7: Relationships

What: Draw relationships between tables with auto FK creation and SVG lines.

User Flow

1. Click "Draw Relationship" button in toolbar (enters relationship mode)
2. Click source table — highlight appears
3. Click target table — modal opens for type selection
4. Select type (hasOne, hasMany, belongsTo, belongsToMany) + on_delete action
5. System auto-creates FK column on the correct table
6. SVG line appears between the two tables with cardinality indicators

RelationshipManager Component — RelationshipManager.php

FK Column Placement Logic:

SVG Relationship Lines (in canvas view)

• Lines rendered as <line> or <path> between table nodes
• Coordinates computed from table positions (midpoints of nearest edges)
• SVG <marker> definitions for cardinality:
  • "1" side → vertical line (|)
  • "Many" side → crow's foot (three fanning lines)

Files created:

packages/laraschema/src/Http/Livewire/RelationshipManager.php
packages/laraschema/resources/views/livewire/relationship-manager.blade.php

Verify: Draw relationships. Lines appear on canvas. FK columns auto-created. Cardinality indicators visible.

Step 8: Code Generation + Export

What: Generate valid Laravel migrations and export as ZIP.

MigrationGenerator — src/Generators/MigrationGenerator.php

Pure PHP class with no HTTP/Livewire dependency.

Generates:

• All 30+ column types with correct parameters (length, precision, enum values)
• All modifiers: nullable, default, unique, index, unsigned, comment
• Foreign key constraints with cascadeOnDelete
• id(), timestamps(), softDeletes() shortcuts
• Pivot table migrations for belongsToMany relationships
• Proper down() methods with Schema::dropIfExists()

CodePreview Component — src/Http/Livewire/CodePreview.php

• Shows generated migration code in a tabbed viewer
• File tabs on left, syntax-highlighted code on right
• Uses MigrationGenerator to produce output

SchemaExportService — src/Services/SchemaExportService.php

• Creates a ZIP file containing database/migrations/ folder
• Uses PHP's ZipArchive extension

ExportController — src/Http/Controllers/ExportController.php

• download($project) — generates ZIP, returns download response, deletes temp file

Files created:

packages/laraschema/src/Generators/MigrationGenerator.php
packages/laraschema/src/Services/SchemaExportService.php
packages/laraschema/src/Http/Controllers/ExportController.php
packages/laraschema/src/Http/Livewire/CodePreview.php
packages/laraschema/resources/views/livewire/code-preview.blade.php

Verify: Click "Preview Code" — see generated migrations. Click "Export" — download ZIP. Unzip contains valid Laravel migration syntax.

Complete File Manifest (30 files)

packages/laraschema/
├── composer.json
├── config/
│   └── laraschema.php
├── database/migrations/
│   ├── 2026_01_01_000001_create_laraschema_projects_table.php
│   ├── 2026_01_01_000002_create_laraschema_tables_table.php
│   ├── 2026_01_01_000003_create_laraschema_columns_table.php
│   ├── 2026_01_01_000004_create_laraschema_relationships_table.php
│   └── 2026_01_01_000005_create_laraschema_indexes_table.php
├── resources/views/
│   ├── layouts/
│   │   └── app.blade.php
│   └── livewire/
│       ├── canvas.blade.php
│       ├── code-preview.blade.php
│       ├── project-manager.blade.php
│       ├── relationship-manager.blade.php
│       └── table-editor.blade.php
├── routes/
│   └── web.php
└── src/
    ├── LaraSchemaServiceProvider.php
    ├── Enums/
    │   ├── ColumnType.php
    │   └── RelationshipType.php
    ├── Generators/
    │   └── MigrationGenerator.php
    ├── Http/
    │   ├── Controllers/
    │   │   └── ExportController.php
    │   └── Livewire/
    │       ├── Canvas.php
    │       ├── CodePreview.php
    │       ├── ProjectManager.php
    │       ├── RelationshipManager.php
    │       └── TableEditor.php
    ├── Models/
    │   ├── Column.php
    │   ├── Index.php
    │   ├── Project.php
    │   ├── Relationship.php
    │   └── Table.php
    └── Services/
        └── SchemaExportService.php

Verification Checklist

Run these checks after completing each step:

End-to-End Test

Design a small schema: users, posts, comments, tags (with pivot). Export migrations, paste into a fresh Laravel app, run php artisan migrate — all tables created correctly with foreign keys.

Next: Roadmap