{"slug": "how-i-built-a-free-python-practice-platform-with-zero-server-costs-using-groq", "title": "How I Built a Free Python Practice Platform With Zero Server Costs Using Groq and Supabase", "summary": "A developer built PyCodeIt, a free Python coding challenge platform that generates unique problems using a Bring Your Own Key (BYOK) architecture with Groq and Supabase. The platform keeps server costs at zero by routing AI API calls from the user's browser directly to OpenRouter using the user's own API key. Users can start practicing immediately without signing up, and optional authentication and score tracking are powered by Supabase's free tier.", "body_md": "I wanted to build a Python coding challenge platform that generates a completely unique problem every single time. No question bank. No repetition. Genuinely infinite practice.\n\nThe challenge was cost. AI API calls cost money. If thousands of students use a tool daily, the API bill scales with them. Most free tools either cap usage or die when they hit their billing limit.\n\nHere is how I built PyCodeIt with a Bring Your Own Key (BYOK) architecture that keeps server costs at zero while giving users a completely frictionless experience.\n\n```\n┌─────────────────────────────────┐\n│         User's Browser          │\n│                                 │\n│  Next.js App (Vercel)          │\n│  ├── Challenge UI               │\n│  ├── Auth (Supabase JS)         │\n│  └── API Key (localStorage)     │\n└──────────┬───────────────┬──────┘\n           │               │\n           ▼               ▼\n      Supabase       OpenRouter API\n     (Auth, DB,     (Direct from browser\n  Edge Functions)    using user's key)\n```\n\nThe key insight: if the AI call goes from the user's browser to OpenRouter using the user's own API key, there is no server cost to me. By relying on OpenRouter, users gain access to a pool of 8 different models, and the system can handle instant fallback logic automatically if a specific provider encounters any latency or rate limits.\n\nThe BYOK model usually creates friction because it forces visitors through a lengthy checklist before they can even see the product.\n\nTo combat this, PyCodeIt allows users to start practicing immediately with or without signing up. A user can simply land on the site, paste their OpenRouter API key directly into the application, and generate a problem instantly.\n\nFor users who want to track their progress, authentication and score tracking are available via Supabase, which is free up to 50,000 monthly active users:\n\nThe schema for the scoring system looks like this:\n\n```\nCREATE TABLE user_stats (\n  user_id UUID REFERENCES auth.users(id) PRIMARY KEY,\n  xp INTEGER DEFAULT 0,\n  streak INTEGER DEFAULT 0,\n  best_streak INTEGER DEFAULT 0,\n  total_solved INTEGER DEFAULT 0,\n  easy_solved INTEGER DEFAULT 0,\n  medium_solved INTEGER DEFAULT 0,\n  hard_solved INTEGER DEFAULT 0,\n  last_active DATE DEFAULT CURRENT_DATE\n);\n\nALTER TABLE user_stats ENABLE ROW LEVEL SECURITY;\n\nCREATE POLICY \"Users manage own stats\"\nON user_stats\nUSING (auth.uid() = user_id);\n```\n\nThe prompt structure that consistently returns clean, structured JSON across the configured fallback models:\n\n``` js\nconst prompt = `Generate a unique Python ${difficulty} dry-run problem about ${concept}.\nThe user must predict the exact terminal output.\nMake it genuinely tricky but fair for ${difficulty} level.\n\nReturn ONLY valid JSON with exactly these keys:\n{\n  \"title\": \"string\",\n  \"concept\": \"string\",\n  \"code_snippet\": \"string (valid Python with print statements)\",\n  \"correct_output\": \"string (exact terminal output)\",\n  \"hint_1\": \"string\",\n  \"hint_2\": \"string\",\n  \"explanation\": \"string (step by step trace)\"\n}\nDo not include any text outside the JSON object.`;\n```\n\nEnforcing `response_format: { type: \"json_object\" }`\n\nin the API call eliminates parsing errors and ensures structural consistency.\n\nThe main trade-off with a pure browser-based BYOK setup is that API keys are visible in network requests. A technically sophisticated user can open browser developer tools, inspect the network tab, and see their API key being sent out.\n\nThis is a risk to the user, not to the platform. The key is theirs. However, I handle this by being completely transparent in the UI:\n\n`localStorage`\n\n) and how it is used (sent directly to the AI router from the browser, never to my servers).`localStorage`\n\ninstantly.**What I would do differently if building again:** I would pass all requests through a Supabase Edge Function proxy. The user's key would still be used for the actual AI request, but it would flow through the serverless function rather than directly from the client network tab. This completely hides the key from frontend inspection while still utilizing the user's personal quota.\n\nBy keeping the platform decoupled from an expensive central API budget and removing mandatory account creation, the product remains highly accessible and cost-free to run. The only thing that would push me to paid tiers is outgrowing Supabase's 50k monthly active users limit, which is a good problem to have.\n\nThe platform is live at [pycodeit.com](https://www.pycodeit.com) if you want to see this architecture running in production. Try it out at [pycodeit.com](https://www.pycodeit.com) and feel free to drop a comment if you want to discuss any aspect of the implementation.\n\n*Written by the developer behind PyCodeIt, a free AI-powered Python dry-run practice platform for technical interview preparation.*", "url": "https://wpnews.pro/news/how-i-built-a-free-python-practice-platform-with-zero-server-costs-using-groq", "canonical_source": "https://dev.to/ameer_abdullah_68d48c8496/how-i-built-a-free-python-practice-platform-with-zero-server-costs-using-groq-and-supabase-42gi", "published_at": "2026-06-19 07:12:00+00:00", "updated_at": "2026-06-19 07:30:34.550038+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "large-language-models", "ai-infrastructure"], "entities": ["PyCodeIt", "Groq", "Supabase", "OpenRouter", "Vercel"], "alternates": {"html": "https://wpnews.pro/news/how-i-built-a-free-python-practice-platform-with-zero-server-costs-using-groq", "markdown": "https://wpnews.pro/news/how-i-built-a-free-python-practice-platform-with-zero-server-costs-using-groq.md", "text": "https://wpnews.pro/news/how-i-built-a-free-python-practice-platform-with-zero-server-costs-using-groq.txt", "jsonld": "https://wpnews.pro/news/how-i-built-a-free-python-practice-platform-with-zero-server-costs-using-groq.jsonld"}}