Step 7: Setup Gamification with AI

Configure engagement and retention mechanics including daily streaks, achievement badges, and smart rating prompts.

Quick Start (Implementation)

Add retention triggers to your app in minutes.

1. Copy the Prompt

Navigate to ai_rules/generators/gamification_generator.md and copy the file.

2. Paste into Code AI

Open your AI assistant and paste the prompt. It will analyze your product to define the "Core Action" (what triggers a streak).

Defining the core loop and streak logic

3. Generate Config

The AI will generate:

• src/features/gamification/store/gamification-slice.ts (Redux state)
• src/features/gamification/components (Badges, Modals)
• src/locales/en.json (Achievement titles)

The generated streak badge component

4. Integration

Connect the streak logic to your feature:

import { useStreak } from '@/features/gamification/hooks/use-streak';

// In your completion handler
const { recordAction } = useStreak();
recordAction(); // Updates streak & checks achievements

Celebration modal triggering on milestone reach

5. Verification

🧠 Deep Dive: How it Works

Streak Architecture

Streaks are calculated locally using date-fns to check against the last action date.

• Grace Period: Logic can be adjusted to allow missed days if desired.
• Persistence: Uses redux-persist with MMKV storage, so streaks survive app kills.

Smart Rating Prompts

The system only asks for a review when the user is most likely to give 5 stars:

// Only ask if:
const isHappy = currentStreak >= 3 && totalActions >= 5;

Achievements

Achievements are defined in the Redux slice. You can add more by updating gamification-slice.ts and en.json.

Troubleshooting

• Streak not updating? Check that you're calling recordAction() in the right place.
• Not persisting? Ensure gamification is in the persistConfig whitelist in store/store.ts.

What's Next?