Micro-Quest Board
A playful daily “quest” generator that turns small real-life tasks into RPG-style missions with titles, XP rewards, difficulty, and optional time limits. Users can create quest templates (e.g., “10-min tidy”, “drink water”, “stretch”), roll a randomized quest board each day, mark quests complete to earn XP, and level up a simple avatar badge—all stored in localStorage. The UI includes a quest board grid, a quest builder modal, an XP/level progress header, and a lightweight stats view (streaks, completions by category) with clear component boundaries for parallel development.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init
by system
Configure Tailwind content and add @tailwind directives plus CSS variables in src/index.css.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Implement src/lib/storage.ts with typed localStorage get/set and versioned key helpers.
by system
Add src/lib/types.ts defining QuestTemplate, QuestInstance, BoardDay, Stats, and AppState types.
by system
Add src/lib/defaults.ts exporting a small set of starter quest templates.
by system
Implement src/lib/generator.ts to roll a daily quest board from templates with difficulty/XP/time rules.
by system
Add src/lib/progression.ts to compute XP totals, level, and progress-to-next-level.
by system
Add src/lib/stats.ts to compute streaks and completion counts by category from history.
by system
Implement src/state/useAppStore.ts using React context + reducer with load/save to localStorage.
by system
Define reducer actions for template CRUD, roll board, complete quest, and reset day in useAppStore.ts.
by system
Wrap <App/> with the provider and render a basic layout shell in src/App.tsx.
by system
Install and configure react-router in src/main.tsx with routes for Board and Stats pages.
by system
Add src/components/layout/AppLayout.tsx with header area and page container.
by system
Create src/components/header/XPHeader.tsx showing level badge, total XP, and progress bar.
by system
Add src/components/header/AvatarBadge.tsx rendering a simple level-based badge.
by system
Create src/components/header/RollBoardButton.tsx that triggers the roll-board action.
by system
Add src/pages/BoardPage.tsx to assemble the header and quest board grid.
by system
Create src/components/board/QuestBoardGrid.tsx to render today’s quests in a responsive grid.
by system
Add src/components/board/QuestCard.tsx to display quest title, category, difficulty, XP, and timer chip.
by system
Add src/components/board/CompleteQuestButton.tsx to toggle completion and dispatch XP changes.
by system
Create src/components/board/QuestDetailsDialog.tsx using shadcn Dialog for expanded quest info.
by system
Add src/components/templates/TemplateList.tsx to list templates with edit/delete actions.
by system
Create src/components/templates/QuestBuilderDialog.tsx with a form to create/edit templates.
by system
Add src/components/templates/TemplateForm.tsx with controlled inputs for title, category, difficulty, XP, and time limit.
by system
Create src/components/templates/CategorySelect.tsx using shadcn Select and predefined categories.
by system
Add src/components/templates/DifficultyToggle.tsx for selecting difficulty with clear visual states.
by system
Add src/pages/StatsPage.tsx to show streaks and completion breakdown cards.
by system
Create src/components/stats/StreaksCard.tsx to display current streak and best streak.
by system
Add src/components/stats/CategoryBreakdown.tsx rendering a simple Tailwind bar list by category (no chart libs).
by system