https://github.com/lalomorales22/endless-void-mazes-escape
supabase database visualizer
https://github.com/lalomorales22/endless-void-mazes-escape
db sql supabase
Last synced: 3 months ago
JSON representation
supabase database visualizer
- Host: GitHub
- URL: https://github.com/lalomorales22/endless-void-mazes-escape
- Owner: lalomorales22
- Created: 2025-06-15T18:04:17.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-21T05:59:50.000Z (8 months ago)
- Last Synced: 2025-11-21T07:18:56.057Z (8 months ago)
- Topics: db, sql, supabase
- Language: TypeScript
- Homepage:
- Size: 243 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TRON Database Interface 🌌
Experience your database like never before in a stunning, fully-interactive 3D environment inspired by TRON. Navigate through a futuristic digital cityscape where each building represents a table, and every glowing data block is a record waiting to be explored.
## ✨ What's New
This application has been completely upgraded with three major enhancement phases:
### 🎨 Phase 1: Breathtaking Visuals
- **Particle Systems** - Thousands of floating particles create an immersive atmosphere
- **Dynamic Skybox** - Animated star fields and colorful nebula clouds
- **Advanced Lighting** - Volumetric light beams, glowing accents, and atmospheric effects
- **Enhanced Buildings** - Architectural variety with scanlines, light columns, and glowing rings
- **Smooth Camera System** - Professional camera controller with preset angles and smooth transitions
- **Post-Processing** - Real-time visual effects for a cinematic experience
- **Data Streams** - Animated connections flowing between database tables
### 🚀 Phase 2: Power Features
- **Advanced Search** - Find specific records across your entire database
- **Analytics Dashboard** - Comprehensive database statistics and visualizations
- **Interactive Minimap** - Bird's-eye view of your database with instant navigation
- **Real-time Updates** - Live data synchronization with Supabase
- **Enhanced Data Management** - Improved CRUD operations with visual feedback
- **Smart Filtering** - Filter and sort records by table
- **Performance Optimized** - Efficient rendering even with large datasets
### 🎯 Phase 3: Premium Polish
- **Interactive Tutorial** - Step-by-step onboarding for first-time users
- **Keyboard Shortcuts** - Comprehensive hotkey system for power users
- **Settings Panel** - Customize your experience with user preferences
- **Help System** - Context-sensitive help and documentation
- **Persistent Settings** - Your preferences saved locally
- **Error Handling** - Graceful error management with user-friendly messages
- **Responsive Controls** - Intuitive UI that adapts to your workflow
## 🎮 Controls & Navigation
### Basic Movement
- **WASD** or **Arrow Keys** - Navigate the 3D space
- **Mouse Drag** - Rotate and look around
- **Scroll Wheel** - Zoom in and out
### Camera Presets
- **1** - Overview Mode (best for general navigation)
- **2** - Bird's Eye View (top-down perspective)
- **3** - Cinematic Angle (dramatic side view)
- **4** - Low Angle View (ground-level perspective)
### Quick Actions
- **Space** - Create new database table
- **?** - Show keyboard shortcuts help
- **Esc** - Close any open dialog
- **Click** - Select data blocks or buildings
## 🎯 Key Features
### 3D Database Visualization
Navigate a futuristic city where buildings represent your database tables. Each structure's height corresponds to its record count, and glowing data blocks inside represent individual records.
### Interactive Data Management
- **Edit Records** - Click any data block to view and modify its contents
- **Create Tables** - Add new tables with custom schemas
- **Delete Records** - Remove data with confirmation dialogs
- **Real-time Sync** - Changes immediately reflected in Supabase
### Analytics & Insights
- Total record counts across all tables
- Database size distribution
- Table comparisons and statistics
- Visual progress bars and charts
### Search & Discovery
- Search across all tables or specific ones
- Filter results dynamically
- Jump directly to relevant data
### Customization
- Adjust particle density for performance
- Control camera sensitivity
- Toggle minimap visibility
- Enable/disable visual effects
- Save your preferences
## 🛠 Tech Stack
Built with cutting-edge web technologies:
- **Vite** - Lightning-fast build tool
- **React 18** - Modern UI framework
- **TypeScript** - Type-safe development
- **Three.js** - Powerful 3D graphics engine
- **Supabase** - Real-time database backend
- **Tailwind CSS** - Utility-first styling
- **shadcn/ui** - Beautiful component library
## 📦 Installation
### Quick Start
```sh
# Clone the repository
git clone
# Navigate to project directory
cd endless-void-mazes-escape
# Install dependencies
npm install
# Start the development server
npm run dev
```
### Requirements
- Node.js (v16 or higher recommended)
- npm or yarn
- Modern web browser with WebGL support
## 🌐 Development
### Available Scripts
```sh
# Development server with hot-reload
npm run dev
# Production build
npm run build
# Development build
npm run build:dev
# Lint code
npm run lint
# Preview production build
npm run preview
```
### Environment Setup
The application connects to Supabase for database operations. Make sure you have:
1. A Supabase project set up
2. Proper environment variables configured
3. Database tables created (users, posts, comments, products, orders, analytics)
## 🎨 Customization
### Editing via Lovable
Visit the [Lovable Project](https://lovable.dev/projects/38427bc0-010d-40b3-b956-341b812ae2ec) to make changes using natural language prompts. Changes are automatically committed to your GitHub repository.
### Local Development
Clone the repository and use your favorite IDE:
```sh
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:5173 in your browser
```
### Using GitHub Codespaces
1. Navigate to your repository
2. Click the "Code" button
3. Select "Codespaces" tab
4. Click "New codespace"
5. Edit files directly in the cloud
## 🎭 User Experience
### First-Time Users
On your first visit, an interactive tutorial guides you through:
- Basic navigation controls
- Camera preset system
- Data interaction methods
- Search and analytics features
- Settings customization
### Power Users
Advanced features include:
- Full keyboard shortcut support
- Quick camera preset switching
- Instant table navigation via minimap
- Advanced search filters
- Performance tuning options
## 🔒 Best Practices
### Performance
- Particle density can be adjusted in settings for lower-end devices
- The application automatically optimizes rendering based on available resources
- Large datasets are handled efficiently with virtualization
### Data Safety
- All database operations require confirmation
- Changes sync immediately to Supabase
- Error messages provide clear recovery instructions
## 📱 Browser Support
Optimized for modern browsers:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Requires WebGL 2.0 support for full 3D functionality.
## 🐛 Troubleshooting
### Common Issues
**Black screen or no 3D view**
- Ensure your browser supports WebGL 2.0
- Update your graphics drivers
- Try disabling browser extensions
**Slow performance**
- Reduce particle density in Settings
- Close other browser tabs
- Check if hardware acceleration is enabled
**Database connection errors**
- Verify Supabase credentials
- Check network connectivity
- Ensure database tables exist
## 🤝 Contributing
We welcome contributions! To get started:
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request
## 📄 License
This project is built with modern open-source technologies. Please refer to individual package licenses for details.
## 🌟 Acknowledgments
- Inspired by the TRON franchise aesthetic
- Built with ❤️ using React, Three.js, and Supabase
- UI components from shadcn/ui
- Icons from Lucide React
## 🔮 Future Enhancements
Potential upcoming features:
- VR/AR support for immersive database exploration
- Collaborative multi-user environments
- Advanced query builder with visual programming
- Export/import for various data formats
- Table relationship visualizations with connection graphs
- Time-travel debugging for data changes
- Custom color themes and building styles
- Sound effects and ambient audio
- Mobile device optimization
- Offline mode with service workers
## 📞 Support
For issues, feature requests, or questions:
- Create an issue on GitHub
- Check existing documentation
- Review the in-app help system (press `?`)
---
**Built with passion for beautiful data visualization** ✨
Experience your database in a whole new dimension. Welcome to the future of data management.