Portfolio · Editie 2026Portfolio · Edition 2026

YASSIN

full-stack developerfull-stack developer

Ik bouw én ontwerp. De site die je nu leest is het bewijs.I build and I design. The site you're reading is the proof.

CS-student · Hogeschool LeidenCS student · University of Applied Sciences Leiden
Status: beschikbaar voor stage & junior-rollenStatus: open to internships & junior roles
Neem contact opGet in touch

klik · wakker · loop · slaapclick · wake · walk · sleep

◐ ZZZ · klik waar ze heen moet◐ ZZZ · click where she should go

Code die werkt is de basis. Code die óók iets voelt — dat is waar ik voor ga.Code that works is the baseline. Code that also feels like something — that's what I chase.

Ik ben Yassin — full-stack developer en bijna afgestudeerd CS'er aan de Hogeschool Leiden. Ik werk het liefst van database tot pixel: een idee opzetten, de architectuur bedenken, en het net zo lang bijschaven tot het klopt én lekker voelt.I'm Yassin — a full-stack developer and soon-to-graduate CS student at Leiden. I like owning the whole thing, from database to pixel: setting up an idea, designing the architecture, and refining it until it's both correct and a pleasure to use.

Deze editie bundelt drie projecten waar ik trots op ben. Geen mockups, geen filler — echt werk, met de keuzes erbij verteld.This issue collects three projects I'm proud of. No mockups, no filler — real work, with the decisions behind it spelled out.

— Yassin

№01

Meridian IntelligenceMeridian Intelligence

Meridian Intelligence — Map View
DatabronnenData sourcesDatabronnenData sourcesVerkeers-, luchtvaart- en eigen databronnen worden vanuit één zijpaneel beheerd.Traffic, aviation and custom data sources are managed from one side panel.
Live kaartlagenLive map layersLive kaartlagenLive map layersIncidenten en verkeersdoorstroming worden als afzonderlijke lagen op de kaart zichtbaar.Incidents and traffic flow are displayed as separate layers on the map.
BronstatusSource statusBronstatusSource statusDe statusbalk maakt de laatste bronupdate en het aantal geladen meldingen direct zichtbaar.The status bar surfaces the latest source update and the number of loaded reports.
◐ Map View · live intelligencekaart◐ Map View · live intelligence map

Een intelligenceplatform dat complexe informatie omzet in een helder en bruikbaar overzicht voor sneller onderzoek en beter onderbouwde beslissingen.An intelligence platform that turns complex information into a clear, actionable overview for faster research and better-informed decisions.

Next.jsReactTypeScriptTailwind CSSSpring BootJavaPostgreSQL/PostGISRabbitMQPython/FastAPIDocker
JaarYear
2026
RolRole
SoloSolo
StatusStatus
LiveLive
№02

Vermeer AutomotiveVermeer Automotive

Vermeer Automotive analyticsdashboard met omzetsamenvatting en testdata
◐ Analyticsdashboard · testdata◐ Analytics dashboard · test data

Een dealermanagementsysteem voor autobedrijven, gebouwd als microservicearchitectuur met AI-integraties. Ontwikkeld als groepsproject door een team van vijf.A dealer management system for automotive businesses, built on a microservices architecture with AI integrations. Developed as a group project by a team of five.

Spring BootNext.jsF#KotlinNestJSRust
JaarYear
2026
RolRole
Team van 5Team of 5
StatusStatus
Privé schoolprojectPrivate school project
Projectbewijs bekijkenView project evidence
Geanonimiseerde Vermeer Automotive werkplaatsaanvraag met zeven processtappen
Werkplaatsaanvraag · registratie tot facturatieWorkshop request · registration to invoicing
Vermeer Automotive systeemarchitectuur met frontend, API-gateway, eventbus, microservices, databases en AI-integraties
Systeemarchitectuur · microservices en AI-integratiesSystem architecture · microservices and AI integrations
Hoe Vermeer Automotive werktHow Vermeer Automotive works
  1. Frontend
  2. API-gateway
  3. Event bus
  4. microservices
  5. PostgreSQL
  6. AI-service

TechstackTech stack

