Alona

SQL Learning Platform for Shopify Integration

🎯 Project Overview

A comprehensive, AI-powered SQL learning platform designed for seamless integration with Shopify stores. This interactive educational tool enables customers to learn SQL through hands-on practice with real database queries, progressive skill development, and personalized learning experiences.

🚀 Vision Statement

Transform SQL education by providing an accessible, interactive learning environment that combines real database practice with intelligent tutoring, seamlessly integrated into e-commerce platforms.

📋 MVP Development Workflow

This project is structured into six core MVP components, each addressing critical aspects of the learning platform:

MVP Component 1: SQL Runtime Integration ✅ COMPLETED

The foundational component providing secure, real-time SQL query execution through Supabase integration.

Key Features:

MVP Component 2: Content Preparation & Question Bank 🟡 IN PROGRESS

Structured learning content with progressive difficulty levels and comprehensive educational materials.

Key Features:

MVP Component 3: UI Development & Shopify Frontend 🔄 PARTIALLY IMPLEMENTED

User-friendly interface optimized for Shopify integration with responsive design and seamless UX.

Key Features:

MVP Component 4: User Progress & Feedback System 📋 PLANNED

Comprehensive progress tracking, performance analytics, and personalized feedback mechanisms.

Key Features:

MVP Component 5: AI-Driven Evaluation & Assistance 🔮 FUTURE PLANNING

AI-powered intelligent tutoring, query evaluation, and personalized learning assistance.

Key Features:

MVP Component 6: User Authentication & Payment Integration 💰 FUTURE PLANNING

Seamless integration with Shopify’s authentication and payment systems for monetization and user management.

Key Features:

🏗️ Technical Architecture

Backend Infrastructure

Frontend Technology

Integration Strategy

🎓 Learning Experience Design

Skill Progression Path

  1. Foundation: Basic SELECT, WHERE, ORDER BY
  2. Data Relationships: JOINs, foreign keys, table relationships
  3. Aggregation: GROUP BY, HAVING, COUNT, SUM, AVG
  4. Advanced Queries: Subqueries, window functions, CTEs
  5. Optimization: Indexes, query performance, best practices

Interactive Features

📁 Project Structure

sql_practice/
├── 📁 src/                          # Source code
│   ├── 📁 frontend/                 # Frontend application
│   │   ├── 📁 html/                 # HTML templates
│   │   │   ├── index.html           # Landing page with redirect
│   │   │   └── sql_editor.html      # Main SQL editor interface
│   │   ├── 📁 css/                  # Stylesheets
│   │   │   └── style.css            # Main application styles
│   │   └── 📁 js/                   # JavaScript modules
│   │       ├── config.js            # Application configuration
│   │       ├── database-manager.js  # Supabase integration
│   │       ├── question-manager.js  # Question bank management
│   │       ├── ui-manager.js        # User interface controller
│   │       └── app.js               # Main application coordinator
│   └── 📁 database/                 # Database schema and functions
│       ├── 📁 schema/               # Table definitions
│       │   └── create_tables_public.sql # Sample tables setup
│       └── 📁 functions/            # Stored procedures
│           ├── run_sql_query.sql    # Safe query execution function
│           └── fix_function_naming.sql # Function permissions setup
├── 📁 docs/                         # Documentation
│   └── 📁 mvp-components/           # MVP documentation
│       ├── MVP_01_SQL_Runtime_Integration.md
│       ├── MVP_02_Content_Preparation.md
│       ├── MVP_03_UI_Development.md
│       ├── MVP_04_User_Progress_Feedback.md
│       ├── MVP_05_AI_Driven_Evaluation.md
│       └── MVP_06_Authentication_Payment.md
├── 📁 config/                       # Configuration files
│   └── .env.example                 # Environment variables template
├── 📁 tests/                        # Test suite
│   └── README.md                    # Testing documentation
├── 📁 scripts/                      # Build and deployment scripts
│   └── README.md                    # Scripts documentation
├── 📁 assets/                       # Static assets (images, icons)
├── 📝 .gitignore                    # Git ignore patterns
├── 📦 package.json                  # Node.js dependencies and scripts
└── 📖 README.md                     # Project overview (this file)

🔧 Modular Architecture

The project is now organized into clear, maintainable modules:

Frontend Modules

Database Organization

Documentation Structure

🚦 Current Status & Next Steps

✅ Completed Milestones

🔄 In Progress

