This repository hosts a simple coding playground with a FastAPI backend and a Next.js frontend. The frontend lives in playground-frontend/ and the backend lives in playground_backend/.
cd playground_backend
pip install -r requirements.txt
uvicorn playground_backend.main:app --host 0.0.0.0 --port 8000cd playground-frontend
npm install
npm run devThen open http://localhost:3000 in your browser. The frontend expects the
backend on http://localhost:8000 by default. You can override the address by
setting NEXT_PUBLIC_BACKEND_URL in playground-frontend/.env.local.
Project and feature definitions are stored in:
playground-frontend/projects/projects.js(for the UI)playground_backend/projects.json(for the backend)
Keep these files in sync when introducing new content.
Build-Your-Own-X Playground Development Plan (No Auth, Local-Only, Step-by-Step) PHASE 1: MVP — "Hello Playground"
- Design Requirements Only needs to serve a single user (Daniel).
No user authentication.
Runs locally (LAN-only) on a Windows PC, with access only from inside the home network.
Simple, minimal UI for first release.
PyCharm plugin communicates with the server over LAN.
- Core Components Backend API
Python, FastAPI (for speed, async, type hints).
Handles code submissions, test execution, and feedback (calls OpenAI API for feedback).
Stores projects, feature progress, and test results (local SQLite database for simplicity).
Frontend Web App
Next.js or React (whichever the dev prefers).
Minimal UI: project/task list, code submission form, feedback display, progress bar.
Connects to FastAPI backend over LAN.
PyCharm Plugin
Written in Kotlin using JetBrains Plugin SDK.
Allows user to select code/files and submit to backend via HTTP API.
Receives feedback/results inline or in a tool window.
Local OpenAI API Integration
Backend securely calls OpenAI API with code and task context for feedback, always following Daniel’s learning rules.
Test Runner
Backend runs project-specific tests in isolated subprocesses or containers to validate code before moving to next feature.
PHASE 2: Step-by-Step Implementation Step 1: Set Up Backend API (FastAPI) Scaffold a FastAPI project.
Implement endpoints for:
Listing available projects and features.
Submitting code for a feature.
Returning feedback and test results.
Tracking current progress per project.
Use SQLite for local data storage (project/feature definitions, progress).
Step 2: Basic Web Frontend (Next.js or React) Simple dashboard:
List all available projects.
For each project: list features, mark completed/incomplete.
Page for each feature:
Show requirements.
Let user paste or upload code.
Show feedback and results from backend.
No login or user management.
Step 3: Simple Test System For each project/feature, define expected input/output or test cases (stored as JSON or Python scripts).
Backend runs user code against test cases and returns results.
Safety: sandbox test execution (using subprocess, limited resources).
Step 4: OpenAI Integration (Hints & Feedback) When code is submitted, backend forms a prompt using Daniel’s rules and sends it to OpenAI’s API.
Returns hint/explanation/feedback without ever sending full solutions.
Step 5: PyCharm Plugin (Kotlin, JetBrains SDK) Basic UI:
Button to "Submit Code to Playground."
Dialog for selecting current project/feature.
Sends code to backend API.
Displays results/hints in PyCharm (tool window or popup).
Network config: plugin points to local server IP (e.g., 192.168.1.100:8000).
PHASE 3: Iterative Improvements Feature Polish (Repeatable Steps) Add more projects/features as JSON configs or Python scripts.
Add support for uploading whole files/folders.
Add code highlighting in feedback.
Add progress bar, milestones, and basic “achievements” (optional).
Make test system more robust: timeout, memory limit, crash capture.
Security & Stability Ensure backend only listens on local network, not exposed to internet.
Optionally: firewall rules to restrict traffic to your LAN devices.
Add simple logging for debugging and recovery.
PHASE 4: Optional Extras Multi-language support (add if you ever want to learn new languages).
VS Code plugin (future).
Mobile web UI (future).
Backups of progress (local file copy or cloud backup if you ever want it).
Key Implementation Guidelines Build and thoroughly test each component before adding complexity.
Always keep the system LAN-only for privacy and security.
Stick to Daniel’s learning rules in all prompt/feedback systems.
Document API endpoints and expected workflows for easy updates.
Use environment variables or a config file for OpenAI API key—never hard-code.
Sample Project Structure swift Copy Edit /playground-backend/ main.py (FastAPI app) models.py test_runner.py openai_helper.py db.sqlite3
/playground-frontend/ pages/ components/ public/ /pycharm-plugin/ src/ resources/ Deployment/Setup Checklist (For Daniel) Backend:
Clone repo, install requirements (pip install -r requirements.txt).
Set OpenAI API key in .env or config.
Run backend (uvicorn main:app --host 0.0.0.0 --port 8000).
Frontend:
Clone repo, install (npm install), run (npm run dev).
Point to backend’s LAN IP.
Plugin:
Build plugin (Kotlin, using JetBrains SDK), install in PyCharm.
Set backend address (LAN IP).
LAN:
Ensure Daniel’s main PC and PyCharm machine are on same local network.
Optional: Configure firewall to allow local connections only.
Summary Checklist for Devs Scaffold FastAPI backend with SQLite
Add endpoints for code submission, feedback, progress
Write minimal Next.js frontend: dashboard, code submit, feedback
Implement test runner in backend
Add OpenAI API feedback (rules-based)
Scaffold PyCharm plugin (Kotlin, JetBrains SDK)
Implement LAN-only deployment
Document setup/usage for Daniel
Ready-To-Save “Master Prompt” for the ai bot in the playground:
I want you to act as my interactive coding mentor for project-based Python learning. I am using a custom playground platform (with a PyCharm plugin and web interface) on my own private LAN (no authentication, no external hosting) that lets me pick real software projects (like URL shortener, RSS reader, static site generator, etc.) and unlocks each feature or stage as I finish them.
Your rules:
- Never give me full solutions or code unless I explicitly request it for reference.
- Always guide me step-by-step, one feature at a time.
- When I submit code, if it's incorrect, give me hints, explanations, or tiny, isolated examples (never the answer).
- If I ask for help, first try to help me debug with tips, not code.
- If my code passes, unlock the next feature and give feedback on what I did well and what to watch for next time.
- All explanations should focus on *why* something works, not just *how*.
- If I get stuck for too long, escalate hints, but never jump to full answers unless I ask.
- I want to learn by doing, not by copying.
- The platform runs on a private LAN, has no authentication, and all components run on Windows.
Always remember these rules and this setup for my sessions.