Building Soccer DNA: A Soccer Personality Quiz with React and Next.js

Boyuedu — Mon, 22 Jun 2026 07:50:36 +0000

I recently built Soccer DNA, a soccer personality quiz that turns match decisions into a personalized soccer profile.

Instead of asking abstract personality questions, the app puts users into realistic match situations and asks what they would actually do on the pitch. After answering 30 scenarios, users get a custom result with a soccer archetype, scout report, core profile, World Cup-style storyline, best teammate match, and next upgrade advice.

I built it as a side project to explore a simple question:

Can a personality quiz feel more like a game simulation and less like a generic form?

What Soccer DNA does

The user answers 30 soccer scenarios.

For example:

It is the 117th minute of a World Cup final. The score is still 1–1.
You receive the ball at the edge of the box with one defender in front of you and a teammate sprinting on the right.
What do you do?

The answer options are not random personality labels. They are match decisions:

draw the defender and pass
read the situation and pick the best option
take the defender on and shoot
fake the shot and make a surprise pass

Each answer affects several soccer-specific dimensions.

At the end, the user receives a personalized profile, such as:

The Dribbling Magician Hybrid

The result includes:

Soccer archetype
Scout report
Core profile
World Cup storyline
Best teammate match
Next upgrade advice

Why I used match scenarios instead of normal quiz questions

A lot of personality quizzes ask abstract questions like:

Do you prefer logic or emotion?

That works for general personality tests, but it does not feel very natural for soccer.

For soccer fans and players, personality often shows up through decisions:

Do you play safe under pressure?
Do you scan before receiving?
Do you take on the defender?
Do you slow the game down?
Do you create chaos?
Do you pass when a teammate is in a better position?
Do you step up in big moments?

So I designed the quiz around realistic match decisions.

The goal was to make users think:

This actually feels like a situation I would face in a game.

The 7 scoring dimensions

I did not use traditional MBTI dimensions. Instead, I created 7 soccer-specific dimensions:

1. Soccer IQ

How well the user reads the game, anticipates space, and makes intelligent decisions.

2. Leadership

How much the user tends to take responsibility, organize play, and influence the team.

3. Creativity

How often the user looks for unexpected solutions instead of obvious ones.

4. Teamwork

How naturally the user connects with teammates and supports collective play.

5. Flair

How expressive, stylish, and technically adventurous the user is.

6. Emotional Control

How calm the user stays under pressure.

7. Courage

How willing the user is to take bold actions in big moments.

These dimensions are not meant to decide whether a player is “good” or “bad”. They are meant to describe how someone tends to play.

Rule-based scoring logic

The current version uses a rule-based scoring system.

Each answer updates multiple dimensions. For example, a bold dribbling decision might increase flair and courage, while a patient passing decision might increase soccerIQ and teamwork.

A simplified version looks like this:

const initialProfile = {
  soccerIQ: 0,
  leadership: 0,
  creativity: 0,
  teamwork: 0,
  flair: 0,
  emotionalControl: 0,
  courage: 0,
};

function applyAnswerWeights(profile, answerWeights) {
  const updatedProfile = { ...profile };

  for (const key in answerWeights) {
    updatedProfile[key] += answerWeights[key];
  }

  return updatedProfile;
}

Each quiz option has its own weight object:

const answerOption = {
  id: "turn-under-pressure",
  label: "Scan over your shoulder and turn forward.",
  weights: {
    soccerIQ: 2,
    creativity: 1,
    courage: 1,
    flair: 1,
  },
};

After the user completes all 30 questions, the final profile is normalized and mapped to an archetype.

function getTopDimensions(profile) {
  return Object.entries(profile)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 3)
    .map(([dimension]) => dimension);
}

The final archetype depends on the strongest dimensions and the balance between them.

For example:

function determineArchetype(profile) {
  const topDimensions = getTopDimensions(profile);

  if (
    topDimensions.includes("flair") &&
    topDimensions.includes("creativity") &&
    topDimensions.includes("courage")
  ) {
    return "The Dribbling Magician Hybrid";
  }

  if (
    topDimensions.includes("soccerIQ") &&
    topDimensions.includes("teamwork") &&
    topDimensions.includes("emotionalControl")
  ) {
    return "The Midfield Controller";
  }

  return "The Balanced Playmaker";
}

