# Implementation Plan - Reward Shop ## Goal Implement a "Reward Shop" where users can spend their hard-earned XP on virtual or real-world rewards. This enhances the gamification loop. ## User Review Required > [!IMPORTANT] > **Schema Changes**: We will need to reset the database or run migrations to add the new `rewards` and `user_rewards` tables. Since we are in dev/prototype mode, I will likely push schema changes which might require a DB reset if we don't have a migration system set up (currently using `drizzle-kit push`). ## Proposed Changes ### Database Schema (`shared/schema.ts`) #### [NEW] `rewards` table - `id`: serial primary key - `title`: text (localizable key or raw text) - `description`: text - `cost`: integer (XP cost) - `icon`: text (lucide icon name) - `type`: text ('virtual', 'real_world', 'feature_unlock') - `is_system`: boolean (default true, for built-in rewards) #### [NEW] `user_rewards` table - `id`: serial primary key - `user_id`: integer (ref users) - `reward_id`: integer (ref rewards) - `purchased_at`: timestamp ### Backend (`server/routes.ts`) #### [NEW] `GET /api/rewards` - Returns list of all available rewards. - Checks `user_rewards` to mark which ones are already owned (unique/one-time rewards). #### [NEW] `POST /api/rewards/buy` - Params: `rewardId`, `userId` - Logic: 1. Check user XP balance. 2. If sufficient, deduct XP. 3. Insert into `user_rewards`. 4. Return success + new XP balance. ### Frontend #### [MODIFY] `client/src/pages/AchievementsPage.tsx` - Add a new Tab: "Belohnungen" (Rewards). - Render a grid of "Reward Cards". #### [NEW] `client/src/components/gamification/RewardCard.tsx` - Displays Icon, Title, Description, Cost. - "Buy" button (Green if affordable, Grey if not). - "Owned" badge if already purchased. ### Translations (`en.json`, `de.json`) - Add `rewards` namespace. - Keys: `shopTitle`, `buy`, `insufficientFunds`, `owned`. ## Verification Plan ### Automated Tests - None planned for now (prototyping). ### Manual Verification 1. **Browse**: Check if rewards load in the new tab. 2. **Buy (Success)**: Click buy on an affordable item -> XP decreases, item marked owned. 3. **Buy (Fail)**: Click buy on expensive item -> Error toast "Not enough XP".