Remix

Make your own version of FC26 Meta Score

Edit the prompt below and generate a customized version in seconds.

Original by Aazim Strike

Describe your app

Build a complete, production-quality web app called **FC26 META SCORE** — a premium football gaming analytics platform for FC26 Ultimate Team.

This must be a genuinely functional application, not just a visual mockup.

## CORE IDEA

A user searches for a real FC26 Ultimate Team player/card.

The app retrieves the player's real card data from a legitimate configured data provider and calculates a **META SCORE from 0–100** showing how effective the card is for competitive gameplay.

The same scoring engine must power Search, Player Details, Rankings, Card Browser and Compare.

Do NOT invent players, attributes, ratings, cards or API results.

Do NOT use fake/mock data as if it were real.

## DESIGN

Create an original, premium football-gaming aesthetic.

Dark near-black background with:

* #0B0B0F style base
* white/light-gray typography
* subtle electric green/cyan accents
* glassmorphism panels
* soft glowing borders
* premium gradients
* subtle grid/noise texture
* smooth micro-interactions
* animated score gauges
* polished hover states
* modern rounded cards
* excellent spacing
* professional typography

Do NOT copy EA Sports FC, FUT.GG, FUTBIN or another site's exact branding or layout.

The result should look like a serious independent football analytics product.

## NAVIGATION

Desktop navigation:

* FC26 META SCORE logo
* Home
* Search
* Meta Rankings
* Card Browser
* Compare

Mobile:

* responsive navigation
* bottom navigation or compact mobile menu
* touch-friendly controls

No login.
No signup.
No account creation.

## HOME PAGE

Hero:

**HOW META IS YOUR FC26 PLAYER?**

Subtitle:

**Search any FC26 Ultimate Team card and discover its true META SCORE.**

Large search input:

**Search for an FC26 player...**

Search button.

When typing, show live suggestions with:

* Player/card image
* Name
* Overall
* Position
* Club
* Nation
* Card type
* META SCORE

Homepage sections:

1. Top META Players
2. Best Attackers
3. Best Midfielders
4. Best Defenders
5. Best Goalkeepers

Use real provider data only.

Add attractive loading skeletons and professional empty/error states.

## SEARCH

Create a fast global player/card search.

Search by:

* player name
* club
* nation
* position

Use debouncing.

Results should display:

* card image
* player name
* rating
* position
* club
* nation
* card type
* META SCORE

Filters:

* Position
* Rating
* Card Type
* League
* Club
* Nation
* META SCORE
* Skill Moves
* Weak Foot

Clicking a result opens the Player Details page.

Handle:

* loading
* no results
* provider unavailable
* API errors
* retry

## PLAYER DETAILS

Create a premium `/player/[id]` page.

Hero section:

* large player/card image
* player name
* rating
* position
* club
* nation
* league
* card type
* META SCORE

Create a large animated circular score gauge.

META tiers:

90–100 → ELITE
85–89 → TOP META
80–84 → META
70–79 → USABLE
60–69 → AVERAGE
0–59 → NOT META

Display:

* Pace
* Shooting
* Passing
* Dribbling
* Defending
* Physical
* Weak Foot
* Skill Moves
* PlayStyles
* PlayStyles+

Use beautiful animated attribute bars.

Add:

**WHY THIS PLAYER IS META**

Generate a dynamic explanation based ONLY on the player's actual attributes.

Add:

**WEAKNESSES**

Identify relevant weaknesses from the actual data.

Add:

**BEST POSITIONS**

Calculate the positions where the player performs best.

Add:
**META BREAKDOWN**

Show exactly what contributes to the score so users understand why the card received its rating.

## META SCORE ENGINE

Create a transparent, modular scoring engine.

Do NOT simply use Overall rating.

Score from 0–100.

Use:

* Pace
* Shooting
* Passing
* Dribbling
* Defending
* Physical
* individual position-specific attributes
* Weak Foot
* Skill Moves
* PlayStyles
* PlayStyles+
* other legitimate gameplay-relevant data available from the provider

Create configurable position weights for:

ST
CF
LW
RW
CAM
CM
CDM
LM
RM
LB
RB
CB
GK

Examples:

ST:
Prioritize finishing, attacking positioning, shot power, pace, dribbling and relevant attacking PlayStyles.

Wingers:
Prioritize pace, acceleration, dribbling, agility, shooting, passing and skill moves.

CAM:
Prioritize passing, vision, dribbling, agility, shooting, pace and PlayStyles.

CM:
Balance passing, dribbling, defending, physical and shooting.

CDM:
Prioritize defending, interceptions, physical, passing and defensive PlayStyles.

CB:
Prioritize defending, physical, pace, defensive positioning and relevant PlayStyles.

RB/LB:
Prioritize pace, defending, physical, passing and dribbling.

GK:
Use goalkeeper-specific attributes.

Keep all scoring weights in one easily editable configuration.

The engine should return:

* META SCORE
* position score
* attribute contributions
* PlayStyle bonus
* Weak Foot contribution
* Skill Move contribution
* confidence score
* explanation
* weaknesses
* best positions

Missing data must NEVER be invented.

If important information is missing, reduce confidence appropriately.

## META RANKINGS

