Spain Persona Frontier

Spain Persona Frontier is a React + TypeScript web app that explores Spanish audience segments through a concrete use case: device access.

Instead of acting as a generic persona explorer, the app is intentionally focused on a single operational question:

How does device access shape the digital profile of different audience segments in Spain?

Current focus

The current version is built around a specific use case:

Use case: Device access

The app lets the user inspect filtered audience segments and understand them through:

• selected segment by region, area type, and age group
• estimated size of the filtered segment
• dominant media channel
• typical profile of the segment
• device access and internet intensity as the central analytical lens
• age and media-channel charts for context

Data source

This project is based on the Hugging Face dataset:

• apol/spain-reference-personas-frontier

The current app uses an aggregated JSON derived from the persona_core subset.

Why this project exists

This project was shaped around a product constraint: make the app specific, real, and tied to a clear use case rather than building a broad exploratory dashboard.

The present approach balances two layers:

• cards that attack the use case
• cards and charts that provide context

Tech stack

• React
• TypeScript
• Vite
• Tailwind CSS
• Recharts
• Python for dataset inspection and aggregation

Repository structure

spain-persona-webapp/
├── public
│   ├── favicon.svg
│   └── icons.svg
├── src
│   ├── assets
│   │   ├── hero.png
│   │   ├── react.svg
│   │   └── vite.svg
│   ├── components
│   │   ├── AgeChart.tsx
│   │   ├── ChannelChart.tsx
│   │   ├── FilterBar.tsx
│   │   ├── SnapshotCard.tsx
│   │   └── SpainRegionsMap.tsx
│   ├── data
│   │   ├── realPersonaData.json
│   │   └── spain-ccaa.json
│   ├── services
│   │   └── personaService.ts
│   ├── types
│   │   └── persona.ts
│   ├── utils
│   │   └── translations.ts
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── .gitignore
├── BuildRealPersonaData.py
├── eslint.config.js
├── index.html
├── ListPersonaCoreColumns.py
├── LoadDataset.py
├── package-lock.json
├── package.json
├── persona_core_columns.txt
├── README.md
├── realPersonaData.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Local development

Install dependencies:

npm install

Run the development server:

npm run dev

Build for production:

npm run build

Python scripts

The repository includes Python scripts used to inspect and transform the source dataset.

LoadDataset.py

Loads the Hugging Face dataset and prints sample information.

Example:

py -3.14 LoadDataset.py

ListPersonaCoreColumns.py

Lists the available columns in the persona_core subset and can be used to inspect the field space before deciding what to aggregate.

Example:

py -3.14 ListPersonaCoreColumns.py

BuildRealPersonaData.py

Builds realPersonaData.json from the persona_core subset.

The current aggregation groups records by:

• region
• urban_rural
• age_group

and exports segment-level fields such as:

• size
• trust
• price sensitivity
• top issue
• top channel signals
• gender top
• device access top
• internet intensity top
• education top
• socioeconomic tier top
• reading frequency top

Example:

py -3.14 BuildRealPersonaData.py

After generating the file, copy the resulting JSON into:

src/data/realPersonaData.json

Current interface logic

The current UI is organized around three layers:

1. Filters

The user filters by:

• region
• area type
• age group

2. Summary cards

The app currently surfaces:

• selected segment
• estimated size
• top channel
• typical profile

3. Use case block

A dedicated block highlights:

• device access
• internet intensity

This is the central product thesis of the current version.

4. Context charts

Two charts provide supporting context:

• age distribution
• media channels

Notes on data interpretation

Some values shown in the UI are direct aggregations from the dataset, while others are dominant values within the selected segment.

For example:

• Top channel is derived from aggregated media-source signals
• Typical profile summarizes dominant gender, education, socioeconomic tier, and reading frequency
• Device access focus is centered on dominant device access and internet intensity for the selected segment

Status

Current status: first functional version

Implemented:

• working React app
• filters by region, area type, and age group
• real aggregated data
• use-case-oriented layout
• custom card and chart styling
• charts for age and media channels

Live demo

https://spain-persona-webapp.netlify.app/

Author

Raul Santos Quirós