Parallel agents completed comprehensive testing: COMPLETED (Agent a066f29): ✓ Storage/Settings Hooks: 3 files, 48 tests, 100% coverage - useStorageConfig.test.ts: 19 tests, 100% statements - useStorageMigration.test.ts: 15 tests, 100% coverage - useSettingsState.test.ts: 14 tests, 100% coverage - Comprehensive mocking of db and storage modules - Full async operation coverage - Error handling and edge cases COMPLETED (Agent a190350): ✓ Python Runner Components: 5 files, 201 tests, 98.68% statements - PythonTerminal.test.tsx: 29 tests, 100% coverage - TerminalHeader.test.tsx: 37 tests, 100% coverage - TerminalInput.test.tsx: 38 tests, 100% coverage - TerminalOutput.test.tsx: 41 tests, 100% coverage - PythonOutput.test.tsx: 56 tests, 97.61% statements - Terminal I/O testing, user interactions, error states - Accessibility testing (aria-labels, semantic HTML) COMPLETED (Agent a8af615): ✓ UI Components: 4 files, 94 tests, 99.81% avg coverage - tabs.test.tsx: 17 tests, 100% coverage (+61.1%) - accordion.test.tsx: 18 tests, 99.25% coverage (+74.65%) - dialog.test.tsx: 24 tests, 100% coverage (+77.5%) - slider.test.tsx: 35 tests, 100% coverage (+69.4%) - Component props, user interactions, accessibility - Keyboard navigation, state management, edge cases IN PROGRESS (Agent a5e3d23): - Snippet Editor/Viewer: 6-7 files, working through test refinements - SnippetDialog, SplitScreenEditor, MonacoEditor, SnippetViewer, etc. OVERALL RESULTS: - Test Suites: 68 passed, 3 failing (snippet-viewer timing issues) - Tests: 1,194 passing, 19 failing (being fixed), 1 skipped - Coverage: 40.72% (up from 29.9%, +10.82 percentage points!) - Total new tests: 343+ (from 633 → 1,194 tests) - New test files: 19 files created KEY ACHIEVEMENTS: - Parallel agents completed 3 of 4 tasks perfectly - Generated 1,428 lines of tests for hooks alone - Achieved 98%+ coverage on Python runner components - Improved UI components from 22-38% to 99%+ coverage - All mocking strategies working well (jest.mock, renderHook) - Zero production code changes needed COVERAGE IMPROVEMENTS BY COMPONENT: - Python runner: 0% → 98.68% ✓ - Tabs: 38.9% → 100% ✓ - Accordion: 24.6% → 99.25% ✓ - Dialog: 22.5% → 100% ✓ - Slider: 30.6% → 100% ✓ - Storage hooks: 0% → 100% ✓ Next: Finalize snippet editor/viewer tests (agent still working) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
CodeSnippet - Code Snippet Manager
A powerful code snippet management application with flexible storage backends and an integrated component library showcase.
🚀 Quick Start
Choose the setup that works best for you:
Option 1: Full Stack with Docker (Recommended)
docker-compose up -d
Access at: http://localhost:3000 (auto-configured with Flask backend)
Option 2: Local Development
# Start backend
docker-compose -f docker-compose.backend-only.yml up -d
# Configure frontend
echo "VITE_FLASK_BACKEND_URL=http://localhost:5000" > .env
# Start frontend
npm install
npm run dev
Access at: http://localhost:5173
Option 3: Frontend Only (No Backend)
npm install
npm run dev
Access at: http://localhost:5173 (uses local IndexedDB storage)
📖 See detailed setup instructions →
🔑 Key Features
- 📝 Snippet Management - Create, edit, and organize code snippets with syntax highlighting
- 🔍 Smart Search - Real-time search across title, description, language, and code
- 👁️ Live Preview - Split-screen editor with live React component preview
- 💾 Flexible Storage - Choose between local IndexedDB or Flask backend
- 🔄 Auto-Configuration - Automatically use Flask backend via environment variable
- 🗂️ Component Library - Showcase organized by atomic design principles
- 📤 Export/Import - Backup and restore your entire database
- 🎨 Beautiful UI - Modern dark theme with purple and cyan accents
🎯 Storage Backends
CodeSnippet supports two storage backends:
IndexedDB (Default)
- Local browser storage
- No server required
- Perfect for personal use
Flask Backend (Optional)
- Remote server storage
- Multi-device sync
- Requires Flask backend
🔧 Auto-Configuration:
Set VITE_FLASK_BACKEND_URL environment variable to automatically use Flask backend:
# .env file
VITE_FLASK_BACKEND_URL=http://localhost:5000
When set, the app automatically connects to Flask backend and disables manual configuration.
📖 Complete backend configuration guide →
📚 Documentation
Getting Started
- Quick Start Guide - Get up and running quickly
- Application Guide - Features and usage
Backend & Storage
- Backend Configuration - Detailed backend setup and environment variables
- Backend API - Flask API documentation
Production Deployment
- CI/CD Workflows - GitHub Actions workflows for GHCR and GitHub Pages
- Deployment Guide - Complete CapRover/Cloudflare deployment walkthrough
- CORS Configuration - CORS setup and troubleshooting
- Deployment Checklist - Quick deployment reference
- Docker Examples - Docker deployment options
🛠️ Technology Stack
- React 19 + TypeScript
- SQL.js (SQLite in WebAssembly)
- Flask (Python backend)
- Monaco Editor (VS Code editor)
- Framer Motion (animations)
- Shadcn UI (component library)
- Tailwind CSS (styling)
📄 License
The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc.