
Cursus MEAN Stack: Real-time Trello-kloon bouwen
Bouw een productieklare Trello-kloon van de grond af met behulp van de volledige MEAN-stack — MongoDB, Express, Angular en Node.js. Beheers real-time samenwerking met Socket.IO, beveiligde authenticatie met JWT en schaalbaar statusbeheer met NgRx. Lever een live, gecontaineriseerde applicatie op die je aan elke werkgever kunt tonen.
Wat je gaat leren:
Bouw een volledig functioneel Kanban-bord met drag-and-drop-kaartbeheer over lijsten heen.
Configureer een monorepo-projectstructuur met gedeelde TypeScript-instellingen voor client en server.
Implementeer JWT-gebaseerde authenticatie met op rollen gebaseerde toegangsbeheersing voor bordleden.
Integreer Socket.IO om live bordupdates uit te zenden naar meerdere verbonden gebruikers.
Beheer complexe applicatiestatus voorspelbaar met behulp van NgRx store, actions en effects.
Containeriseer en implementeer de complete MEAN-stackapplicatie met behulp van Docker en GitHub Actions.
Hoe je praktisch studeert Cursus MEAN Stack: Real-time Trello-kloon bouwen
Hoe je oefent Cursus MEAN Stack: Real-time Trello-kloon bouwen
Voor bedrijven die hun team willen trainen
Bij Dedika voor bedrijven bevat de cursus oefeningen en voorbeelden die zijn afgestemd op jouw organisatie en precies zoals jouw bedrijf het nodig heeft.
Cursusinhoud
8 Hoofdstukken • 37 LessenDuur tussen 4 en 360 uren (jij beslist)
Hoofdstuk 1VerbergenVerberg detailsBekijk detailsMEAN-stack fundamenten en projectopzet
MEAN-stack fundamenten en projectopzet
Les 1 • Het opzetten van de monorepo-projectstructuur
Maakt aparte client- en server-mappen aan binnen één enkele repository. Stelt de mapconventies vast die gedurende de hele cursus worden gebruikt.
Les 2 • De MEAN-stack architectuur begrijpen
Behandelt de rollen van MongoDB, Express, Angular en Node.js en hoe ze met elkaar verbonden zijn. Biedt het mentale model dat nodig is voordat er code wordt geschreven.
Les 3 • Omgevingsvariabelen en configuratiebeheer
Introduceert dotenv voor geheimen en omgevingsspecifieke instellingen. Voorkomt dat hardgecodeerde inloggegevens in de broncodebeheer terechtkomen.
Les 4 • Ontwikkeltools installeren en configureren
Installeert Node.js, Angular CLI, MongoDB en VS Code met essentiële extensies. Zorgt voor een consistente omgeving in alle volgende hoofdstukken.
Hoofdstuk 2VerbergenVerberg detailsBekijk detailsMongoDB-gegevensmodellering voor een Kanban-bord
MongoDB-gegevensmodellering voor een Kanban-bord
Les 1 • Schemavalidatie en middleware-hooks
Voegt Mongoose-validators en pre/post-hooks toe om bedrijfsregels op modelniveau af te dwingen. Vermindert ongeldige gegevens voordat deze de database bereiken.
Les 2 • Bord-, lijst- en kaartschema's ontwerpen
Maakt Mongoose-schema's voor de drie kerndomeinen Trello-entiteiten met getypeerde velden. Stelt de gegevenscontracten vast die door elk API-endpoint worden verbruikt.
Les 3 • Indexering en query-optimalisatie
Past samengestelde en enkelveldsindexen toe om snelle bord- en kaartopzoekingen te ondersteunen. Bereidt de database voor op real-time query-belastingen.
Les 4 • Relationele versus documentgegevensmodellering
Contrast tussen SQL-normalisatie en MongoDB-embedding- en referentiestrategieën. Plaatst de ontwerpbeslissingen die in dit hoofdstuk worden genomen in een kader.
Hoofdstuk 3VerbergenVerberg detailsBekijk detailsDe Express REST-API bouwen
De Express REST-API bouwen
Les 1 • API-testen met Postman en Jest
Test alle endpoints handmatig in Postman en automatiseer ze met Jest en Supertest. Valideert de API-correctheid voordat de frontend-integratie plaatsvindt.
Les 2 • CRUD-endpoints voor borden, lijsten en kaarten
Bouwt RESTful endpoints voor aanmaken, lezen, bijwerken en verwijderen voor alle drie de entiteiten. Verbindt controllers met Mongoose-modellen uit hoofdstuk 2.
Les 3 • Invoervalidatie met Express-Validator
Valideert en saniteert inkomende verzoeklichamen voordat ze de database bereiken. Voorkomt misvormde gegevens en injectiepogingen aan de API-grens.
Les 4 • Express-applicatiestructuur en routing
Organiseert routes, controllers en services in een gelaagde architectuur. Houdt zorgen gescheiden voor onderhoudbaarheid naarmate de API groeit.
Les 5 • Globale middleware en foutafhandeling
Voegt verzoeklogboekregistratie, JSON-parsing, CORS en een gecentraliseerde foutafhandelaar toe. Zorgt voor consistente API-reacties en eenvoudiger debuggen.
Hoofdstuk 4VerbergenVerberg detailsBekijk detailsJWT-authenticatie en -autorisatie
JWT-authenticatie en -autorisatie
Les 1 • Registratie- en inlog-endpoints
Bouwt /auth/register- en /auth/login-routes die bij succes ondertekende JWTs retourneren. Verbindt gebruikersaanmaak en inloggegevensverificatie met de tokenlevenscyclus.
Les 2 • JWT-middleware en routebeveiliging
Maakt een Express-middleware die tokens verifieert en de gebruiker aan het verzoek koppelt. Beveiligt alle bord-, lijst- en kaartroutes tegen niet-geauthenticeerde toegang.
Les 3 • Gebruikersschema en wachtwoordhashing
Maakt het Mongoose-gebruikersmodel en hasht wachtwoorden met bcrypt voordat ze worden opgeslagen. Legt de veilige basis voor inloggegevens voor alle authenticatiestromen.
Les 4 • Rolgebaseerde toegangscontrole voor borden
Voegt eigenaars- en ledenrollen toe aan borden en dwingt machtigingen af in controllers. Voorkomt dat niet-geautoriseerde gebruikers borden wijzigen waarvan ze geen eigenaar zijn.
Hoofdstuk 5VerbergenVerberg detailsBekijk detailsAngular frontend-architectuur en routing
Angular frontend-architectuur en routing
Les 1 • Statusbeheer met NgRx
Introduceert NgRx store, acties, reducers en effects voor het beheer van bord- en kaartstatus. Biedt een voorspelbare statuscontainer voor real-time updates.
Les 2 • Angular-module- en featuremodule-ontwerp
Organiseert de app in kern-, gedeelde- en featuremodules volgens Angular-best practices. Verkleint de bundelgrootte en verbetert de vindbaarheid van code.
Les 3 • HTTP-client en interceptors
Stelt HttpClientModule in en een interceptor die JWT-headers aan elk verzoek toevoegt. Centraliseert de injectie van authenticatietokens over alle API-aanroepen.
Les 4 • Auth-guards en routebeveiliging
Implementeert CanActivate-guards die niet-geauthenticeerde gebruikers omleiden naar de inlogpagina. Weerspiegelt de backend-autorisatielaag aan de clientzijde.
Les 5 • Lui geladen routingconfiguratie
Configureert de Angular Router met lui geladen routes voor borden, authenticatie en dashboard. Verbeterd de initiële laadprestatie door de bundel te splitsen.
Hoofdstuk 6VerbergenVerberg detailsBekijk detailsDe Kanban-bord UI-componenten bouwen
De Kanban-bord UI-componenten bouwen
Les 1 • Reactieve formulieren en validatie
Implementeert Angular Reactive Forms voor alle aanmaak- en bewerkingsformulieren met client-side validatie. Weerspiegelt server-side validatieregels voor een consistente gebruikerservaring.
Les 2 • Slepen en neerzetten met Angular CDK
Integreert Angular CDK DragDrop om kaarten binnen en tussen lijsten te kunnen herschikken. Verzendt herschikkingsacties naar NgRx en synchroniseert met de backend.
Les 3 • Borddashboard- en navigatiecomponenten
Bouwt het startdashboard met een lijst van alle gebruikersborden en een navigatiebalk bovenaan. Verbindt componenten met NgRx-selectors en bord-API-aanroepen.
Les 4 • Bordweergave met lijsten en kaarten
Geeft een enkel bord weer met zijn lijsten en kaarten in een horizontale, schuifbare lay-out. Haalt bordgegevens op uit de NgRx-store en normaliseert deze.
Les 5 • Kaartdetailmodaal en bewerken
Maakt een modaal dialoogvenster voor het bekijken en bewerken van kaartdetails, inclusief beschrijving en labels. Slaat wijzigingen op via PATCH-API-aanroepen en NgRx-effects.
Hoofdstuk 7VerbergenVerberg detailsBekijk detailsReal-time functies met Socket.IO
Real-time functies met Socket.IO
Les 1 • NgRx-store bijwerken vanuit socketgebeurtenissen
Verzendt NgRx-acties vanuit socketgebeurtenisabonnementen om de bordstatus in real-time bij te werken. Voegt REST- en WebSocket-gegevensstromen samen in één enkele statusbron.
Les 2 • Gebeurtenissen uitzenden vanuit API-endpoints
Activeert socketuitzendingen vanuit Express-controllers na succesvolle databaseschrijfbewerkingen. Houdt REST- en WebSocket-lagen gesynchroniseerd bij elke mutatie.
Les 3 • Socket.IO-server opzetten en namespaces
Koppelt Socket.IO aan de bestaande Express HTTP-server en definieert bordgebonden namespaces. Isoleert real-time gebeurtenissen per bord voor efficiënte uitzending.
Les 4 • Aanwezigheidsindicatoren en live cursors
Toont welke gebruikers momenteel een bord bekijken met behulp van aanwezigheidsgebeurtenissen en avatarindicatoren. Voegt collaboratief bewustzijn toe zonder de hoofdgegevensstroom te blokkeren.
Les 5 • Angular-socketservice en RxJS-integratie
Maakt een Angular-service die Socket.IO-client inpakt en gebeurtenisstromen als Observables blootstelt. Maakt reactieve abonnementen op real-time bordgebeurtenissen mogelijk.
Hoofdstuk 8VerbergenVerberg detailsBekijk detailsImplementatie, prestaties en productiegereedheid
Implementatie, prestaties en productiegereedheid
Les 1 • Logboekregistratie, monitoring en foutopsporing
Integreert gestructureerde logboekregistratie, uptimemonitoring en een frontend-foutopsporing in productie. Biedt inzicht in storingen voordat gebruikers ze melden.
Les 2 • De MEAN-stack-applicatie dockeriseren
Schrijft Dockerfiles voor de Angular-build en Express-server en composeert ze met MongoDB. Produceert reproduceerbare containerimages voor elk implementatiedoel.
Les 3 • CI/CD-pipeline met GitHub Actions
Automatiseert linting, testen, bouwen en pushen van Docker-images bij elke pull request. Vermindert handmatige implementatiestappen en vangt regressies vroegtijdig op.
Les 4 • Cloudimplementatie en omgevingsconfiguratie
Implementeert containers naar een cloudplatform en configureert productieomgevingsvariabelen. Maakt de applicatie openbaar toegankelijk met een beheerde databaseverbinding.
Les 5 • Angular-buildoptimalisatie
Past productie-buildvlaggen, lazy loading en bundelanalyse toe om de payloadgrootte te minimaliseren. Verbetert de time-to-interactive voor eindgebruikers op alle apparaten.
Jouw geldig certificaat van voltooiing
Deze cursus is voor jou:
Junior JavaScript-ontwikkelaar: klaar om verder te gaan dan kleine tutorialoefeningen.
Frontend-ontwikkelaar: wil ook de backend- en databaselagen beheersen.
Carrièreswitcher: heeft basis programmeervaardigheden en heeft een visitekaartje voor in de portfolio nodig.
Computerwetenschapsstudent: wil klassikale theorie toepassen op een echt product.
Freelance webontwikkelaar: moet klanten een moderne, full-stack oplossing kunnen bieden.
Backend-ontwikkelaar: wil praktijkervaring opdoen met het bouwen van reactieve Angular-interfaces.
Wat onze studenten zeggen
Jullie lessen zijn perfect. Ik heb het jaarpakket aangeschaft en heb eindelijk de mogelijkheid om verschillende onderwerpen die mij interesseren te volgen zonder van platform te hoeven wisselen... bedankt voor alles wat jullie doen, ik heb jullie al aan anderen aanbevolen...

Ik vind het fijn hoe de lessen direct ter zake zijn en hoe ik tussen hoofdstukken kan wisselen en content kan overslaan die ik niet nodig heb.

Ik vind de content en de manier van presenteren en transcriptie van video's geweldig, wat het proces versnelt!

Het platform is snel en eenvoudig te gebruiken. De diversiteit aan content en de aanvullende video's helpen enorm bij het leren.

Belangrijkste opleidingen
FAQ
Wie is Dedika?
Is het certificaat geldig in Nederland?
Zijn de cursussen gratis?
Wat is de studielast van de cursus?
Hoe zien de cursussen eruit?
Hoe werken de cursussen?
Wat is de duur van de cursussen?
Wat zijn de kosten of prijzen van de cursussen?
Wat is een EAD- of online cursus en hoe werkt het?
PDF-cursus




















