Project 1 - StagePortaal

Projectbriefing: StagePortaal "TalentMatch"

Datum: 11 december 2025

Opdrachtgever: Ondernemersvereniging "MKB Regio Connect"

Contactpersoon: Dhr. J. van de Velde (Voorzitter)

1. Achtergrond en Probleemstelling

Onze ondernemersvereniging vertegenwoordigt 50+ lokale bedrijven. Wij merken dat de aansluiting tussen lokale MBO-studenten en onze leerbedrijven stroef verloopt. Bedrijven zoeken stagiairs, maar bereiken de scholen lastig. Studenten weten vaak niet welke leuke bedrijven er in de buurt zitten.

Momenteel houden we vacatures bij in een Excel-sheet en worden CV’s via e-mail heen en weer gestuurd. Dit is onoverzichtelijk, foutgevoelig en voldoet niet aan de privacywetgeving (AVG).

2. Doelstelling

Wij zoeken een webontwikkelaar die voor ons een Minimum Viable Product (MVP) kan bouwen van een online stageplatform: "TalentMatch".

Het doel is een webapplicatie waar bedrijven zelf hun vacatures kunnen plaatsen en beheren, en waar studenten eenvoudig kunnen reageren. Het systeem moet laagdrempelig, overzichtelijk en veilig zijn.

3. Doelgroepen

1. Studenten: Willen zoeken naar stages en direct reageren zonder gedoe.

2. Bedrijven: Willen vacatures plaatsen, aanpassen en zien wie er gereageerd heeft.

4. Gewenste Functionaliteiten (Must-Haves)

Wij verwachten in de eerste versie (MVP) minimaal de volgende functies:

• Registratie & Login:

  • Gescheiden accounts voor 'Studenten' en 'Bedrijven'.

  • Veilige inlog (wachtwoorden mogen niet leesbaar zijn voor beheerders).

• Voor Bedrijven:

  • Een eigen dashboard na inloggen.

  • Mogelijkheid om een nieuwe stagevacature toe te voegen (Titel, Omschrijving, Periode, Eisen).

  • Mogelijkheid om eigen vacatures aan te passen of te verwijderen (CRUD).

  • Inzicht in wie er op hun vacatures gereageerd heeft.

• Voor Studenten:

  • Een overzichtspagina van alle actuele vacatures.

  • Een detailpagina per vacature met alle informatie.

  • Een knop/formulier om direct te reageren (solliciteren) op een vacature.

  • Een overzicht in hun eigen dashboard waarop ze hebben gereageerd en wat de status is.

• Algemeen:

  • Het platform moet werken op desktop en mobiel (Responsive).

5. Technische Eisen & Randvoorwaarden

Omdat wij werken met beperkte budgetten voor hosting, hebben wij de volgende technische voorkeuren:

• Taal: PHP (versie 8+).

• Database: MySQL / MariaDB.

• Design: Mag gebruik maken van standaard CSS of een licht framework, maar moet wel een eigen 'look & feel' hebben die past bij een zakelijke markt.

• Beveiliging: Gezien we met persoonsgegevens werken (namen, e-mailadressen), is beveiliging tegen SQL-injectie en sessie-hijacking cruciaal.

• Privacy: Het systeem moet 'AVG-proof' ontworpen worden (geen onnodige data opslaan).

6. Budget en Planning

Wij begrijpen dat softwareontwikkeling tijd kost. Echter, wij willen graag snel live met een eerste versie.

• Beschikbaar budget: Wij gaan uit van circa 40 uur ontwikkeltijd voor deze eerste versie.

• Deadline: Wij ontvangen graag een oplevering binnen 6 weken na goedkeuring van de offerte.

7. Gevraagde actie

Graag ontvangen wij van u:

1. Een Plan van Aanpak (inclusief functioneel ontwerp/schetsen).

2. Een Ureninschatting per onderdeel.

3. Een Offerte voor de realisatie van dit MVP.

Bijlage

Specifieke Design & Interface Wensen (Cruciaal voor acceptatie)

