Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zernonia/supabase-schema
Secured & Simple Supabase Schema Visualizer
https://github.com/zernonia/supabase-schema
database-schema supabase-schema typescript vite vue vueuse yarn
Last synced: 29 days ago
JSON representation
Secured & Simple Supabase Schema Visualizer
- Host: GitHub
- URL: https://github.com/zernonia/supabase-schema
- Owner: zernonia
- License: mit
- Created: 2021-05-09T12:06:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-07T21:05:55.000Z (11 months ago)
- Last Synced: 2024-09-30T16:32:00.386Z (about 1 month ago)
- Topics: database-schema, supabase-schema, typescript, vite, vue, vueuse, yarn
- Language: Vue
- Homepage: https://supabase-schema.vercel.app/
- Size: 588 KB
- Stars: 796
- Watchers: 9
- Forks: 46
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
- project-awesome - zernonia/supabase-schema - Secured & Simple Supabase Schema Visualizer (Vue)
README
Supabase Schema
Secured & Simple Supabase Schema Visualizer.
No installations • No Database password required.
View Demo
·
Report Bug
·
Request Feature
## 🚀 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
- [Vue 3](https://v3.vuejs.org/)
- [Vite](https://vitejs.dev/)
- [WindiCSS](https://windicss.org/)
## 🐾 Instructions
1. Go to [Supabase App](https://app.supabase.io/)
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 their respectively slot in [Supabase Schema](https://supabase-schema.vercel.app/)
8. Fetch data
9. Enjoy the Visualization 🎉
Remeber to ⭐ this repo if you ❤ this Apps
## 🌎 Local Development
### Prerequisites
Yarn
- ```sh
npm install --global yarn
```
### Development
1. Clone the repo
```sh
git clone https://github.com/zernonia/supabase-schema.git
```
2. Install NPM packages
```sh
yarn install
```
3. Run Development instance
```sh
yarn dev
```
## ➕ Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 🙏 Acknowledgement
1. Fundamental for this Visualization ([Generate database types from OpenAPI specification](https://supabase.io/docs/reference/javascript/generating-types#generate-database-types-from-openapi-specification))
2. Guide to Construct Dynamic SVG Connector ([Connecting Table using SVG](https://codepen.io/alojzije/pen/ndfrI))
3. [Icones - icon gallery](https://icones.js.org/)
## 📈 Analytics
I'm using [Umami Analytics](https://umami.is/docs/about) because I'm interested in the distributions of user who uses Supabase and this tool.
[This](https://umami-zernonia.vercel.app/share/yzSUulXQ/Supabase%20Schema) is the public URL for the analytics. Enjoy!
## 📜 License
Not Associated with Supabase.
Distributed under the MIT License. See `LICENSE` for more information.
# 📧 Contact
Zernonia - [@zernonia](https://twitter.com/zernonia) - [email protected]
Also, if you like my work, please buy me a coffee ☕😳
