DEV Community

Cover image for Supabase Schema Visualizer - No installation/login
Zernonia
Zernonia

Posted on • Edited on • Originally published at zernonia.com

14 8

Supabase Schema Visualizer - No installation/login

The Idea and Inspiration 💡

Recently, I got addicted to Supabase ⚡ as an Open-Source Firebase Alternative, and I'm having so much fun with it. It has such wonderful UI, and well-written documentation, that allows me to spin up a project easily.

Because of that, I've started to learn PostgreSQL, which Supabase built on top of. I quickly realized that how great would it be if I can easily visualize all my tables, and the relationship with one another (since PostgreSQL is a relational DB), and there's when I found out about Database Schema🔥.

😥 Unfortunately I found many Database Schema Visualizer online which either requires me to install database software, or login with email, which I do not want to . Thus, this gave me the idea to code it myself, since I'm a Web Developer💻.

Showcase 🌟

If you are Supabase user, or interested in using the visualizer, here's the link to it: Supabase Schema Visualizer

GitHub logo zernonia / supabase-schema

Secured & Simple Supabase Schema Visualizer


Logo

Supabase Schema

Secured & Simple Supabase Schema Visualizer.
No installations • No Database password required

View Demo · Report Bug · Request Feature

Supabase Schema

🚀 Features

  • 🔨 No installations
  • 🔒 Persistent State in LocalStorage
  • 🚪 Login-less
  • 👀 No Sensitive info required
  • 🤚 Moveable Schema for own design

📇 About The Project

I look around the internet and found many Database Schema Visualizers that require me to either download the software, or login to view my Database Schema. I feel like there's too many unneccessary steps, just to view the schema.

Thus, I've decided to take this opportunity to build this Open Source, Free, Login-less and Secured Supabase Schema Visualizer 🔥

🔨 Built With

🐾 Instructions

  1. Go to Supabase App
  2. Select your Project
  3. Go to Settings
  4. In Settings tab, Go to API
  5. Under Config, copy URL
  6. Under API Keys, copy anon public
  7. Paste both value into…

If you find this useful, remember to 🌟 it on Github

Lend me a Hand ✋

When you navigate through the App, you might notice some bugs or possible improvement, feel free to contribute to this project.💘

Ultimate Hope 🔮

My Vision for this project is hopefully that it might be absorbed into official Supabase App, where developer can quickly manage their project's schema visually without leaving the app. So if you find it helpful and wish to have this features, a star on Github would be very much appreciated.

Follow me 🐤

Thank you 🙏

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (4)

Collapse
 
lionad profile image
Lionad

Awesome!

Collapse
 
anthonygushu profile image
Anthony Gushu

This is really neat - great work on this project!

I'll test it out on something I'm using Supabase with and I'll let you know if I come across any bugs

Collapse
 
zernonia profile image
Zernonia

Thank you for using it..

Yup feel free to report any bug or suggest any new features ya

Collapse
 
mbaneshiapi profile image
mbaneshi

"Recently, I got addicted to Supabase ⚡"
same here
thanks it is cool

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay