How To Build A Gamified NextJS App With Achievements

Achievements can be an exciting feature for any consumer-facing web or mobile application yet can be surprisingly complex to manage at scale. Writing logic to manage unlocks for different types of achievements across millions of users can quickly turn a clean implementation into spaghetti code. In this blog I’ll walk through best practices for adding achievements to a NextJS flashcard study platform using Trophy.

Trophy is a gamification platform with scalable APIs for building features like achievements and streaks taking care of all unlock logic under the hood. Here’s an example of the flashcard study system built using Trophy’s APIs. Check out the live demo here.

Adding Achievements to a NextJS Web App In Under 10 Minutes

In this video I walk through the code behind the application and explain how Trophy automatically manages all achievements behind the scenes. Plus, I'll show you how to use Trophy’s NodeJS SDK to fetch and display user achievements in the app.

Key Points

No-code Trophy Setup

In the video I walked through setting up a flashcards-viewed metric with 4 achievements of increasing difficulty in the Trophy dashboard.

The achievement names, badges and unlock values are all controlled from the dashboard, and so can be experimented with without requiring back-and-forth code changes. Similarly, adding new achievements can be done from the dashboard and will automatically be available for all users to work towards without needing any code changes.

Integrating Metric Tracking

In the video I set up a Trophy metric to track when users view a flashcard. This sets up a running event stream and forms the basis of the achievements system.

Tracking metrics based on any user interaction in Trophy is just a simple API call:

/**
 * Track a flashcard viewed event in Trophy
 * @returns The event response from Trophy
 */
export async function viewFlashcard(userId: string): Promise<EventResponse | null> {
    try {
        return await trophy.metrics.event(FLASHCARDS_VIEWED_METRIC_KEY, {
            user: {
                id: userId
            },
            value: 1
        });
    } catch (error) {
        console.error(error);
        return null;
    }
}

Fetching Achievements

Fetching a users unlocked achievements is a simple Trophy API call. This call returns each achievements name, as well as a URL to the achievements badge hosted on Trophy's CDN that is ready to be used in src tags.

/**
 * Get the achievements for a user
 * @returns The achievements for the user
 */
export async function getAchievements(userId: string): Promise<MultiStageAchievementResponse[] | null> {
    try {
        return await trophy.users.allachievements(userId);
    } catch (error) {
        console.error(error);
        return null;
    }
}

Try Trophy

Trophy provides scalable, purpose APIs for building achievement systems in any web or mobile application. Trophy also has support for building other gamification features like streaks and gamified lifecycle email campaigns with very little custom code.

Create an account and try Trophy for free up to 100 monthly active users.