Create `/rankings`.

Rank real FC26 cards by META SCORE.

Columns:
Rank
Player
Position
Rating
Card Type
Club
META SCORE

Tabs:

* Overall
* Attackers
* Midfielders
* Defenders
* Goalkeepers

Filters:

* Position
* Rating
* Card Type
* League
* Club
* Nation
* META SCORE

Allow sorting:

* META SCORE
* Overall
* Pace
* Shooting
* Passing
* Dribbling
* Defending
* Physical
* Name

Use pagination/infinite scrolling for performance.

## CARD BROWSER

Create `/cards`.

A visual database of FC26 cards.

Every card displays:

* image
* rating
* player name
* position
* club
* nation
* card type
* META SCORE

Filters:

* Rating
* Position
* Card Type
* League
* Club
* Nation
* META SCORE
* Weak Foot
* Skill Moves

Cards link to Player Details.

## COMPARE

Create `/compare`.

Allow users to select two real FC26 cards.

Side-by-side comparison:

META SCORE
Overall
Pace
Shooting
Passing
Dribbling
Defending
Physical
Weak Foot
Skill Moves
PlayStyles
PlayStyles+
Position-specific score

Highlight the better value in each category.

Add:

**WHO IS MORE META?**

Use the same META SCORE engine.

Show a clear winner and explain why.

Allow either player to be replaced without leaving the page.

## DATA ARCHITECTURE

Use this architecture:

Frontend
↓
Server API
↓
Data Provider
↓
Real FC26 data
↓
Normalization
↓
META SCORE engine
↓
Frontend

Create a provider abstraction such as:

`DataProvider`

The frontend must NEVER depend directly on a provider's raw response format.

Normalize all external data into internal types:

Player
Card
Attributes
Position
Club
League
Nation
CardType
PlayStyles
PlayStylesPlus

Primary provider should support **FutDB through its legitimate API access**.

Keep provider credentials server-side.

Use an environment variable such as:

`FUTDB_API_KEY`

Never expose the key to the browser.

Never use:
`NEXT_PUBLIC_FUTDB_API_KEY`

If the provider is unavailable or the key isn't configured, show:

**LIVE FC26 DATA UNAVAILABLE**

with a Retry button.

Never fall back to fake players.

Make the provider layer replaceable so another legitimate FC26 API can be added later without rebuilding the frontend.

## API

Create server-side routes for:

`/api/search`
`/api/player/[id]`
`/api/rankings`
`/api/cards`
`/api/compare`
`/api/provider-status`

Add:

* caching
* debouncing
* pagination
* validation
* timeout handling
* rate-limit handling
* clean error responses

Handle:
401
403
404
429
500
502
520
timeouts
malformed responses
missing attributes

Never expose API keys or internal server errors.

## PERFORMANCE

Optimize heavily:

* server-side data fetching
* caching
* lazy loading
* image optimization
* pagination
* minimal API calls
* debounced search
* skeleton loading
* responsive rendering

Do not download an entire database into the browser unnecessarily.

## COMPONENT SYSTEM

Build reusable components:

Navbar
MobileNavigation
PlayerSearch
SearchResults
PlayerCard
PlayerCardGrid
MetaScore
MetaTier
ScoreGauge
AttributeBar
AttributeGrid
PlayStyleBadge
RankingTable
FilterPanel
ComparePlayer
ComparisonTable
ProviderStatus
LoadingSkeleton
EmptyState
ErrorState

## RESPONSIVENESS

Desktop should feel like a premium analytics dashboard.

Tablet should automatically adapt.

Mobile must remain fully usable:

* cards stack correctly
* comparison becomes scrollable
* filters become drawers
* navigation remains accessible
* text never overlaps
* score gauge scales correctly
* buttons remain easy to tap

## ACCESSIBILITY

Use:

* semantic HTML
* keyboard navigation
* visible focus states
* accessible labels
* sufficient contrast
* reduced-motion support

## SEO

Add:

* proper page titles
* metadata
* Open Graph metadata
* descriptive URLs
* semantic headings

Example title:

**FC26 META SCORE — Find the Most META FC26 Players**

## IMPORTANT DATA RULES

Never:

* fabricate player information
* fabricate attributes
* fabricate API responses
* pretend unavailable data is real
* scrape protected endpoints
* bypass authentication
* bypass CAPTCHA
* bypass robots restrictions
* bypass rate limits

If real provider data is unavailable, make the UI clearly state that live data is unavailable.

## FINAL VERIFICATION

Before considering the project complete:

1. Run the app.
2. Test every route.
3. Test search.
4. Test player details.
5. Test META SCORE calculation.
6. Test rankings.
7. Test Card Browser.
8. Test Compare.
9. Test filters.
10. Test mobile layout.
11. Test desktop layout.
12. Test provider status.
13. Test missing API key.
14. Test provider errors.
15. Check console errors.
16. Fix TypeScript errors.
17. Fix runtime errors.
18. Run production build.

Most importantly:

Do NOT claim that live FC26 data works unless you successfully receive and process a real provider response.

The finished product should feel like a polished **FC26 player intelligence platform**, with a consistent scoring system and a beautiful premium interface.

Build the complete application now.

Free to use. No credit card required.