SchemaForge

• 

• 

• 

  Main Canvas

• 

  Project Description

Inspiration

As developers, we realized we were wasting hours manually typing out the same boilerplate database code for every new project. Writing ORM classes, managing foreign keys, and remembering exact syntax is repetitive and prone to frustrating typos. We wanted a way to visually see our entire database architecture at a glance, and we wanted a tool that didn't lock us into just one framework. That frustration inspired us to build SchemaForge.

What it does

SchemaForge is a visual drag-and-drop database architect. Instead of writing code, you draw your database. Users can easily create tables on an interactive canvas, add columns, and define advanced constraints like Primary Keys, Foreign Keys, Unique, Not Null, and Default values. The magic happens in the sidebar: with a single click, our engine instantly translates your visual diagram into deployable, production-ready code. You can instantly toggle the output between Python (SQLAlchemy), Node.js (Prisma), or raw PostgreSQL.

How we built it

We built the frontend using React and Vite, utilizing the powerful React Flow library to handle the interactive node-based canvas. We custom-designed a sleek, dark-mode glassmorphism UI to make the tool feel like a premium developer environment. For the backend, we used Python and FastAPI. We used Pydantic models to parse the incoming JSON graph from the frontend. We then built a custom code generation engine that loops through the visual nodes and dynamically formats them into perfectly structured framework-specific code. We used uv and npm for lightning-fast package management.

Challenges we ran into

One of our biggest challenges was managing the complex state of the visual canvas. We had to ensure that when a user edited a column constraint in the sidebar (like checking a "Not Null" box), it instantly updated the exact node on the canvas without mutating the data or breaking the React Flow graph. Another major challenge was designing the backend code generation engine. We had to figure out how to translate a generic visual relationship (like a foreign key) into the vastly different syntaxes required by SQLAlchemy, Prisma, and standard SQL.

Accomplishments that we're proud of

We are incredibly proud of the Multi-Framework Export engine. Most tools force you to choose your stack beforehand, but SchemaForge lets developers pivot instantly. We're also very proud of the UI—we spent a lot of time adding glowing accents, custom scrollbars, and visual badges (like the 🔑 for primary keys) to make the app feel incredibly satisfying to use.

What we learned

We leveled up our React skills, specifically learning how to manage complex, deeply nested immutable state across different components. We also learned a lot about compiler logic by building our own backend engine that parses JSON into raw Python and Node.js code.

What's next for SchemaForge

This MVP is just the beginning. Next, we want to integrate an AI prompt engine (e.g., "Build me a social media backend") that instantly auto-generates the entire visual graph. We also plan to add live real-time team collaboration so multiple developers can design the database on the same canvas simultaneously, and a feature to directly connect SchemaForge to a live database to execute the generated code automatically.

Built With

• css3
• fastapi
• html
• javascript
• npm
• pydantric
• python
• react
• uv
• uvicorn
• vite