This is not machine learning yet. It is intentionally rule-based because I wanted the scoring to be easy to inspect, tune, and improve.

Result generation

The result page is the most important part of the product.

A quiz becomes much more interesting when the final result feels specific and shareable.

Instead of only showing a label, Soccer DNA generates several result modules.

Soccer archetype

This is the main identity of the user.

Example:

The Dribbling Magician Hybrid
You turn improvisation into your signature.

This gives the user a clear and memorable identity.

Scout report

The scout report is a simplified coaching-style analysis.

It includes:

Core identity
Strengths
Risks
Best role
Tactical fit
Growth advice

Example:

Core Identity:
Expressive, inventive, improvisational

Strengths:
- Elite dribbling flair
- Unpredictable creativity

Risks:
- Low tactical discipline

Best Role:
Dribbling winger / free creator

Tactical Fit:
Free attacking environments

Growth Advice:
Refine the final touch after beating the first defender

The goal is to make the result feel more like a personalized analysis than a generic quiz output.

Core profile

The core profile visualizes the 7 dimensions with stat bars and a radar chart.

This was inspired by how soccer fans already think about players:

attributes
strengths
weaknesses
roles
player profiles

The profile makes the result easier to understand and easier to compare with friends.

World Cup storyline

This is the more emotional part of the result.

Instead of only saying what kind of player the user is, the app gives them a fictional World Cup-style moment.

Example:

Facing the last defender, you skip the obvious option and create space with footwork that feels entirely yours — the kind of improvisation the crowd remembers.

This makes the result feel more cinematic and shareable.

Best teammate match

This module explains what type of teammate would complement the user’s style.

For example, a creative dribbler might work best with:

a linking core
an offensive brain
a teammate who reads movement early

Next upgrade

This gives the user one area to improve.

Example:

After beating the first defender, choose the better next action. Your technique already draws attention — make every dribble lead closer to a goal.

I wanted the result to feel fun, but also somewhat useful.

UI design direction

The visual design is inspired by:

soccer analytics dashboards
player cards
scouting reports
World Cup storytelling
dark sports-tech interfaces

The main visual elements are:

dark glass-style cards
pitch backgrounds
cyan and purple accents
rounded UI panels
stat bars and radar charts

The challenge was balancing two things:

Make it feel fun and shareable.
Make it still look like a real product.

The result page was especially important because that is the part users are most likely to screenshot and share.

Tech stack

The current version is built with:

React
Next.js
Tailwind CSS
Rule-based scoring logic
Responsive UI for desktop and mobile

The project is intentionally lightweight. I wanted the first version to focus on product experience, quiz structure, and result design before adding more complex backend features.

What I learned

Building Soccer DNA taught me that a quiz product is not only about questions.

The full loop matters:

The user understands the idea quickly.
The questions feel immersive enough to finish.
The scoring logic feels believable.
The result feels personalized.
The result page feels worth sharing.

The most important product question was:

How do I make someone feel like the result was created for them?

That is why I focused on personalized archetypes, scout reports, World Cup storylines, teammate matches, and upgrade advice.

What I would improve next

There are several things I want to improve:

Add more archetypes
Improve the scoring logic
Add better share cards
Make the result page easier to export as an image
Improve mobile UX
Add more World Cup-themed scenarios
Tune the English terminology for global soccer fans
Make the README more complete
Collect user feedback and adjust the archetype mapping

In the future, I might also explore a more data-driven or ML-assisted scoring system, but for now the rule-based approach is easier to understand and iterate on.

Try it

Live demo:

Try Soccer DNA

GitHub:

View the source code on GitHub

I would love feedback on the scoring logic, result personalization, UI/UX, and whether the result page feels shareable enough.

DEV Community: Boyuedu

Building Soccer DNA: A Soccer Personality Quiz with React and Next.js

What Soccer DNA does

Why I used match scenarios instead of normal quiz questions

The 7 scoring dimensions

1. Soccer IQ

2. Leadership

3. Creativity

4. Teamwork

5. Flair

6. Emotional Control

7. Courage

Rule-based scoring logic

Result generation

Soccer archetype

Scout report

Core profile

World Cup storyline

Best teammate match

Next upgrade

UI design direction

Tech stack

What I learned

What I would improve next

Try it