A browser-based SQL learning platform where students can practice SQL queries against pre-configured assignments with real-time execution and AI-powered intelligent hints 🤖.

• ✨ Features
• 🛠 Technology Stack
• 🏗 Architecture Overview
• 📦 Prerequisites
• 🚀 Installation
• 🔐 Environment Variables
• ▶️ Running the Application
• 📁 Project Structure
• 🔄 Data Flow
• 📘 API Documentation
• 🔐 Security Features
• 🧠 Technology Choices Explanation
• 🖼 Screenshots
• 🤝 Contributing
• 📄 License

• 📚 Assignment Library – Browse SQL assignments by difficulty (Easy / Medium / Hard)
• 💻 Interactive SQL Editor – Write and execute SQL queries directly in the browser
• 🗂️ Schema Viewer – View table structures and sample data
• ▶️ Real-time Query Execution – Execute queries against a PostgreSQL sandbox database
• 🤖 AI-Powered Hints – Intelligent guidance (hints only, no direct solutions)
• 📊 Results Visualization – Scrollable, formatted result tables
• ⚠️ Error Handling – Clear syntax and logical error messages

• 🛡 SQL injection prevention through query validation
• 🔒 Read-only database access for students
• ⏱ Query execution timeout (5 seconds)
• 🚦 API rate limiting
• ✅ Whitelist-based SQL keyword filtering

• 📱 Mobile-first responsive design (320px → 1280px+)
• 🌙 Dark theme optimized for reading code
• 👆 Touch-friendly UI elements (minimum 44px)
• ✨ Smooth animations and transitions
• 🧩 BEM methodology for SCSS organization

• 🧠 OpenAI GPT-4 (Recommended)
• 🌐 Google Gemini
• 🧪 Anthropic Claude

• 📜 Morgan – HTTP request logging
• 🛡 Helmet – Security headers
• 🌍 CORS
• 🚦 Express Rate Limit
• 🔄 Nodemon

graph TD A[CLIENT: React + SCSS] -- Axios API Calls --> B[EXPRESS SERVER] B --> C[PostgreSQL: Sandbox Execution] B --> D[MongoDB: User Data & Metadata] B --> E[LLM API: AI Hints/Feedback]

cipher-sql-studio/
│
├── client/ # Frontend React App
│ ├── public/ # Static assets
│ └── src/
│ ├── components/ # UI Components (Editor, Results, Sidebar)
│ ├── services/ # API service layer (Axios)
│ ├── hooks/ # Custom React hooks
│ ├── styles/ # SCSS / CSS modules
│ ├── App.jsx # Root component
│ └── index.js # React entry point
│
├── server/ # Backend Express App
│ ├── src/
│ │ ├── config/ # DB & App configuration
│ │ ├── models/ # MongoDB schemas (Metadata/Assignments)
│ │ ├── controllers/ # Route handlers
│ │ ├── services/ # Business logic & LLM integration
│ │ ├── routes/ # API endpoints
│ │ └── middleware/ # Security & Error handling
│ └── seeds/ # Database seeders
│
├── database/ # Database scripts
│ └── postgres/
│ ├── schema.sql # Sandbox table definitions
│ └── sample_data.sql# Initial sandbox data
│
└── docs/ # Documentation (API, Architecture)

Create a .env file in the server directory:

Code snippet

• PORT=5000
• NODE_ENV=development

• POSTGRES_HOST=localhost
• POSTGRES_USER=postgres
• POSTGRES_PASSWORD=your_password
• POSTGRES_DB=cipher_sql_sandbox -MONGODB_URI=mongodb://localhost:27017/cipher_sql_studio

• LLM_PROVIDER=openai
• OPENAI_API_KEY=sk-your-key-here

-MAX_QUERY_EXECUTION_TIME=5000 -MAX_RESULT_ROWS=1000

To get the environment up and running, open two separate terminal windows:

🔹 Terminal 1: Backend

cd server
npm run dev

• 🛡️ Security: The PostgreSQL sandbox is designed for read-only or simulated environments. Ensure user permissions are strictly restricted in production to prevent unauthorized data modification.
• 🤖 AI Hints: Execution and rate limits apply based on your chosen LLM provider's subscription plan.
• 🛠️ Troubleshooting: If you encounter any issues, please check the logs in the server terminal for detailed error messages.

✨ Happy Coding! You are all set to start building with CipherSQLStudio.