Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xavimondev/supaplay
Supabase Launch Week 8 Hackathon - A playground to test and refine your JavaScript functions against your PostgreSQL database.
https://github.com/xavimondev/supaplay
playground react supabase tailwindcss typescript webcontainer
Last synced: about 1 month ago
JSON representation
Supabase Launch Week 8 Hackathon - A playground to test and refine your JavaScript functions against your PostgreSQL database.
- Host: GitHub
- URL: https://github.com/xavimondev/supaplay
- Owner: xavimondev
- License: mit
- Created: 2023-08-06T05:16:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-20T16:44:26.000Z (10 months ago)
- Last Synced: 2024-08-17T08:07:28.753Z (3 months ago)
- Topics: playground, react, supabase, tailwindcss, typescript, webcontainer
- Language: TypeScript
- Homepage: https://supaplay.vercel.app
- Size: 486 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Introduction
Supaplay is a playground to effortlessly test and refine your `supabase-js` JavaScript functions against your PostgreSQL thanks to the power
of WebContainer API.
## Video demo
[Watch video](https://drive.google.com/file/d/1LGrV9CETt-aLTiWxoO4JJ6lKLM48S9mp/view)
## Features
### Zero Setup
Supaplay Playground is all set up for you. No need to configure IDEs or dependencies. Just provide your Supabase keys and start testing your queries instantly.
### Interactive Query Testing
Write and execute queries using Monaco editor and get JSON-formatted results. This makes it easy to integrate the results of your queries into your own applications.
### WebContainer API Magic
Experience the power of WebContainerAPI, running Node.js in your browser. Effortlessly harness its capabilities to create, edit, and run code seamlessly.
## Stack
- [Vite + React + TypeScript](https://vitejs.dev)
- [TailwindCSS](https://tailwindcss.com)
- [Radix UI](https://www.radix-ui.com)
- [WebContainer API](https://webcontainers.io)
- [Monaco Editor for React](https://www.npmjs.com/package/@monaco-editor/react)
- [Routing - wouter](https://github.com/molefrog/wouter)
- [Deployment - Vercel](https://vercel.com/)
## Development
1.Clone the repo:
```sh
git clone https://github.com/xavimondev/supaplay.git
```
2.Install dependencies:
```sh
# pnpm:
pnpm install
# npm:
npm install
# yarn:
yarn install
```
2.Start the development mode:
```sh
# pnpm:
pnpm dev
# npm:
npm run dev
# yarn:
yarn dev
```
3.Finally open [http://localhost:5173](http://localhost:5173)
## Contributing
You can contribute by adding new features, fixing bugs, improving logic code, etc. All the contributions you make are really appreciated.
1.[Fork](https://github.com/xavimondev/supaplay/fork) the repo.
2.Create a branch:
```sh
git switch -c newfeature
```
3.Commit and push your changes:
```sh
git commit -am 'Add a new feature'
git push origin newfeature
```
4.Open a Pull Request