Associação desportiva Demonstration project
CD Ribeira — members portal for a local sports club
A heritage-proud web app for a football and athletics club founded in 1974: a working members portal with fee status, a mock MB Way payment flow, sport enrolment, filterable fixtures, club news and membership tiers — in deep maroon, gold and off-white.
feitura.pt/demo/cd-ribeira — Live
Our club has 1,200+ members and the treasurer still collects fees at the bar on match days. We need a website that feels like our 50-year history — crest, colours, pride — but works like an app: members check and pay their fees by MB Way from their phone, parents enrol kids in football or athletics online, and everyone sees upcoming matches and meets without calling the office.
What's inside
- Members portal demo with fee status tile (paid / overdue) and member card
- Mock MB Way payment flow — phone entry, simulated confirmation, receipt, demo-safe by design
- Sport enrolment form (football / athletics) with inline validation and demo sink
- Fixtures & athletics meets timetable with sport filter and home/away tags
- Custom-designed club crest and heritage identity in inline SVG — no stock imagery
- Club news cards with bespoke SVG line-art per story
- Squads grid from under-6s to veterans with training schedules
- Membership pricing in EUR with benefits per tier and a highlighted flagship plan
- Fully bilingual PT/EN interface with locale-aware date formatting
Build log
- Identity first: design the crest, set the maroon + gold + off-white palette, type scale with athletic mono numerals
- Page skeleton: sticky nav, hero with crest and club stats, section rhythm, mobile-first layout at 375px
- Members portal core: fee status tile with paid/overdue states and the mock MB Way flow with simulated confirmation
- Sport enrolment form with validation, plus the fixtures timetable with sport filters and home/away tags
- Club content: news cards with bespoke SVG art, squads grid, membership tiers and footer with club details
- Bilingual PT/EN pass, accessibility audit — contrast, focus states, aria on controls, reduced motion
- QA on real phones and tablets, performance check, content proofing with the club board, handover
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
97
Accessibility
100
Best practices
100
SEO