Web Development · WDC-58

MEVN Stack

MEVN Stack is a full-stack web development course with MongoDB, Express 5, Vue 3 and Node.js 24, from data design and REST APIs to a Vue front end with Vue Router and Pinia, JWT login and deployment. It suits developers and IT managers with HTML, CSS and JavaScript skills, and you leave able to build and deploy a full-stack web app yourself.

Updated 9 Oct 2026

From 9,900 THB / person 11,000 −10% excl. VAT 7% · group rates available

Corporate training quote Join the waiting list

PDFDownload the course outline

Duration30 hours · 5 days
FormatOnsite / live online
Next roundOn request
CertificateIncluded

Course overview

The MEVN stack is a set of technologies for full-stack web development in a single language, JavaScript. It brings together MongoDB, a NoSQL database that stores data as documents, Express, a framework for building REST APIs on Node.js, and Vue.js, a popular front-end framework that is easy to learn. Every part keeps evolving, for example Express 5 now forwards async errors automatically and Vue 3 uses script setup as its main approach, so developers benefit from learning current practice to build systems that are easy to maintain.

This new edition starts with modern JavaScript and Node.js 24, builds REST APIs with Express 5, MongoDB and Mongoose 9, then creates the front end with Vue 3.5, Vue Router 5 and Pinia 4. It continues with JWT login, security and API testing, and finishes with a workshop that takes a full-stack system from design to deployment with Docker and MongoDB Atlas. (5 days, 6 hours per day, 30 hours in total, Intermediate level.)

What you’ll gain

Understand how the MEVN stack fits together and set up a development environment with Node.js 24 LTS
Use MongoDB and Mongoose 9 to design data and perform CRUD operations
Build RESTful APIs with Express 5, including validation and error handling
Build a front end with Vue 3.5, Vue Router 5 and Pinia 4 connected to REST APIs
Implement JWT authentication and user permissions securely
Develop and deploy a full-stack web application with the MEVN stack on your own

Who this course is for

People who want to build web applications with JavaScript and the MEVN stack
Front-end developers who want to move into back-end and database work
Developers using an older MEVN setup who want to move to current practice
IT managers and team leads who want to understand full-stack development

Prerequisites

Some HTML, CSS and JavaScript
Some experience with a CSS framework such as Bootstrap or Tailwind CSS helps you learn faster
A basic understanding of APIs and using databases

Curriculum

Course Details

