Casestudy — AllHorses

Eén platform. Meerdere werelden.

Voor AllHorses ontwikkelde Yousource een compleet digitaal ecosysteem: een marktplaats op het web, native apps voor iOS en Android, een adminomgeving en een gedeelde backend die alles met elkaar verbindt.

MarktplaatsWeb & appsBackendReal-time ecosysteemLangetermijnsamenwerking

Bekijk allhorses.nl

Homepage van AllHorses met zoekfilters voor paardenadvertenties

01 — Het ecosysteem

Eén platform dat op vier plekken tegelijk leeft.

AllHorses is geen losse website met een app ernaast. Website, iOS-app, Android-app en de adminomgeving werken op dezelfde data en dezelfde services. Wat aan de ene kant verandert, is overal zichtbaar.

Web

Marktplaats en advertentieplatform in de browser.

iOS-app

Native app voor iPhone-gebruikers.

Android-app

Native app voor Android-gebruikers.

Adminomgeving

Beheer van advertenties, gebruikers en content.

Gedeelde backend

Eén gedeelde data- en servicelaag

Firebase · Google Cloud Platform

Conceptuele weergave van de datastroom

01
BeheerActie in de adminomgeving
02
BackendValidatie en opslag
03
DatabaseGedeelde bron van waarheid
04
DistributieReal-time doorgifte
05
Web & appsDirect zichtbaar

02 — De uitdaging

Een marktplaats voor de paardenwereld vraagt meer dan een website.

Vraag en aanbod in de paardenwereld draaien om vertrouwen, beeldmateriaal en snel contact. Advertenties bevatten foto’s en video’s, mensen zoeken onderweg op hun telefoon en willen direct kunnen reageren.

Dat betekent dat dezelfde functionaliteit betrouwbaar moet werken op web, iOS en Android — zonder dat er drie verschillende systemen ontstaan die uit elkaar groeien.

Beeld en video

Zware media die overal snel en betrouwbaar getoond moeten worden.

Contact

Kopers en verkopers willen laagdrempelig en direct contact.

Meerdere platformen

Eén functionaliteit, drie clients, één gedeelde waarheid.

03 — De architectuur

Eén gedeelde laag onder alles.

De architectuur is opgebouwd rond één gedeelde backend. Clients zijn dun, de logica en data leven centraal. Daardoor kan functionaliteit één keer worden gebouwd en op alle platformen worden gebruikt.

Laag 01

Clients

React
Swift
Kotlin
Adminomgeving

Laag 02

Services & logica

Cloud Functions
WebSockets
Notificaties
Validatie

Laag 03

Data & media

Firestore
Firebase Authentication
Cloud Storage

Laag 04

Infrastructuur

Firebase
Google Cloud Platform

04 — Het webplatform

De marktplaats in de browser.

Het webplatform is de plek waar bezoekers advertenties vinden, filteren en plaatsen. Het is gebouwd met React op dezelfde services als de apps, zodat aanbod en beheer altijd overeenkomen.

Dienstenoverzicht op het AllHorses webplatform

Advertenties, diensten en contentpagina’s draaien op dezelfde structuur.

05 — De mobiele apps

Native gebouwd voor iOS en Android.

Voor de mobiele ervaring is gekozen voor native ontwikkeling. Zo sluit de app aan op de conventies van het besturingssysteem en kan optimaal gebruik worden gemaakt van camera, media en notificaties.

iOS

Een app die aanvoelt als iOS.

De iOS-app is ontwikkeld in Swift en gebruikt dezelfde backend als het webplatform. Advertenties, media en contact werken exact zoals gebruikers dat op hun iPhone gewend zijn.

Swift
Firebase SDK
Push-notificaties

Android

Dezelfde functionaliteit, Android-eigen.

De Android-app is ontwikkeld in Kotlin. Beide apps delen dezelfde datalaag, waardoor nieuwe functionaliteit niet twee keer opnieuw bedacht hoeft te worden.

Kotlin
Firebase SDK
Push-notificaties

Schermen uit de app

AllHorses app — Marktplaats — MarktplaatsZoeken, diensten en live actieve gebruikers

