SuperNova - Interactive Database Design Tool

Database Schema Visualizer is a modern, interactive web application that allows you to design, visualize, and manage database schemas through an intuitive drag-and-drop interface with real-time visual feedback.

This project is still under development.

✨ Features

• Interactive Schema Design - Create and modify database schemas visually:

  • Drag-and-drop table creation and positioning
  • Real-time relationship visualization between tables
  • Interactive edge connections for foreign key relationships

• Table Management:

  • Add/remove tables with custom names and properties
  • Define columns with data types, constraints, and relationships
  • Visual representation of primary keys, foreign keys, and indexes

• Modern UI - Clean, responsive interface with:

  • Dark/light theme support with system preference detection
  • Smooth animations and transitions
  • Resizable panels and components
  • Mobile-friendly responsive design

• Export Capabilities - Multiple export options:

  • Export schema as PNG/JPEG images
  • Generate PDF documentation
  • Export as SQL DDL statements
  • Save/load schema configurations

• Advanced Features:

  • Undo/redo functionality
  • Schema validation and error checking
  • Zoom and pan controls for large schemas
  • Auto-layout algorithms for optimal positioning

🛠️ Tech Stack

• Frontend:

  • Next.js 15.2 with App Router
  • React 19 with TypeScript 5
  • TailwindCSS 3.4 for styling
  • ReactFlow for interactive diagram creation

• UI Components:

  • Radix UI primitives for accessibility
  • Lucide React for icons
  • Sonner for toast notifications
  • React Hook Form with Zod validation

• Export & Utilities:

  • html-to-image for PNG/JPEG export
  • jsPDF for PDF generation
  • React Resizable Panels for layout

📋 Prerequisites

• Node.js 18.0 or higher
• npm, yarn, or pnpm
• Modern web browser with ES2020+ support

🚀 Getting Started

# Clone the repository
git clone https://github.com/viraj-ap/supernova.git
cd database

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Start the development server
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the application.

🎯 Usage

1. Creating Tables: Click the "Add Table" button to create new database tables
2. Adding Columns: Select a table and use the column dialog to add fields with data types
3. Creating Relationships: Drag from one table to another to create foreign key relationships
4. Customizing Layout: Drag tables to reposition them in your schema

🔧 Development

# Run development server
npm run dev

🎨 Themes

The application supports both light and dark themes with automatic system preference detection. You can toggle themes using the theme switcher in the control panel.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🐛 Issues

If you find any bugs or have feature requests, please create an issue in the GitHub repository.

---

Built with ❤️ using Next.js, React, and ReactFlow