FrontendFrontend
Next.js · React
Dashboard en werkplaatsschermen voor het hele dealerteam.Dashboard and workshop screens for the whole dealer team.
API-gatewayAPI gateway
REST / HTTP · business-logica
Eén ingang: routeert aanvragen, regelt toegang en publiceert events.One entry point: routes requests, handles access and publishes events.
Event busEvent bus
RabbitMQ / Kafka
Async berichten tussen services; publish/subscribe in plaats van directe calls.Async messaging between services; publish/subscribe instead of direct calls.
MicroservicesMicroservices
Spring Boot · Kotlin · F# · NestJS · Rust
Elke service één domein — klant, afspraak, auto, voorraad en factuur.Each service owns one domain — customer, appointment, vehicle, inventory and invoice.
DatabaseDatabase
PostgreSQL (per service)
Database-per-service: elke service houdt zijn eigen data bij, geen gedeelde tabellen.Database-per-service: each service keeps its own data, no shared tables.
AI-serviceAI service
OpenAI · Anthropic · Llama
Bundelt externe AI-API’s achter één interne service.Wraps external AI APIs behind one internal service.
Team & aanpakTeam & approach
Team van 5 · polyglot
Vijf ontwikkelaars, elk verantwoordelijk voor een eigen service en taal.Five developers, each responsible for their own service and language.

Hoe een serviceaanvraag verlooptHow a service request runs

  1. GeregistreerdRegisteredDe serviceaanvraag wordt aangemaakt; de Customer- en Vehicle-service koppelen klant en voertuig.The service request is created; the Customer and Vehicle services link client and vehicle.
  2. IngechecktChecked inDe auto komt binnen; de Appointment-service bevestigt de afspraak en meldt de status via de event bus.The car arrives; the Appointment service confirms the booking and announces the status over the event bus.
  3. DiagnoseDiagnosisDe monteur legt de bevindingen vast; de AI-service helpt met een eerste inschatting via OpenAI, Anthropic of Llama.The mechanic records the findings; the AI service assists with a first estimate via OpenAI, Anthropic or Llama.
  4. ReparatieRepairBenodigde onderdelen worden bij de Inventory-service gereserveerd en de voorraad wordt bijgewerkt.Required parts are reserved with the Inventory service and stock is updated.
  5. VoltooidCompletedHet werk wordt afgerond; elke service houdt zijn eigen deel bij in zijn eigen database.The work is finished; each service records its own part in its own database.
  6. FacturatieInvoicingDe Invoice-service stelt de factuur samen uit arbeid en gebruikte onderdelen.The Invoice service assembles the invoice from labour and parts used.
  7. UitgechecktChecked outDe klant checkt uit; de aanvraag wordt afgesloten en het dossier is compleet.The client checks out; the request is closed and the record is complete.

Mentaal modelMental model

Zie Vermeer als een echte garage, opgesplitst in afdelingen:Think of Vermeer as a real garage, split into departments:

API-gateway
de receptie die elke aanvraag aanneemtthe front desk that takes every request
Event bus
de interne omroep die afdelingen op de hoogte houdtthe internal intercom that keeps departments informed
Customer / Appointment
de balie en de agendathe counter and the calendar
Vehicle / Inventory
de werkplaats en het magazijnthe workshop and the warehouse
Invoice
de administratie die de rekening opmaaktthe back office that draws up the bill
AI-service
de adviseur die meedenkt bij de diagnosethe advisor who helps think through the diagnosis

Vermeer is een groepsproject (team van vijf); dit overzicht beschrijft de gezamenlijke architectuur, niet alleen mijn eigen service.Vermeer is a group project (team of five); this overview describes the shared architecture, not only my own service.

№03

ScanPalScanPal

ScanPal-dashboard met websitegezondheidsscore, security-bevinding en recente scans
◐ Dashboard · websitegezondheid in één oogopslag◐ Dashboard · website health at a glance

ScanPal controleert websites op beveiliging, SEO, prestaties, AI-zichtbaarheid en compliance, en vertaalt technische bevindingen naar duidelijke verbeterpunten.ScanPal checks websites for security, SEO, performance, AI visibility and compliance, turning technical findings into clear improvements.

TypeScriptNext.jsPostgreSQLBullMQRedisPlaywrightStripe
JaarYear
2026
RolRole
SoloSolo
StatusStatus
LiveLive
Hoe ScanPal werktHow ScanPal works
  1. Browser
  2. Next.js
  3. BullMQ / Redis
  4. workers
  5. PostgreSQL
  6. dashboard

