Build a blog application

A blog combines database models, routes and rendered views. Validate incoming data and escape displayed text rather than treating database persistence as a security boundary.

In this project, you'll build a basic Blog Application using Node.js, Express, and MongoDB via the Mongoose ODM. You'll be able to create, read, and display blog posts dynamically.

Before working through the examples, make sure you can connect with mongosh and select your database. Use a practice database for writes and deletions.

The app will allow users to:

• Create blog posts (title and body)
• Save blog posts in MongoDB
• View all blog posts on a homepage
• View individual blog post details

Folder Structure

    blog-app/
    ├── models/
    │   └── Post.js
    ├── views/
    │   ├── index.ejs
    │   ├── new.ejs
    │   └── show.ejs
    ├── public/
    ├── app.js
    ├── package.json

Step 1: Initialize the App

    mkdir blog-app
    cd blog-app
    npm init -y
    npm install express mongoose ejs body-parser

Step 2: Connect to MongoDB with Mongoose

Create app.js with the following code:

// app.js
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const Post = require("./models/Post");

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");

mongoose.connect("mongodb://localhost:27017/blogApp", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

app.listen(3000, () => {
  console.log("Server started on http://localhost:3000");
});

Q: Why use Mongoose instead of MongoDB native driver?

A: Mongoose provides schema enforcement, easy model creation, and helpful methods that simplify working with MongoDB from Node.js.

Create models/Post.js:

// models/Post.js
const mongoose = require("mongoose");

const postSchema = new mongoose.Schema({
  title: String,
  body: String,
  createdAt: { type: Date, default: Date.now },
});

module.exports = mongoose.model("Post", postSchema);

    Post model created with schema: title, body, createdAt

Step 4: Set Up Routes

Add the following routes to app.js to list, create, and show posts:

// app.js (continued)

// Home - list all posts
app.get("/", async (req, res) => {
  const posts = await Post.find().sort({ createdAt: -1 });
  res.render("index", { posts });
});

// Show form to create a post
app.get("/new", (req, res) => {
  res.render("new");
});

// Save post to database
app.post("/posts", async (req, res) => {
  const { title, body } = req.body;
  await Post.create({ title, body });
  res.redirect("/");
});

// Show individual post
app.get("/posts/:id", async (req, res) => {
  const post = await Post.findById(req.params.id);
  res.render("show", { post });
});

views/index.ejs

    <h1>All Blog Posts</h1>
    <a href="/new">Create New Post</a>
    <ul>
      <% posts.forEach(post => { %>
        <li>
          <a href="/posts/<%= post._id %>"><%= post.title %></a>
        </li>
      <% }) %>
    </ul>

views/new.ejs

    <h1>New Blog Post</h1>
    <form method="POST" action="/posts">
      <input name="title" placeholder="Post Title"/><br/>
      <textarea name="body" placeholder="Post Body"></textarea><br/>
      <button type="submit">Create Post</button>
    </form>

views/show.ejs

    <h1><%= post.title %></h1>
    <p><%= post.body %></p>
    <a href="/">Back to Home</a>

Run the App

    node app.js

    Server started on http://localhost:3000

Test the App

• Visit http://localhost:3000 to see all posts
• Click "Create New Post" to add a new one
• Click on any post to see its details

Q: Why use EJS instead of plain HTML?

A: EJS lets you dynamically inject data from your MongoDB database into your HTML templates. It's like templating HTML with logic!

A blog combines database models, routes and rendered views. Validate incoming data and escape displayed text rather than treating database persistence as a security boundary.

Summary

This project taught you how to build a basic blog app using Express, Mongoose, and MongoDB. You learned how to model data, create RESTful routes, render views using EJS, and interact with MongoDB using Mongoose in a beginner-friendly way.

• Choose an application data model