Kies uw taal
Cursus MEAN Stack: Real-time Trello-kloon bouwen
Meer dan 2 miljoen studenten wereldwijd

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.

Dedika voor bedrijven

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.

Klik hier

Cursusinhoud

8 Hoofdstukken • 37 LessenDuur tussen 4 en 360 uren (jij beslist)

Hoofdstuk 1Bekijk details

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 2Bekijk details

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 3Bekijk details

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 4Bekijk details

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 5Bekijk details

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 6Bekijk details

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 7Bekijk details

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 8Bekijk details

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.

Certificering

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...
Giulio Carlo
Giulio CarloStudent Digitale Marketing
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.
Mariana Ferres
Mariana FerresStudent Fotografie
Ik vind de content en de manier van presenteren en transcriptie van video's geweldig, wat het proces versnelt!
Luciana Alvarenga
Luciana AlvarengaStudent Nageldesign
Het platform is snel en eenvoudig te gebruiken. De diversiteit aan content en de aanvullende video's helpen enorm bij het leren.
André Felipe
André FelipeStudent Prompt Engineering

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