Onze marketingafdeling heeft net een nieuwe huisstijl ontwikkeld. Wij accepteren geen standaard "Bootstrap-blauw" of grijze templates. Het ontwerp moet voldoen aan de volgende specifieke visuele eisen:

1. Verplicht Kleurenpalet: De applicatie moet gebruikmaken van onze specifieke huisstijlkleuren. Gebruik CSS-variabelen (:root) om dit consistent toe te passen:

   • Primaire Actiekleur (Knoppen/Links): #E63946 (Koraalrood) - voor 'Call to Actions' zoals "Solliciteer nu".

   • Hoofdkleur (Headers/Navigatie): #1D3557 (Diep Oceaanblauw).

   • Achtergrond Dashboards: #F1FAEE (Off-white/Mint) - Dus geen standaard wit.

   • Status Meldingen:

     • Succes/Open vacature: #2A9D8F (Groen).

     • Error/Gesloten vacature: #E63946 (Rood).

2. Dashboard Layout (Sidebar Navigatie): Voor het ingelogde gedeelte (Bedrijf & Student) willen wij geen navigatiebalk bovenin de pagina.

   • Wij willen een verticale sidebar aan de linkerkant van het scherm die altijd zichtbaar blijft.

   • In deze sidebar staat het logo, de menu-items onder elkaar, en onderaan de "Uitloggen" knop.

   • Toelichting: Dit dwingt de ontwikkelaar om met CSS Flexbox of CSS Grid te werken in plaats van een standaard block layout.

3. De "Vacature-Kaart" (Geen saaie lijstjes): Op de overzichtspagina voor studenten willen wij de vacatures niet onder elkaar in een simpele tabel zien.

   • Toon vacatures als "Cards" (Tegels) in een grid van 2 of 3 naast elkaar (op desktop).

   • Elke kaart moet een "Status Badge" in de rechterbovenhoek hebben. Deze moet dynamisch van kleur veranderen op basis van de database-status (bijv: "Nieuw" = Groen, "Bijna gesloten" = Oranje).

4. Interactieve Feedback: Wij willen dat de gebruiker merkt dat het systeem "leeft".

   • Alle knoppen moeten een duidelijke :hover state hebben (bijvoorbeeld iets lichter worden of een schaduw krijgen als de muis erop staat).

   • Wanneer een formulier verzonden is (bijv. een sollicitatie), moet er bovenaan de pagina een duidelijke, gekleurde notificatiebalk verschijnen die na het herladen blijft staan of weg te klikken is ("Uw sollicitatie is succesvol verzonden!").

5. De "Welkom" Widget: Op het dashboard van het bedrijf willen wij bovenaan direct drie grote cijfers zien (KPI's):

   1. Totaal aantal vacatures.

   2. Aantal openstaande sollicitaties.

   3. Datum van laatste login. (Tip, gebruik COUNT() queries en sessie-data om dit te maken.).

---

Tips voor de student

Hoe gebruik je dit document voor je examen?

Dit document is goud waard voor je examenportfolio. Je kunt hiermee direct de volgende examen-criteria afvinken:

1. De Klantvraag analyseren (W1):

   • Actie: Maak een lijstje "Functionele Eisen" (Wat moet het doen?) en "Niet-functionele eisen" (Hoe snel/veilig moet het zijn?) op basis van bovenstaande tekst.

   • Voorbeeld: Eis 1: "Het systeem moet twee rollen ondersteunen: student en bedrijf." (Bron: Briefing punt 3 & 4).

2. Offerte & Planning (W1):

   • Je kunt nu een realistische planning maken.

   • Voorbeeld: "Login systeem bouwen: 6 uur", "Database opzetten: 4 uur", "CRUD vacatures: 10 uur". Totaal moet rond de 40 uitkomen.

3. Ontwerp (W2):

   • De briefing vraagt om een dashboard. In je Wireframes teken je dus een scherm met "Welkom Bedrijf X, hier zijn uw vacatures".

4. Keuzes verantwoorden:

   • Als de examencommissie vraagt: "Waarom heb je PHP gebruikt?", zeg je: "Dat was een expliciete eis van de klant in de briefing (punt 5)." Dit toont aan dat je klantgericht werkt.