SparkSite Studio

Safe Website Building for Kids Ages 8+ 🚀

SparkSite Studio is a VS Code extension that helps children learn web development safely with AI assistance. It features built-in safety filters, educational guidance, and both local and cloud AI options.

⚠️ Project Status

As of January 2026, Spark Site Studio is stepping back from active development.

The project achieved a functional prototype with solid architecture and features, but encountered a critical blocker: 90% of K-12 students use Chromebooks, and VS Code extensions don't run natively on ChromeOS. Supporting Chromebooks would require rebuilding the entire system as a web-based IDE—a significant undertaking that would compete with other priorities.

This is open source and MIT-licensed. The code is production-ready and well-architected—perfect for learning, forking, or building upon. See the blog post for detailed lessons learned.

🌟 Features

• 🛡️ Privacy-First: Local AI processing (100% private) with offline support
• 🎓 Educational: Teaches real HTML, CSS, and JavaScript in VS Code
• 🤖 AI Assistant: Sparky Jr. helps children with safe, guided instruction
• 📊 Progress Tracking: Activity logging for teacher monitoring
• 🚫 Content Filtering: Built-in safety filters for age-appropriate use
• 💻 Works Offline: Runs entirely locally—no internet required

📁 Repository Structure

spark-site-studio/
├── sparksitestudio-frontend/       # Next.js Frontend (Vercel)
│   ├── src/app/                    # Next.js App Router pages
│   ├── src/components/             # React components
│   ├── src/lib/                    # Utilities and configuration
│   └── public/                     # Static assets
├── api/                            # Express.js Backend (Railway)
│   ├── server.js                   # API server with authentication
│   ├── scripts/                    # Parent management utilities
│   └── package.json                # API dependencies
├── playground/site-builder-agent/  # VS Code Extension
│   ├── src/                        # TypeScript source code
│   ├── HomeBrainPack/              # Local Sparky Jr. server
│   └── dist/                       # Extension distribution files
├── dist/                           # Release packages and installers
└── README.md                       # This file

🚀 Quick Start

For Users

1. Download: Visit SparkSiteStudio.com
2. Install: Run the installer for your operating system
3. Open VS Code: The extension will be ready to use
4. Start Building: Create your first website with Sparky Jr.'s help

🏗️ Components

Next.js Frontend

• Location: sparksitestudio-frontend/
• Technology: Next.js 15 + TypeScript + Tailwind CSS
• Deployment: Vercel
• Features: Modern React UI, authentication, parent dashboard

Express.js API Backend

• Location: api/
• Technology: Node.js/Express + JWT + bcrypt
• Deployment: Railway
• Features: User authentication, parent management, secure API endpoints

VS Code Extension

• Location: playground/site-builder-agent/
• Language: TypeScript
• Features: AI routing, safety filters, progress tracking

Local Sparky Jr. Server

• Location: playground/site-builder-agent/HomeBrainPack/
• Language: Node.js
• Features: Local AI processing, offline functionality

📦 Distribution

• Frontend: Auto-deployed to Vercel on push to main
• Backend: Auto-deployed to Railway on push to main
• Extension: Packaged as .vsix file in dist/
• Installers: Windows .exe setup packages in dist/

📄 License

Copyright © 2025 Emily Anderson. All rights reserved. - see LICENSE.md

🔗 Links

• Website & Downloads: SparkSiteStudio.com

---

Built with ❤️ for young learners and educators