Data Play is your sandbox for mastering SQL queries in an interactive environment.
Data Play allows users to craft, test, and master your SQL skills with Data Play. By harnessing the capabilities of modern technologies and focusing on user experience, this platform is suited for both SQL novices and experts.
Live Demo: http://16.171.35.92:3000
Here's a list of the primary tools, libraries, and frameworks that power Data Play:
- Next.js: Our Frontend framework, offering blazing-fast load times with server-side rendering.
- ace-builds & react-ace: The backbone of our SQL editor, providing syntax highlighting, error checking, and auto-completion.
- Express.js: Our server-side champion, facilitating API requests, and more.
- PostgreSQL: Our database choice for live SQL executions.
- Styled-components: For crafting a sleek UI with a component-first approach.
- @tanstack/react-table: Powers the tables displaying query results.
- axios-hooks & axios: Our go-to for promise-based HTTP requests.
- react-virtual: Ensures smooth table virtualization for extensive datasets.
- express-rate-limit: Protects our backend from malicious request flooding.
- csv-parser: Utilized for parsing CSV data when needed.
- pnpm: Efficient and fast package management using a shared store.
- pm2: Production process manager for Node.js applications.
Average Page Load Time: 1.1 s - This benchmark was established using Google Chrome's DevTools.
This project uses pnpm workspaces to manage multiple packages in the repository:
client: Contains the frontend Next.js application.server: Houses the Express.js backend server.
- Clone this repository:
git clone https://github.com/prashantpaddune/Data-play && cd Data-play- Install the dependencies:
pnpm install- Env Setup with your credentials:
cp .env.sample .env- Start backend server:
cd packages/server && pm2 start npm --name 'data-play-server' -- start- Start frontend server:
cd packages/client && pm2 start npm --name 'data-play-client' -- startMIT