A web application that implements RESTful routing to maintain your Blogs. You can create/edit/delete/update your blog whenever you wish to, on the click of a button.

This application presents an interface to view all your blogs. It is integrated with a database to maintain all of them at a single place. While presently it is a single-user application, I am thinking of expanding it to accommodate multiple users.

image1

image2

Tech Stack

The front-end is made using the simple yet elegant features provided through Semantic UI. The backend has been created in Node.js using the Express framework. The database has been created using MongoDB.

Implementation

  • The Feed

This page shows a collection of all the saved blogs. It is implemented using the .find() method on the database and sending all the rendered blogs to index.ejs file. Inside the ejs file, all the blogs are displayed by looping through the collection once. The page is, therefore, dynamically created based on the number of blogs saved in the database.

app.get("/blogs", function(req, res) {
	Blog.find({}, function(err, blogs) {
		if(err) {
			console.log(err);
		} else {
			res.render("index", {blogs: blogs});
		}
	});
});

This page also contains the button for New Post, which takes the user to another page where the required information to create a new blog is asked to enter.

  • The Show Page

This page is to display each blog when a user clicks on the Read More button. We find the blog using its id, and then send it to the show.ejs file. This file then displays the Blog.

app.get("/blogs/:id", function(req, res) {
	Blog.findById(req.params.id, function(err, blog) {
		if(err) {
			res.redirect("/blogs");
		} else {
			// res.send("SHOW PAGE");
			res.render("show", {blog: blog});
		}
	});
});

This page also contains the buttons to Edit or Delete the blog, which in turn calls the put and delete route respectively. On clicking Edit, the website takes the user to an edit page that contains the previous information saved for that blog. The user can edit this information to safely update their Blog.
On clicking Delete, the blog is removed from the database collection using the findByIdAndRemove method of mongoose.

Demo

🌒 Click here for the Live Demo.