Awais Rasool

Awais Rasool

Back

Schema Builder

Full Stack DeveloperCompleted
Source Code
Schema Builder preview

Tech Stack

Frontend
React.js
TypeScript
Vite
Backend
Go
Swagger
Database
MongoDb
Mobile & Auth
OAuth
Cloud & DevOps
Docker

Overview

Schema Builder is an intelligent full-stack database schema designer that revolutionizes database modeling. It combines a visual canvas editor with AI-powered chat assistance to help teams design, validate, and export database schemas faster than ever before.

Problem Solved

Database schema design is often error-prone and requires deep SQL knowledge. Teams struggle to visualize relationships, maintain documentation, and iterate on schema changes collaboratively. Traditional diagramming tools lack the intelligence to suggest improvements or generate executable SQL, creating a gap between design and implementation.

Solution

Schema Builder bridges this gap with an interactive visual canvas where users can drag tables, draw relationships, and see real-time SQL generation. The AI assistant understands natural language descriptions of data requirements and suggests normalized schema designs, foreign key constraints, and index strategies.

Workflow

  1. Authentication: Sign in securely with Google OAuth via Firebase
  2. Project Setup: Create a new schema project or import an existing database
  3. Visual Design: Drag tables onto the canvas, define columns, types, and constraints
  4. Relationship Mapping: Draw connections between tables with automatic foreign key detection
  5. AI Assistance: Chat with the AI to get recommendations on normalization, indexing, and best practices
  6. SQL Generation: Instantly export the visual schema to PostgreSQL, MySQL, SQLite, or MongoDB syntax
  7. Collaboration: Share the schema with teammates for review and concurrent editing
  8. Version Control: Track schema evolution with built-in diff and rollback capabilities

Technical Highlights

  • Frontend: React with TypeScript, custom Canvas 2D API for diagram rendering, Vite build tool
  • Backend: Go for high-performance API handling and SQL generation logic
  • AI Integration: Context-aware prompt engineering for schema recommendations
  • Database: MongoDB for flexible storage of schema graphs and version history
  • Real-Time: WebSocket server for live collaboration and cursor tracking
  • Authentication: Firebase Authentication with Google OAuth 2.0

Key Takeaways

The biggest lesson from Schema Builder was the importance of optimistic UI patterns in collaborative environments. By designing the frontend to immediately reflect user actions while the backend validates and reconciles conflicts asynchronously, the app feels instant and responsive even during concurrent edits.

Features

Visual canvas for drag-and-drop schema design

AI-powered chat assistant for schema recommendations

Automatic SQL generation for multiple databases

Real-time collaboration with conflict resolution

Version history and schema diff viewer

Export to SQL, JSON, and ORM config formats

Google OAuth authentication with Firebase

Responsive canvas with zoom, pan, and grid snap

Architecture

Schema Builder uses a React frontend with a custom HTML5 Canvas engine for visual editing. The Go backend exposes RESTful APIs documented with Swagger. MongoDB stores schema metadata and project versions with document-level versioning. Firebase handles OAuth authentication. Docker containers package the entire stack for easy deployment.

API & System Flow

Users authenticate via Google OAuth (Firebase). The frontend communicates with the Go backend over HTTPS. Schema operations are processed through a validation pipeline: user input → AI enhancement (optional) → storage in MongoDB → SQL generation → response to client. Real-time updates are pushed via WebSockets for collaborative sessions.

Challenges & Solutions

Solution

Used a custom canvas rendering engine with virtualized nodes and optimized edge routing algorithms to maintain 60fps even with 100+ tables.

Related Projects

App Lens

App Lens

AppLens is a full-stack web application designed to help developers and designers create professional app store screenshots and promotional graphics for iOS and Android applications. With an intuitive visual editor, pre-designed templates, and powerful customization options.

View Project
SchemaCraft

SchemaCraft

Revolutionary full-stack SaaS that transforms API development: create custom APIs instantly through visual schema design, get auto-generated CRUD endpoints with authentication, real-time collaboration, and comprehensive admin controls. Built with React TypeScript frontend, Go backend, deployed on AWS with automated CI/CD.

View Project
Funutrition

Funutrition

Developed Funutrition, an interactive kids' app designed by a dietitian to make learning about healthy eating fun. Features include educational games, healthy recipes, expert nutrition tips, and progress tracking. The app helps children build lifelong healthy habits while supporting parents with guidance and insights.

View Project