Showcase Project

Hallo Belsimpel!

Dit is FlexForBelsimpel — een telefoon- en abonnementenvergelijker gebouwd met jullie volledige tech stack. Van PHP en Laravel tot React en Elasticsearch, alles draait in Docker, precies zoals bij Belsimpel.

Gebouwd door Chiril Ojoga als sollicitatie-showcase

De volledige Belsimpel-stack

Elke technologie uit de vacature, daadwerkelijk in gebruik

PHP 8.3 + Laravel 11

Backend framework

RESTful API, Eloquent ORM, migrations, queue jobs, observers, events

GraphQL (Lighthouse)

API layer

Typed schema, custom resolvers, batched queries, subscriptions-ready

MariaDB 11.2

Primary database

8 tables, foreign keys, indexes, pivot tables with pricing

Redis 7.2

Cache, sessions, rate limiting

Query caching (5min TTL), session store, API rate limiter (60/min)

Elasticsearch 8.12

Search engine

Full-text search with fuzzy matching, faceted filters, aggregations

RabbitMQ 3.13

Message queue

Async ES sync, price notifications, recommendation processing

React 18 + TypeScript

Frontend framework

Component architecture, hooks, type safety, SSR-compatible

React Router v7

Full-stack framework

File routing, SSR, loaders, actions — successor to Remix

Vite 6

Build tool

HMR, CSS Modules, TypeScript, dev proxy, production bundling

CSS Modules

Scoped styling

Component-level styles, no class collisions, design token variables

Docker Compose

Infrastructure

8 services: nginx, php, node, mariadb, redis, ES, rabbitmq, mailpit

GitLab CI/CD

Pipeline

Lint, test, build, and deploy stages with Docker-in-Docker

Uitgelichte telefoons

Live data uit MariaDB, doorzoekbaar via Elasticsearch

Architectuur

Hoe alle services samenwerken in Docker Compose

┌─────────────────────────────────────────────────────────────┐
│                        BROWSER                               │
│    React 18 + TypeScript + React Router v7 (SSR)            │
│    CSS Modules · urql GraphQL client                         │
└────────────────────────┬────────────────────────────────────┘
                         │ HTTP
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                   NGINX (Reverse Proxy)                       │
│       /graphql → PHP-FPM       /* → Node SSR (port 3000)    │
└───────────┬────────────────────────────┬────────────────────┘
            │                            │
            ▼                            ▼
┌───────────────────────┐  ┌─────────────────────────────────┐
│  LARAVEL (PHP 8.3)    │  │   REACT ROUTER v7 (Node 20)    │
│                       │  │                                  │
│  Lighthouse GraphQL   │  │   SSR · Loaders · Actions       │
│  Eloquent ORM         │  │   Vite dev server               │
│  Sanctum Auth         │  └─────────────────────────────────┘
│  Queue Jobs           │
│  Observers / Events   │
└──┬────┬────┬────┬─────┘
   │    │    │    │
   ▼    ▼    ▼    ▼
┌──────┐ ┌─────┐ ┌──────────────┐ ┌──────────┐
│Maria │ │Redis│ │Elasticsearch │ │ RabbitMQ │
│  DB  │ │     │ │              │ │          │
│      │ │Cache│ │ phones idx   │ │ search-  │
│phones│ │Sess.│ │ plans idx    │ │ sync     │
│plans │ │Rate │ │              │ │ notifs   │
│users │ │Limit│ │ Fuzzy search │ │ recomm.  │
└──────┘ └─────┘ └──────────────┘ └──────────┘

Wat kan FlexForBelsimpel?