Todo Web App Using a MEAN Fullstack

Before we start to code let us first understand a few things.

So what is MEAN ?

So, basically MEAN stands for MongoDB, Express, AngularJS, and NodeJS.

Now the question is, what are these?

  

   

Now we will use these amazing fullstack Javascript frameworks to build a Todo Web Application.

Let us now see which version we will be using for this tutorial.

Instruction

  • Clone the project: https://github.com/amitsin6h/todo-mean-app/
  • Cloud9 with blank Ubuntu project

     

Step 1

Let’s start first with installing Nodejs.

To build our project we need to install Nodejs . Let’s see how to do that below.

Type the below command in the terminal to install nodejs

 

  • $ sudo –s
  • $ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
  • $ sudo apt-get install nodejs
  • $ exit

 

Once the installation process is done we can check our nodejs version using the below command.

$ node –v (display the node version)

We can also check our npm  (Node Package Manager) version using the below command.

$ npm –v (display the npm version)

Node Package Manager is basically used to build projects and to download nodejs library. 

Once done, we can now move to Step 2.

Step 2

Installing  MongoDB.


To install MongoDB we need to run the below command.

 

  1. $ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv   2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5
  2. $ echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.6 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.6.list
  3. $ sudo apt-get update
  4. $ sudo apt-get install -y mongodb-org

 

Once we install our MongoDB, now we are ready for Step 3.

Step 3

Building our project. To build use the below command

  • First create a separate directory for your project, in our case it is [todo]
  • Run $ npm init command it will ask few things related to project like version and will create pacakage.json for the project .

Step 4

Installing Express. We can install express using the below command.

$ npm install express –save

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

Our Complete Project Structure

Step 5

Starting our Nodejs Server.

Lets first create server.js file inside todo folder

todo/server.js

  1. //calling express library  
  2. var express = require('express');  
  3. var app = express();  
  4.   
  5. //GET request   
  6. app.get('/'function(req, res){  
  7.     res.send('<h1>Welcome to Todo Web Application!!');  
  8. });  
  9.   
  10. app.listen('8080'function(){  
  11.     console.log('Server Running!!');  
  12. });  

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

$ noder server.js

Wooo!! Server Running :)

Now to access our application we need to follow the guide shown in the below image.

Now we will build our application frontend using Angularjs.

Step 6 - Creating Our Frontend

Before we build our front end let's create a folder named [app] inside the todo folder where we will store our frontend files and then we will see how to connect our fronted with the server.

Now  let’s start building our frontend using Angularjs.

todo/app/index.html

  1. <!doctype html>  
  2. <html lang="en" ng-app="todoApp">  
  3.   <head>  
  4.     <!-- Required meta tags -->  
  5.     <meta charset="utf-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
  7.   
  8.     <!-- Bootstrap CSS -->  
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  
  10.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
  11.     <script type="text/javascript" src="app/app.js"></script>  
  12.       
  13.     <title>Todo App | MEANjs</title>  
  14.     <style type="text/css">  
  15.         .bg-hackclub{  
  16.             background: #F34C5E;  
  17.             color: #fff;  
  18.         }  
  19.     </style>  
  20.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />  
  21.   </head>  
  22.   <body>  
  23.     <div class="jumbotron jumbotron-fluid bg-hackclub">  
  24.       <div class="container">  
  25.         <h1 class="display-4">Todo App</h1>  
  26.         <p class="lead">This is MEANjs built in web application for Hack Club.</p>  
  27.       </div>  
  28.     </div>  
  29.       
  30.     <div class="container">  
  31.         <div class="row" ng-controller="createTodoController">  
  32.           <div class="col-md-6 offset-md-2">  
  33.             <div class="input-group input-group-lg">  
  34.               <input  type="text" ng-model="todo.task" class="form-control" placeholder="Write your daily task here....." aria-label="Large" aria-describedby="inputGroup-sizing-sm">  
  35.             </div>  
  36.           </div>  
  37.             
  38.           <div class="col-sm-3">  
  39.             <button type="button" ng-click="createTodo()" class="btn btn-outline-info btn-lg" >Add Task</button>  
  40.           </div>  
  41.         </div>  
  42.         <hr>  
  43.         <div ng-controller="myCtrl">  
  44.              
  45.             <div class="row" ng-repeat="task in tasks.data">  
  46.               <div class="col-md-7 offset-md-2">  
  47.                 <div class="input-group mb-3">  
  48.                   <div class="input-group-prepend">  
  49.                     <div class="input-group-text">  
  50.                       <input type="checkbox" aria-label="Checkbox for following text input">  
  51.                     </div>  
  52.                   </div>  
  53.                    <h1 class="form-control">{{task.task}}</h1>  
  54.                       
  55.                   <div class="input-group-append">  
  56.                     <div class="input-group-text bg-danger" ng-click="deleteTask(task._id)">  
  57.                       <i class="fa fa-trash-o text-white"></i>  
  58.                     </div>  
  59.                   </div>  
  60.                 </div>  
  61.               </div>  
  62.             </div>      
  63.           </div>  
  64.       </div>  
  65.     </div>  
  66.   </div>  
  67.   
  68.     <!-- Optional JavaScript -->  
  69.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->  
  70.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>  
  71.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>  
  72.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  
  73.   </body>  
  74. </html>  