TechstackTech stack

MonorepoMonorepo
pnpm · TypeScript 5 · Node 20
Beheert alle apps en gedeelde packages.Manages all apps and shared packages.
WebappWeb app
Next.js 16 · React 19 · Tailwind 4
Dashboard, pagina’s en REST API.Dashboard, pages and REST API.
WachtrijQueue
BullMQ 6 · Redis 7
Verdeelt scans over achtergrondworkers.Distributes scans across background workers.
WorkersWorkers
Playwright · axe-core · Semgrep · Gitleaks
Onderzoeken browsergedrag, toegankelijkheid, code en secrets.Inspect browser behaviour, accessibility, code and secrets.
DatabaseDatabase
PostgreSQL 16 · pg
Sites, scans, checks, findings en teams.Sites, scans, checks, findings and teams.
Auth & betalingenAuth & payments
Supabase Auth · Stripe
Accounts en magic links; Pro/Max-abonnementen.Accounts and magic links; Pro/Max subscriptions.
AI-integratieAI integration
Model Context Protocol
Laat AI-tools scans starten en uitlezen.Lets AI tools start and read scans.
Kwaliteit & infraQuality & infra
Vitest · ESLint · Docker Compose
Tests, typecheck en draait de hele stack.Tests, typecheck and runs the whole stack.

Hoe een scan verlooptHow a scan runs

  1. Start & controleStart & checksDe gebruiker kiest een site; de API controleert teamtoegang, invoer, abonnement en scancredits.The user picks a site; the API checks team access, input, subscription and scan credits.
  2. Direct antwoordInstant responseNext.js maakt een scanrecord, zet één job in Redis en antwoordt met HTTP 202 — geen minutenlange open request.Next.js creates a scan record, drops one job in Redis and answers with HTTP 202 — no minute-long open request.
  3. Verdeeld onderzoekSplit investigationEen crawler ontdekt routes; daarna splitst het werk in drie workers — HTTP (headers, TLS, DNS, SEO), browser (Playwright, a11y, performance) en GitHub (Semgrep, Gitleaks, OSV).A crawler discovers routes; the work then splits across three workers — HTTP (headers, TLS, DNS, SEO), browser (Playwright, a11y, performance) and GitHub (Semgrep, Gitleaks, OSV).
  4. Idempotente resultatenIdempotent resultsElke controle schrijft een idempotente checks-rij naar PostgreSQL, zodat een job veilig opnieuw geprobeerd kan worden.Each check writes an idempotent checks row to PostgreSQL, so a job can be retried safely.
  5. Score & dashboardScore & dashboardDe aggregator maakt findings, berekent de scores, vergelijkt met eerdere scans; het dashboard toont alles live via Server-Sent Events (met polling als terugval).The aggregator builds findings, computes the scores, compares with earlier scans; the dashboard streams it live via Server-Sent Events (with polling as fallback).

Mentaal modelMental model

Zie ScanPal als een garage:Think of ScanPal as a garage:

Next.js
de receptie die de opdracht aanneemtthe front desk that takes the order
Redis / BullMQ
het planbord met openstaand werkthe job board with open work
Workers
de gespecialiseerde monteursthe specialist mechanics
PostgreSQL
het onderhoudsdossierthe maintenance record
Aggregator
de keurmeester die alles samenvoegtthe inspector who assembles the report
Dashboard
de balie waar de klant het resultaat zietthe counter where the client sees the result

De documentatie noemt “100+ checks”; de gedeelde catalogus telt 80 unieke check-ID’s. Doordat checks per ontdekte route herhalen, draait één scan er in de praktijk ruim honderd.The docs mention “100+ checks”; the shared catalogue holds 80 unique check IDs. Because checks repeat per discovered route, a single scan runs well over a hundred in practice.

Waar ik mee bouw.What I build with.

Front-endFront-endReact · TS · Next
Back-endBack-endNode · Spring · FastAPI
DatabaseDatabasePostgres · Prisma · SQL
Styling / UIStyling / UITailwind · CSS · Figma
ToolingToolingGit · Docker · CI/CD
TalenLanguagesNL · EN