📋 Upcoming Priorities

🔮 Future Roadmap

🛠️ Development Setup

Prerequisites

Quick Start

  1. Clone Repository: git clone [repository-url]
  2. Database Setup: Execute SQL files in Supabase SQL Editor
    • Run create_tables_public.sql for sample data
    • Run run_sql_query.sql for query execution function
    • Run fix_function_naming.sql for permissions
  3. Configuration: Update Supabase URL and API key in sql_editor.html
  4. Local Testing: Start HTTP server and navigate to index.html
  5. Shopify Integration: Follow guidelines in MVP_03_UI_Development.md

Environment Configuration

// Update these values in sql_editor.html
const supabaseUrl = 'YOUR_SUPABASE_PROJECT_URL';
const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';

🎯 Success Metrics & KPIs

Learning Effectiveness

User Engagement

Technical Performance

Business Impact

🤝 Contributing & Support

Development Contribution

  1. Review MVP component documentation for implementation details
  2. Follow established coding standards and best practices
  3. Test thoroughly across browsers and devices
  4. Update documentation for new features and changes

Content Contribution

Community Support

📄 License & Legal

Open Source Licensing

This project is released under MIT License, allowing for commercial use, modification, and distribution with proper attribution.

Privacy & Data Protection

Educational Use

📞 Contact & Support: For technical support, feature requests, or partnership inquiries, please use the GitHub Issues system or contact the development team directly.

🌟 Star this repository if you find it useful for your SQL learning or Shopify integration projects!

  1. Visit supabase.com and sign up for an account
  2. Verify your email address

Step 2: Create a New Project

  1. Click “New project” in the Supabase dashboard
  2. Enter project details:
    • Name: “SQL Tutorial Sandbox”
    • Database Password: Create a strong password
    • Region: Choose one closest to your users
    • Pricing Plan: Free tier is sufficient for MVP
  3. Click “Create new project” and wait for setup (2-3 minutes)

Step 3: Create Sample Databases

  1. Go to the SQL Editor in your Supabase dashboard
  2. Create tables for your SQL tutorial:

– Create SCHEMA practice – Create basic tables for practice: dim_customers, fact_orders

  1. Run the script to set up your sample database

Step 4: Create a Secure API Key

  1. Go to “Settings” → “API” in your Supabase dashboard
  2. Under “Project API keys”, copy your anon public key
  3. Create a service role key with limited permissions (optional but recommended for security)

Part 2: Creating the SQL Playground Interface

Step 5: Create a Custom SQL Editor Page

– Create index.html to redirect to sql_editor.html – Create sql_editor.html

Step 6: Add Stored Procedure for Safe SQL Execution

Create a safe execution environment for user SQL queries:

  1. Go to SQL Editor in Supabase
  2. Create this stored procedure:

– Execute the query create_sql_executor.sql to create a function to safely execute SQL queries

Part 3: Embedding in Shopify

Step 7: Prepare Your Shopify Store

  1. Log in to your Shopify admin panel
  2. Go to “Online Store” → “Themes”
  3. Find your active theme and click “Customize”

Step 8: Create a New Page

  1. Go to “Pages” → “Add page”
  2. Name it “SQL Practice” or similar
  3. Switch to HTML editor mode

Step 9: Embed the SQL Editor

– Upload the HTML file to a web hosting service or GitHub Pages – Embed it in your Shopify page

Step 10: Add Custom Theme Code (Optional for Better Integration)

  1. Go to “Theme” → “Edit code”
  2. Add this snippet to your theme.liquid or appropriate section:

```liquid name=custom-sql-page-style.liquid

```

Step 11: Configure CORS for Supabase

  1. In Supabase Dashboard, go to “Settings” → “API”
  2. Add your Shopify domain to the allowed domains list:
    • Format: https://your-store.myshopify.com
  3. Save changes

Part 4: Final Setup and Testing

Step 12: Add Question Database

  1. Create a table in Supabase for storing questions
  2. Add more questions as needed

Step 13: Test the Integration

  1. View your SQL Practice page on your Shopify store
  2. Try running a simple query: SELECT * FROM customers;
  3. Test question selection and hints
  4. Ensure error messages are user-friendly

Step 14: Monitor and Adjust

  1. Set up rate limiting in Supabase to prevent abuse

  2. Monitor database performance

  3. Collect user feedback using a simple form

Troubleshooting Common Issues

Additional Tips