AllHorses app — Advertentiedetail — AdvertentiedetailMedia, kenmerken, delen en direct contact

AllHorses app — Filters — FiltersStamboek, keuring, niveau, locatie en prijs

AllHorses app — Navigatie — NavigatieAankopen, events, nieuws, favorieten en partners

AllHorses app — Mijn aankopen — Mijn aankopenAangeschafte diensten met transactiegeschiedenis

AllHorses app — Bevestiging — BevestigingSlide-to-confirm voor het activeren van een dienst

AllHorses app — Inloggen — InloggenE-mail, Apple, Google en Facebook

AllHorses app — Onboarding — OnboardingWarme introductie die aanzet tot plaatsen

06 — Voor de gebruiker

Functionaliteit die het gedrag van de gebruiker volgt.

Het platform is niet gebouwd rond technische mogelijkheden, maar rond hoe mensen advertenties plaatsen, delen en contact leggen.

01 — Advertenties delen

Probleem: Verkopers willen hun advertentie buiten het platform delen, maar een gedeelde link liet geen aantrekkelijke voorvertoning zien.
Oplossing: Advertenties genereren een deelbare kaart met beeld en kerninformatie, zodat een gedeelde link direct herkenbaar is op sociale media en in berichten.
Technologie: Dynamische deelbare voorvertoningen op basis van advertentiedata

Advertentie delen

Voorvertoning met beeld en kerninformatie — conceptuele weergave.

02 — Bevestiging bij publiceren

Probleem: Na het plaatsen van een advertentie was het niet direct duidelijk of alles gelukt was.
Oplossing: Bij een succesvolle publicatie krijgt de gebruiker een duidelijke, positieve bevestiging met een confetti-animatie. Een klein moment dat vertrouwen geeft.
Technologie: Animatiefeedback in de app na succesvolle publicatie

Advertentie geplaatst

03 — Direct contact

Probleem: Kopers en verkopers willen zo min mogelijk drempels tussen interesse en gesprek.
Oplossing: Vanuit een advertentie kan direct een gesprek worden gestart via WhatsApp, met de juiste context al ingevuld.
Technologie: WhatsApp deep linking vanuit advertentiecontext

Start gesprek over deze advertentie

04 — Foto’s en video’s

Probleem: Advertenties leunen zwaar op beeld en video, wat veel opslag en bandbreedte vraagt.
Oplossing: Media wordt centraal opgeslagen en via de cloud uitgeleverd, zodat web en apps hetzelfde materiaal betrouwbaar tonen.
Technologie: Cloud Storage voor media-opslag en -uitlevering

Conceptuele weergave

01Upload vanuit app of web

02Opslag in de cloud

03Uitlevering aan alle clients

07 — Real-time

Nieuw aanbod verschijnt vanzelf.

Een marktplaats leeft bij actualiteit. Met real-time technologie hoeven gebruikers niet handmatig te vernieuwen om nieuw aanbod te zien.

Live feed — conceptuele weergave

Nieuwe advertentie geplaatstNieuw
Advertentie
Advertentie
Advertentie
Advertentie

Gebruikers hoeven de applicatie niet handmatig te vernieuwen om nieuwe advertenties te zien. Nieuwe items kunnen automatisch in de feed verschijnen.

Technologie: WebSocket-technologie voor real-time updates

08 — De backend

Diensten in hun rol, niet als logolijst.

De backend draait op Firebase en Google Cloud Platform. Elke dienst vervult een specifieke rol binnen het platform.

Authenticatie

Accounts en veilige toegang voor gebruikers op web en in de apps.

Firebase Authentication

Data

Advertenties, profielen en interacties in één gedeelde database.

Cloud Firestore

Media

Opslag en uitlevering van foto’s en video’s bij advertenties.

Cloud Storage

Serverlogica

Achtergrondtaken en logica die niet in de client thuishoort.

Cloud Functions

Real-time

Directe doorgifte van wijzigingen naar alle actieve clients.

WebSocket-technologie

Infrastructuur

Schaalbare hosting en beheer van de gedeelde omgeving.

Google Cloud Platform

09 — Integraties

Verbonden met de diensten die het platform nodig heeft.

