DEV Community

loading...
Cover image for Supabase Schema Visualizer - No installation/login

Supabase Schema Visualizer - No installation/login

Zernonia
VueJS ๐Ÿ’š + IndieHacker
Originally published at blog.zernonia.com ใƒป1 min read

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 ๐Ÿ™

Discussion (2)

Collapse
tonyketcham profile image
Tony Ketcham

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 Author

Thank you for using it..

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