Blog Web App with MongoDB and Pug

Notes from the COMP3011 Web App Frameworks assignment 2.

Overview

💻 Check out the code on GitHub

This is a full-stack blog management system built with Node.js and Express.js for the backend, uses MongoDB with Mongoose for data modeling, incorporates Pug for server-side rendering, styled with Bootstrap 5, and implements Joi for robust input validation.

Users can register, log in, create, edit, and delete blog posts. Only the author (or an admin) can modify their own posts. Blog posts are searchable by title or tags.

Tech Stack

• Backend: Node.js, Express.js
• Frontend: Pug templating engine + Bootstrap 5
• Database: MongoDB with Mongoose
• Authentication: Passport.js (Local Strategy)
• Validation: Joi
• Session Management: express-session + connect-flash

Thought process and approach

From the beginning, I aimed to build a clean, modular web application following industry-standard practices. I adopted the MVC (Model-View-Controller) pattern to separate concerns between routing logic, business logic, and presentation.

1. User Flow Planning
   I first designed the key user flows: registration, login, and blog management (CRUD operations). This helped define which routes, views, and controllers were necessary.

2. Folder Structure
   To ensure scalability, I structured the project into separate directories. Keeping logic organized helped me troubleshoot and build faster.

3. Session and Auth Setup
   Passport Local Strategy was used with bcrypt and express-session. Flash messages provided feedback for login and form validation errors.

4. Post Access Control
   A middleware checks if the currently logged-in user is the post’s author or an admin.

5. Search Functionality
   Posts are searchable using case-insensitive $regex on both title and tags via query parameters.

Key learnings

• Express.js Routing and Middleware: Gained confidence writing modular routes and using middleware for validation and authorization.
• MongoDB and Mongoose: Practiced defining relationships and using queries like .find(), .populate(), .deleteOne().
• Pug Templating: Used layout inheritance with extends and block to reuse layout and dynamically render data.
• Bootstrap Integration: Achieved responsive design with Bootstrap 5.
• Security Concepts: Learned about CSRF protection, hashed sessions, and access control.

Reflection

Previously, I worked on a Django-based web application, which felt beginner-friendly due to its conventions and built-in admin tools. This Express.js project required more configuration and understanding of the backend stack.

JavaScript’s asynchronous nature and callback-heavy logic were initially challenging, but I adapted quickly using async/await. Building this from scratch helped solidify my backend knowledge and MVC design skills.

This was my first real step into full-stack JavaScript development, and it was a steep learning curve, but also a very satisfying one. This project gave me the confidence to explore more backend technologies and sharpen my full-stack development skills. I’m excited to continue learning, particularly about deploying Node.js apps, optimizing performance, and securing APIs at scale.