Het platform staat niet op zichzelf. Externe diensten zijn ingezet waar ze het proces van gebruikers en beheerders daadwerkelijk verbeteren.

AllHorses

Betalingen
Afhandeling van betaalde advertenties en diensten.
E-mail & notificaties
Transactionele berichten en meldingen richting gebruikers.
Planning
Afspraken en agenda-functionaliteit rondom diensten.
Analyse
Inzicht in gebruik van het platform voor doorontwikkeling.

10 — De adminomgeving

Beheer op één plek, effect op alle platformen.

AllHorses beheert advertenties, gebruikers en content in een eigen adminomgeving. Omdat die op dezelfde backend draait, werkt een aanpassing direct door naar web, iOS en Android.

Van beheeractie naar zichtbaar resultaat

01
Actie in adminAanpassen of goedkeuren
02
ValidatieServerlogica controleert
03
OpslagGedeelde database
04
DoorgifteReal-time update
05
ZichtbaarWeb, iOS en Android

11 — Technologie

Technologie gekozen op basis van de rol in het geheel.

Beweeg over een technologie om te zien waar deze in de architectuur zit.

Web

Mobiel

Backend

Data & media

Real-time

Infrastructuur

12 — De samenwerking

Een platform dat blijft doorontwikkelen.

De samenwerking met AllHorses is doorlopend. Nieuwe wensen vanuit gebruikers en de organisatie worden vertaald naar functionaliteit binnen het bestaande ecosysteem.

01Idee
02Uitwerking
03Ontwikkeling
04Test
05Livegang
06Doorontwikkeling

Geen eenmalige oplevering.
Een platform dat meegroeit met de markt.

13 — Het resultaat

Van losse kanalen naar één digitaal ecosysteem.

Het resultaat is geen verzameling losse producten, maar één samenhangend platform waarin web, apps, beheer en backend elkaar versterken.

Bereik

Overal beschikbaar

Gebruikers vinden en plaatsen advertenties via de browser, iOS en Android — met dezelfde functionaliteit.

Snelheid

Eén keer bouwen

Nieuwe functionaliteit wordt in de gedeelde laag gebouwd en komt beschikbaar voor alle platformen.

Schaalbaarheid

Klaar voor groei

De cloudarchitectuur groeit mee met het aanbod, het aantal gebruikers en de hoeveelheid media.

Responsive platform

AllHorses op ieder scherm.

Projectoverzicht

AllHorses in het kort.

Client: AllHorses
Website: allhorses.nl
Project: Marktplaatsplatform, apps en backend
Platformen: Web · iOS · Android · Admin
Diensten: Productstrategie · UX & UI · Webdevelopment · iOS-app · Android-app · Backend & cloudarchitectuur · Integraties · Doorontwikkeling
Frontend: React · Swift · Kotlin
Backend: Firebase · Google Cloud Platform
Real-time: WebSocket-technologie

Heb je een platform, marktplaats of app-idee?

Wij bouwen het complete ecosysteem.

Van web en native apps tot backend, integraties en beheer. We starten bij wat je gebruikers nodig hebben en kiezen daarna pas de technologie.

Bespreek je project Bekijk meer cases

Meer werk

Gerelateerde cases

Website Redesign · UX/UI · WordPress · Elementor · Crocoblock

Eco Age

Yousource ontwierp de internationale website van Eco Age volledig opnieuw en bouwde het editorial platform in WordPress met Elementor en Crocoblock.

WordPress · Elementor · Crocoblock

Case bekijken

UX/UI Design · Figma · WordPress · Elementor · Responsive Development

MIRA Quality

Yousource ontwierp de volledige website van MIRA Quality in Figma en vertaalde dat ontwerp naar een gebruiksvriendelijke WordPress-website met Elementor.

Figma · WordPress · Elementor

Case bekijken

Headless migratie · WordPress · Elementor · Crocoblock · Technisch beheer

TextileGenesis

Yousource migreerde de corporate website van TextileGenesis van een headless opzet naar een volledig beheersbare WordPress-omgeving met Elementor en Crocoblock.

WordPress · Elementor · Crocoblock

Case bekijken