Create an app.js file to load our angularjs components.

todo/app/app.js

  1. var app = angular.module('todoApp', []);  
  2. app.controller('createTodoController'function($scope,$http) {  
  3.    $scope.createTodo = function(){  
  4.        //console.log($scope.todo);  
  5.        $http.post('api/create/todo', $scope.todo)  
  6.         .then(function(success){  
  7.             //success callback  
  8.             console.log($scope.todo);  
  9.             console.log(success.status);  
  10.         }, function(error){  
  11.             //error callback  
  12.             console.log(error.status);  
  13.               
  14.         });  
  15.    }  
  16.      
  17. });  
  18. app.controller("myCtrl"function($scope, $http) {  
  19.       
  20.     $http.get("api/get/tasks")  
  21.         .then(function (tasks) {  
  22.             $scope.tasks = tasks;  
  23.             //console.log(tasks);  
  24.         });     
  25.       
  26.     $scope.deleteTask = deleteTask;  
  27.       
  28.     function deleteTask(taskId) {  
  29.         $http.delete("/api/delete/task/"+taskId)  
  30.             .then(function(){  
  31.                 //success callback  
  32.                 console.log('success');  
  33.                   
  34.             },function(error){  
  35.                 //error callback  
  36.                 console.log('Error');  
  37.         });  
  38.     }             
  39. });  

Step 7

Let’s create our Database.


For creating a database using MongoDB first we need to run our MongoDB server using the below command

$ mongod

Once we see our server is running now we are required to create database. So quickly move into a new terminal tab and run the below command for creating a database  using MongoDB.

 

  • $ mongo
  • $ use todo

 

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

Note

Don’t stop the MongoDB server otherwise it won’t get connected with our MEANjs application. 

Step 8 - Connecting to MongoDB

To connect first we need to call the mongodb library used by the express.

So let's install the mongoose library

$ npm install mongoose –save

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

Step 9

Installing Body-Parser to parse middleware.

Use the below command to install.

$ npm install body-parser --save

Step 10

Working with Backend.

Now we will work with our server.js file.

In this file we will do the following things.

  • Connection request to mongodb
  • Create Model to store our daily task
  • Work HTTP GET, POST and DELETE method
  • Configure our app to use stactic files and body-parser

Todo/server.js

  1. //calling express library  
  2. var express = require('express');  
  3. var app = express();  
  4. var bodyparser = require('body-parser');  
  5. var mongoose = require('mongoose');  
  6.   
  7. //connecting to MongoDB  
  8. mongoose.connect('mongodb://127.0.0.1:27017/todo');  
  9.   
  10. //creating model  
  11. var TaskSchema = mongoose.Schema({  
  12.     task: {type:String}  
  13. }, {collection: 'task'});  
  14.   
  15. var TaskModel = mongoose.model("TaskModel", TaskSchema);  
  16.   
  17. //configure app  
  18. app.use('/app', express.static(__dirname + '/app')); //use static file  
  19. app.use(bodyparser.json()); // for parsing application/json  
  20. app.use(bodyparser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded  
  21.   
  22. //GET request   
  23. app.get('/'function(req, res){  
  24.     res.sendfile('app/index.html');  
  25. });  
  26.   
  27. //POST request to save todo task in database  
  28. app.post("/api/create/todo", createTodo);  
  29. function createTodo(req, res) {  
  30.     var todoTask = req.body;  
  31.     //console.log(todoTask);  
  32.       
  33.     //save the todoTask in db  
  34.     TaskModel  
  35.         .create(todoTask)  
  36.         .then(  
  37.             function (success) {  
  38.                 console.log('Success');  
  39.             },  
  40.             function (error) {  
  41.                 console.log('Error');  
  42.             }  
  43.         )  
  44.       
  45.     res.json(todoTask);  
  46. }  
  47. //GET all task  
  48. app.get("/api/get/tasks", getAllTasks);  
  49. function getAllTasks(req, res) {  
  50.     TaskModel  
  51.     .find()  
  52.     .then(  
  53.         function (tasks) {  
  54.             res.json(tasks);  
  55.         },  
  56.         function (err) {  
  57.             res.sendStatus(400);  
  58.         });  
  59. }  
  60.   
  61. //DELETE task  
  62. app.delete("/api/delete/task/:id", deleteTask);  
  63. function deleteTask(req, res) {  
  64.     var taskId = req.params.id;  
  65.     //console.log(taskId);  
  66.     TaskModel  
  67.     .remove({_id: mongoose.Types.ObjectId(taskId)})  
  68.         .then(function () {  
  69.             res.sendStatus(200);  
  70.         },  
  71.         function () {  
  72.             res.sendStatus(400)  
  73.         });  
  74. }  
  75. app.listen('8080'function(){  
  76.     console.log('Server Running!!');  
  77. });  

Step 11

Now let’s run our Todo MEANjs Application.

To run we know which command we have to use

$ node server.js

Now create task, check the completed task and delete.


Thank You!!