ToDo MEAN.JS Application

Build Todo Web Application using MEAN.JS. Created by Amit Kumar Singh (Hack Club Leader).

Edit on GitHub

ToDo MEAN.JS Application

Short link to this workshop:

What you’ll build
final 2

Here’s a link to the live demo and the final code. This workshop should take around 1-2 hour.

We recommend going through this workshop in Google Chrome or Mozilla Firefox.

About the Application

In this workshop we’ll be creating a ToDo app using MEAN.JS. This ToDo app will have feature like create task and once we complete our task we can delete it.

Let’s Start:

Before we start to code lets us first understand few things to get our basics clear.

**So what is MEAN **

So, basically MEAN stands for:

Now the question is what are these:


Cloud9 Blank Project
cloud9 blank project

Table of Contents

Part I: Setting up Node.js

installing nodejs

Part II: Installing MongoDB

installing nodejs

Part III: Building Project

building project

So far our main.js looks like this (your URLs and keys will be different):

Part IV: Installing Express

installing express

Now this will install Express and also add the package in the pacakage.json folder.

Our Complete Project Structure

Complete Project Structure
project structure

Part V: Starting our Node.js Server

Lets first create server.js file inside todo folder


//calling express library
var express = require('express');
var app = express();

//GET request 
app.get('/', function(req, res){
	res.send('<h1>Welcome to Todo Web Application!!');

app.listen('8080', function(){
	console.log('Server Running!!');

Now let’s start our server using the below command.

$ noder server.js

Nice!! Server Running :)

running nodejs

Now to see preview of our application we need to follow the guide shown in the below image.

preview running app

Now we will build our application frontend using AngularJS let see that it Part VI.

Part VI: Creating Frontend using AngularJS


<!doctype html>
<html lang="en" ng-app="todoApp">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src=""></script>
    <script type="text/javascript" src="app/app.js"></script>
    <title>Todo App | MEANjs</title>
    <style type="text/css">
            background: #F34C5E;
            color: #fff;
    <link rel="stylesheet" href="" type="text/css" />
    <div class="jumbotron jumbotron-fluid bg-hackclub">
      <div class="container">
        <h1 class="display-4">Todo App</h1>
        <p class="lead">This is MEANjs built in web application for Hack Club.</p>
    <div class="container">
        <div class="row" ng-controller="createTodoController">
          <div class="col-md-6 offset-md-2">
            <div class="input-group input-group-lg">
              <input  type="text" ng-model="todo.task" class="form-control" placeholder="Write your daily task here....." aria-label="Large" aria-describedby="inputGroup-sizing-sm">
          <div class="col-sm-3">
            <button type="button" ng-click="createTodo()" class="btn btn-outline-info btn-lg" >Add Task</button>
        <div ng-controller="myCtrl">
            <div class="row" ng-repeat="task in">
              <div class="col-md-7 offset-md-2">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <div class="input-group-text">
                      <input type="checkbox" aria-label="Checkbox for following text input">
                   <h1 class="form-control">{{task.task}}</h1>
                  <div class="input-group-append">
                    <div class="input-group-text bg-danger" ng-click="deleteTask(task._id)">
                      <i class="fa fa-trash-o text-white"></i>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Creating app.js file to load our AngularJS components. todo/app/app.js

var app = angular.module('todoApp', []);

app.controller('createTodoController', function($scope,$http) {
   $scope.createTodo = function(){
       $'api/create/todo', $scope.todo)
            //success callback
        }, function(error){
            //error callback


app.controller("myCtrl", function($scope, $http) {
		.then(function (tasks) {
			$scope.tasks = tasks;
    $scope.deleteTask = deleteTask;
    function deleteTask(taskId) {
			    //success callback
				//error callback


You all can also uncomment console.log() to see how the data gets send or received.

Part VII: Creating Our Database

$ mongod


$ mongo
$ use todo

use todo

Once we are done now we need to connect our MongoDB with our MEAN.JS application.

Note: Don’t stop the MongoDB server else It won’t get connected with our MEAN.JS application.

Part VIII: Connecting to MongoDB

$ npm install mongoose –save

This will install mongoose and will add it in the package.json file.

Part IX: Installing Body-Parser

We will be using Body-Parser to parse middleware.

$ npm install body-parser --save

Part X: Working with Backend

Now we will work with our server.js file.

In this file we will do the following things.


//calling express library
var express = require('express');
var app = express();
var bodyparser = require('body-parser');
var mongoose = require('mongoose');
//connecting to MongoDB

//creating model
var TaskSchema = mongoose.Schema({
	task: {type:String}
}, {collection: 'task'});

var TaskModel = mongoose.model("TaskModel", TaskSchema);

//configure app
app.use('/app', express.static(__dirname + '/app')); //use static file
app.use(bodyparser.json()); // for parsing application/json
app.use(bodyparser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

//GET request 
app.get('/', function(req, res){

//POST request to save todo task in database"/api/create/todo", createTodo);
function createTodo(req, res) {
	var todoTask = req.body;
	//save the todoTask in db
			function (success) {
			function (error) {

//GET all task
app.get("/api/get/tasks", getAllTasks);
function getAllTasks(req, res) {
		function (tasks) {
		function (err) {

//DELETE task
app.delete("/api/delete/task/:id", deleteTask);
function deleteTask(req, res) {
	var taskId =;
	.remove({_id: mongoose.Types.ObjectId(taskId)})
		.then(function () {
		function () {

app.listen('8080', function(){
	console.log('Server Running!!');

Part XI: Now let’s run our final application

Now we will run our final ToDo MEAN.JS application.

To run we know which command, we have to use

$ node server.js

final 1

final 2

Now create task, check the completed task and delete.

Happy Hacking!!

Made something rad?

Share it! 🌟

(posts are editable)