惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
The Exploit Database - CXSecurity.com
F
Fortinet All Blogs
U
Unit 42
F
Full Disclosure
雷峰网
雷峰网
博客园 - 司徒正美
云风的 BLOG
云风的 BLOG
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Tailwind CSS Blog
The Cloudflare Blog
Last Week in AI
Last Week in AI
罗磊的独立博客
D
DataBreaches.Net
C
Check Point Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
O
OpenAI News
C
CXSECURITY Database RSS Feed - CXSecurity.com
aimingoo的专栏
aimingoo的专栏
S
Security @ Cisco Blogs
大猫的无限游戏
大猫的无限游戏
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
S
SegmentFault 最新的问题
NISL@THU
NISL@THU
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Hacker News
The Hacker News
Webroot Blog
Webroot Blog
Security Latest
Security Latest
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Google DeepMind News
Google DeepMind News
酷 壳 – CoolShell
酷 壳 – CoolShell
N
News | PayPal Newsroom
P
Proofpoint News Feed
B
Blog RSS Feed
MongoDB | Blog
MongoDB | Blog
C
Cybersecurity and Infrastructure Security Agency CISA
N
News and Events Feed by Topic
Google Online Security Blog
Google Online Security Blog
H
Help Net Security
Spread Privacy
Spread Privacy
T
Threat Research - Cisco Blogs
GbyAI
GbyAI
I
Intezer
Application and Cybersecurity Blog
Application and Cybersecurity Blog
M
MIT News - Artificial intelligence
Vercel News
Vercel News
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
IT之家
IT之家
MyScale Blog
MyScale Blog
腾讯CDC

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python) The Hidden Cost of AI Systems Nobody Talks About. undefined vs undeclared, and how typeof behaves Switching from file-based jobs to NATS/Kafka in Rust without changing code io_uring Adventures: Rust Servers That Love Syscalls Why Agentic AI is Killing the Traditional Database The POUR principles of web accessibility for developers and designers Quantum Neural Network 3D — A Deep Dive into Interactive WebGL Visualization How To Install Caveman In Codex On macOS And Windows Automation Pipeline Reliability: Why Your Workflow Breaks When Nobody Is Watching I Built an 'Open World' AI Coding Agent — It Works From ANY Folder From Freelancing to Product: A Tech Service Company's SaaS Transformation China's AI Giants: Adding Tencent Hunyuan & ByteDance Doubao to AI University (74 Providers) On the Vibe Coders and Their Lies clerk: Auto-Summarize Your Claude Code Sessions AI Weekly — 2026/04/10–04/17 | The Model Lockdown Is Here, but the Toolchain Is the Real Battleground AI 週報 — 2026/04/10–2026/04/17 模型封鎖潮來了,但工具鏈才是真戰場 Maybe this is how Open-Source apps are born... 🚀 Fine-Tune LLMs with LoRA and QLoRA: 2026 Guide tRPC v11 + Next.js App Router: End-to-End Type Safety Without the Boilerplate ShadCN UI in 2026: Why I Stopped Installing Component Libraries and Started Owning My Components SaaS Billing in React Server Components: Stripe + Supabase Without a Single `useEffect` Join our DEV Weekend Challenge — $1,000 in Prizes Across TEN winners! Submissions Due April 20 at 6:59 AM UTC. Implementing FSRS Spaced Repetition in Flutter + Supabase — Adding Memory Science to an AI Learning App "I Texted My Localhost From the Train — Claude Code Fixed the Bug Before I Got Home" I Built a Sales Prep AI and It Went Deeper Than Expected Design to Code #2: One JSON, Eleven Outputs Solving the 100M-Row Problem: A Summary Table Pattern for High-Volume Push Notification Logs Flutter Web With Wasm: What Actually Changes For Developers I Built 50 Royalty-Free Soundtracks for My Side Project in a Weekend Using AI Music Generation The Vibe Coding Security Checklist: 7 Things to Check Before You Ship Stop Letting Googlebot Guess Fix Your React App's SEO Right Desconstruindo o Streaming do LinkedIn: Como Criar um Engine de Extração de Vídeo de Alta Performance com HLS e FFmpeg (EDA Part-1) EDA (Exploratory Data Analysis) Explained With Real Life — Why Looking at Your Data Is the Most Important Step in Machine Learning Brand Relationship Management at Scale: Our 4-Touch Outreach System for 200+ Brands Why String.fromEnvironment() Might Return an Empty String in Dart JGuardrails 1.0.0 — Hardening Java LLM Apps Against Jailbreaks, Toxicity, and Prompt Injection Plan and Schedule a Full Week of Threads Content From One Claude Conversation Coding Cat Oran Ep3, Five Tables Changed Everything Updated: BFF Pattern I'm done watching freelancers get buried by 200 proposals. So I'm building the alternative. This is my first post BFS Algorithm in Java Step by Step Tutorial with Examples Tracking LLM Pricing Monthly: An Open Dataset for 22 AI Models How We Measure Content ROI on a Comparison Site: Revenue Attribution Without Perfect Data Introducing Nova AI Ops: The AI-Native Operating System for SRE Teams I built a free desktop video downloader for Windows — Grabbit How Talkie OCR Helps Vision-Impaired & Dyslexic Users Read the World Around Them VRCFaceTracking安装和iPhone面捕配置教程,有bug Even CrowdStrike Can't See Your Agents The Automation Gold Rush: What n8n Workflows and Claude Are Opening Up for Developers Right Now
Building Soccer DNA: A Soccer Personality Quiz with React and Next.js
Boyuedu · 2026-06-22 · via DEV Community

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:

  1. Make it feel fun and shareable.
  2. 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:

  1. The user understands the idea quickly.
  2. The questions feel immersive enough to finish.
  3. The scoring logic feels believable.
  4. The result feels personalized.
  5. 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.