This course is the 2026 edition of MEVN Stack 2025, updated for Node.js 24 LTS, Express 5, Mongoose 9, Vue 3.5, Vue Router 5 and Pinia 4. It runs for 5 days, 6 hours per day (30 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Intermediate level. Learners design data in MongoDB, build REST APIs with Express 5, create a Vue 3 front end, implement JWT login, test APIs with Vitest, and develop a full-stack system in a workshop through to deployment with Docker and MongoDB Atlas. They take home the source code for every lab.

Day 1 Getting Started with MEVN, JavaScript and Node.js

Section 1: Lab: The MEVN Stack and Setting Up Tools

How the MEVN stack works together, and what a single-page application is
Install Node.js 24 LTS, npm, VS Code and Git
Run MongoDB 8 with Docker or create a free cluster on MongoDB Atlas
Create a Vue project with npm create vue@latest and run it
Lab: a project skeleton with separate client and server folders

Section 2: Lab: Modern JavaScript for Full Stack

let, const, arrow functions, destructuring and spread
Common array methods for API data
ES modules (import and export) compared with CommonJS (require)
Promises, async/await and error handling
Lab: functions that transform and summarise order data

Section 3: Lab: Node.js 24 Fundamentals

The single thread, the event loop and asynchronous work
The REPL, node:fs/promises, node:path and EventEmitter
Create an HTTP server with the node:http module
Load configuration with --env-file and restart automatically with --watch
Lab: a server that reads a JSON file and serves it as an API

Section 4: Lab: Git and GitHub for Your Project

git init, add, commit and a .gitignore for Node.js projects
Branches and merging work
Add a remote and push to GitHub
Clone a project and reinstall its dependencies
Lab: push the project skeleton to your own GitHub account

Day 2 MongoDB, Mongoose and Express 5

Section 5: Lab: MongoDB Fundamentals

Documents, collections and NoSQL data design
CRUD with mongosh and MongoDB Compass
Queries, projection, sorting and indexes
A first look at the aggregation pipeline for reports
Lab: a products and orders database with a sales report

Section 6: Lab: Express 5

Create a server with Express 5 and organise the folders
Routing, Express Router and the path syntax changes in Express 5
Middleware, express.json and static files
Error middleware and automatic forwarding of async errors
Lab: a products API with separate routers and controllers

Section 7: Lab: Mongoose 9

Connect to MongoDB and manage the connection
Schemas, models, timestamps and schema validation
CRUD with models and query helpers
Relationships with ref and populate
Lab: product, category and user models

Section 8: Lab: RESTful APIs Done Right

Design endpoints and use the correct HTTP status codes
Validate input with Zod and return consistent error formats
Pagination, searching and sorting
Configure CORS so Vue can call the API
Lab: test every endpoint with VS Code REST Client

Day 3 The Front End with Vue 3.5

Section 9: Lab: Getting Started with Vue 3.5

Single-file components and script setup
Template syntax, attribute binding, and class and style binding
Conditional rendering and list rendering
Event handling and forms with v-model
Lab: a product list page with filtering and search

Section 10: Lab: Reactivity and Components

ref, reactive, computed and watch
Components, props and emits
v-model on components with defineModel, and slots
Lay out the UI with Tailwind CSS or Bootstrap
Lab: a set of product card, cart and form components

Section 11: Lab: Vue Router 5

Define routes, RouterLink and RouterView
Dynamic routes, nested routes and query parameters
Navigation guards and lazy-loaded pages
An overview of the file-based routing built into Vue Router 5
Lab: a multi-page app with list, detail and edit pages

Section 12: Lab: Pinia 4 and Composables

Create setup stores with state, getters and actions
Share data between pages without passing props through many levels
Write a composable for API calls and loading state
Inspect state with Vue DevTools
Lab: cart and user stores

Day 4 Connecting the Front End to the API, and Security

Section 13: Lab: Connecting Vue to a REST API

Call APIs with fetch or Axios and set up a proxy in Vite
Show loading, empty and error states
Forms that create, update and delete data through the API
Upload images from Vue to Express
Lab: a product management page with full CRUD

Section 14: Lab: Authentication with JWT

Sign-up and hashing passwords with bcrypt
Log in and issue a JSON Web Token with an expiry time
Middleware that checks tokens in Express
Storing tokens in an httpOnly cookie or a Bearer header, and the trade-offs
Lab: an API for sign-up, login and the user profile

Section 15: Lab: Sessions and Permissions in Vue

An auth store with Pinia and checking status when the app opens
Route guards for pages that need login
Role-based permissions such as admin and user, in both the API and the pages
Handle expired tokens and logging out
Lab: an admin page that only admins can open

Section 16: Lab: Security and API Testing

Helmet, rate limiting and request size limits
Keep secrets in a .env file and hide error details from users
Log requests and errors
Test the API with Vitest and Supertest
Lab: a test suite for login and product CRUD

Day 5 Full-Stack Workshop and Deployment

Section 17: Workshop: Designing the System

Gather requirements for a meeting room booking system or a shop
Design collections and data relationships
List the endpoints and data formats
Plan the Vue screens and user flow
Split the work into Git branches

Section 18: Workshop: Building the Back End and Front End

Create models, routers and controllers as designed
Build the Vue screens with the router and Pinia
Connect CRUD and login to the API
Validate on both sides and show clear error messages
Test the complete user flow

Section 19: Lab: Preparing for Production

Build Vue for production and set the API URL
Separate configuration per environment with environment variables
Write a Dockerfile and Docker Compose for the API
Move the database to MongoDB Atlas and configure access
Lab: run the whole system with Docker locally

Section 20: Workshop: Deploying and Presenting

Deploy the API and front end to Render or a VPS
Configure CORS, HTTPS and the domain correctly
Troubleshoot common deployment problems
Go through the security checklist before going live
Present your work and next steps

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

What makes up the MEVN stack, and what does each part do?

MEVN stands for MongoDB, Express, Vue.js and Node.js. MongoDB is a NoSQL database that stores JSON-like documents, Node.js runs JavaScript on the server, Express is a Node.js framework for building REST APIs, and Vue.js builds single-page applications that call those APIs, with Vue Router handling pages and Pinia handling shared app state. The whole system is written in one language, JavaScript.

What is JWT, and how is it used for authentication in web apps?

A JWT (JSON Web Token) carries user details and an expiry time, signed by the server with a secret key. After a successful login the server issues a JWT, and the Vue app sends it back with every API call, either in an httpOnly cookie or a Bearer Authorization header. Middleware in Express checks the signature and expiry before allowing access. Never put secrets in the token, because its payload can be decoded, and keep token lifetimes reasonably short.

What are the steps to build a REST API with Express and MongoDB?

Create the project with npm init and install Express 5 and Mongoose. Define a schema and model for each collection, create a router per resource and write controllers for GET, POST, PUT and DELETE. Add middleware such as express.json(), validate input with Zod and configure CORS so the Vue app can call the API. In Express 5, errors thrown in async handlers are forwarded to the error middleware automatically. Return the correct HTTP status codes and test each endpoint before connecting the web pages.

Who is the MEVN Stack course for, and what should I know beforehand?

It suits people who want to build web apps with JavaScript and the MEVN stack, front-end developers moving into back-end work, developers on an older MEVN setup who want to move to current practice, and IT managers. You should have some HTML, CSS and JavaScript, understand the basics of APIs and have basic database experience. Some experience with a CSS framework such as Bootstrap or Tailwind CSS helps you learn faster.

What will I be able to do after the MEVN Stack course?

You will be able to design data and perform CRUD in MongoDB with Mongoose 9, build REST APIs with Express 5 and validate input with Zod, build pages with Vue 3.5 components, Vue Router 5 and Pinia 4, connect the pages to the API, implement JWT login and user permissions, test APIs with Vitest, use Git and deploy a full-stack system with Docker and MongoDB Atlas. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

What software do I need for the MEVN Stack course?

You use Node.js 24 LTS and npm, and create Vue projects with npm create vue@latest, which uses Vite. The database is MongoDB on Docker or a free MongoDB Atlas tier with MongoDB Compass. You write code in Visual Studio Code, use Git with a GitHub account for version control, and use Docker Desktop with a free Render account or your own VPS for deployment. Everything is installed and tested together at the start of the training.