Repository files navigation

An interactive web application for practicing SQL interview questions with real-time query execution in the browser. Built with React, TypeScript, and PGlite (PostgreSQL in WebAssembly).

• Real SQL Execution: Full PostgreSQL database running in your browser using PGlite
• Interactive Challenges: Multiple difficulty levels (Easy, Medium, Hard) with real-world scenarios
• Live SQL Editor: Monaco Editor with syntax highlighting and auto-completion
• Visual Database Schema: Interactive ER diagrams and table structure views
• Instant Feedback: See query results immediately with execution time metrics
• Collaborative Interface: Mock collaboration features with user presence indicators
• Responsive Layout: Resizable panels for optimal workspace arrangement

• Node.js 18+ and npm

# Clone the repositorygit clone https://github.com/yourusername/sqlinterview.gitcd sqlinterview# Install dependenciesnpm install# Start development servernpm run dev

The application will open athttp://localhost:3000

npm run build

Production files will be generated in the/build directory.

• npm run dev - Start development server on port 3000
• npm run build - Build for production
• npm run lint - Run Biome linter
• npm run lint:fix - Auto-fix linting issues
• npm run format - Format code with Biome

sqlinterview/├── src/│   ├── components/│   │   ├── ui/           # Reusable UI components (Radix UI based)│   │   ├── CodeEditor.tsx│   │   ├── DatabaseSchema.tsx│   │   ├── ERDiagram.tsx│   │   ├── QueryResults.tsx│   │   ├── TaskDescription.tsx│   │   └── TaskAndSchemaView.tsx│   ├── lib/│   │   ├── database-init.ts    # PGlite initialization│   │   ├── databaseSchema.ts   # Schema definitions│   │   ├── taskParser.ts       # Markdown/YAML parser│   │   └── taskContent.ts      # Challenge content│   ├── styles/│   │   └── globals.css         # Global styles│   ├── App.tsx                 # Main application│   ├── main.tsx               # Entry point│   └── index.css              # Root styles├── public/                    # Static assets├── package.json├── vite.config.ts            # Vite configuration├── biome.json                # Code formatter config└── README.md

The application uses an e-commerce database schema with the following tables:

• categories - Product categories
• products - Product catalog with pricing and stock
• customers - Customer information
• orders - Order records
• order_items - Individual items within orders

All tables are pre-populated with sample data for testing queries.

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool with SWC for fast compilation
• Tailwind CSS - Utility-first styling
• Radix UI - Accessible component primitives

• PGlite - PostgreSQL running in WebAssembly
• Full SQL support including JOINs, aggregations, and subqueries

• Monaco Editor - VS Code editor in browser
• XYFlow - Interactive ER diagram rendering
• Recharts - Data visualization

• Biome - Fast formatter and linter
• Tab indentation with double quotes

1. Select a Challenge: Use the dropdown to choose from available SQL challenges
2. Review the Task: Read the requirements in the Task Description tab
3. Explore the Schema: Switch to the Database Schema tab to understand table structures
4. Write Your Query: Use the SQL editor to write your solution
5. Execute: Click "Run Query" or press Ctrl+Enter to execute
6. Review Results: Check the output in the results panel below

The project uses Biome for formatting with:

• Tab indentation
• Double quotes for strings
• No semicolons in TypeScript/JavaScript

Run formatting before committing:

npm run format

Challenges are defined in/src/lib/taskContent.ts with YAML frontmatter:

exportconsttaskContent=`---id: 4title: Your Challenge Titledifficulty: Mediumcategory: AnalyticstimeEstimate: 15 minutestables:  - table1  - table2skills:  - JOINs  - Aggregation---## Challenge DescriptionWrite your challenge content here in Markdown...`;

• Chrome 90+
• Firefox 88+
• Safari 15+
• Edge 90+

WebAssembly support is required for PGlite to function.

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
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

This project is licensed under the MIT License - see the LICENSE file for details.

• Built fromFigma design
• Powered byPGlite for in-browser PostgreSQL
• UI components fromRadix UI

For issues, questions, or suggestions, please open an issue on GitHub.