KSK Beveren Companion App
A fan app for KSK Beveren with live match data, news, the squad and a Man of the Match vote, powered by my own backend.
- Role
- UX/UI design & full-stack development (solo)
- Year
- 2026
- Team
- Solo
- Type
- School project, Expert Class Coding (AP Hogeschool)
- Tools
- Figma, VS Code, Claude (AI assistant), React Native / Expo, Node.js / Express, MongoDB (Mongoose), Render
Challenge
Design and build a working mobile app with its own backend, from scratch. The brief was completely open.
Solution
A companion app for the supporters of my local club, KSK Beveren. Every screen pulls its data from my own API and database.
Result
A fully working app with a live backend.
Context
The Expert Class Coding brief was simple: build an app with a real backend. There was no client and no fixed topic, so I picked something I know well: KSK Beveren.
The target audience is the club's supporters, who want match info, news and the squad together in one place.
Process
I started with desk research and a user flow, then went from low-fidelity wireframes to high-fidelity designs in Figma before building anything.
Sketches
Final design
01
Live match data
Fixtures, results and standings, all loaded from the database through the API.
02
Man of the Match vote
After a match, logged-in fans vote for the best player and see the live results. Each user can vote once per match, which is enforced in the database.
03
News with comments
Club news articles where logged-in fans can leave comments.
04
Squad & player profiles
The full team, with a detail page per player.
Also included: Account registration & login, and a profile page.
Style guide
Colours
Blue
#2743B2
Primary
Yellow
#F3D02D
Accent
Text
#111111
Surface
#F5F7FB
Typography
- HeadingsSyne
- Headings
- Body textInter
- Body text
Components
Build
Frontend
- React Native
- Expo
- React Navigation
Backend
- Node.js
- Express
- MongoDB
- Mongoose
- Render
Auth
- bcrypt
- JWT
Architecture
- App (Expo)
- REST API (Express on Render)
- MongoDB
- 12 screens, with a floating bottom tab bar and stack navigation per tab: Home, Matches, News and Team.
- REST API with 7 resources: users, players, matches, news, comments, Man of the Match votes and standings.
- Passwords are hashed with bcrypt; logging in returns a JWT.
- Seed scripts fill the database with players, matches, news, standings, comments and votes.