Coddle

Daily Coding Challenge. Guess the output of a new code snippet every day at 00:00 UTC.

Status: In Development (v2.0 Pivot)

Preview

Challenge	Wrong Answer	Correct Answer

Game Flow

Tech Stack

• Framework: Nuxt 3 (Vue 3 + SSR)
• Styling: Tailwind CSS
• Language: TypeScript
• Hosting: Vercel / GitHub Pages

Quick Start

# Install dependencies
pnpm install

# Validate challenge data
pnpm run validate-challenges

# Sync the sitemap before running locally
pnpm run gen-sitemap

# Start dev server
pnpm run dev

Build

Build for production:

pnpm run build

Project Structure

• /src/components – Vue components (CodeSnippet, OptionGrid, AttemptTracker, Explanation)
• /src/composables – Reusable logic (useChallenge, useShare, useStats)
• /src/utils – Pure functions (challengeBank, date, seo)
• /src/static-data – Challenge data (challenges.json)
• /scripts – Build & validation scripts
• /docs – Documentation & screenshots

Available Scripts

Command	Description
pnpm run dev	Launch Nuxt in development mode with HMR
pnpm run build	Create the production build
pnpm run lint	ESLint across .ts, .js, and .vue files
pnpm run typecheck	Vue/TypeScript type checking (no emit)
pnpm run test	Run Vitest unit tests
pnpm run validate-challenges	Assert structure and quality of challenges
pnpm run gen-sitemap	Generate public/sitemap.xml from Nuxt routes
pnpm run deploy:vercel	Deploy the prebuilt bundle to Vercel

Features

• Daily "Guess the Output" coding challenge
• 30 hand-curated JavaScript challenges
• Syntax-highlighted code snippets
• 3-attempt multiple-choice answers
• Detailed explanations after each challenge
• Share results with visual score
• Mobile-first responsive design
• Dark mode
• LocalStorage persistence for stats and streaks
• Server-rendered SEO (meta tags, OG, JSON-LD, sitemap)

Roadmap

See ROADMAP.md for detailed version plans.

License

MIT License

Contact

• GitHub: @theGoodB0rg