MEAN Stack Todo Application

The third weekend challenge for Prime Digital Academy was to create a todo application using AngularJS and the MEAN stack. The application uses a MongoDB database to store a collection of all todos. A new todo may be added by inputting text as well as a category. The new todo is then stored on the database and appended to the list of todos stored in the AngularJS controller and rendered by AngularJS. Each todo in the list may be completed or deleted, and these state changes are automatically reflected in the database.

Optional stretch goals that were implemented as part of this project were the ability to filter the displayed list of todos by the todo category, a todo delete confirmation modal using Sweetalert, simple input validation upon submit, and the use of Bootstrap CSS. I also implemented a custom-made checkbox as well as limited CSS animations via ngAnimate.

Built With

MongoDB, AngularJS, Express, Node.js, Sweetalert

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installing

Steps to get the development environment running.

1. Download this project.
2. npm install
3. npm start

Checklist

This was how I scoped out the assignment into major tasks and subtasks.

• Determine the Schema of the todo for MongoDB
• Configure todos.router.js with the appropriate schema and model for todos
• Setup AngularJS app
• It should be able to display all todos
  • make function to get all todos
    • make HTTP GET request for all todos
    • write todos GET route in todos.router.js
      • successfully get all todos from database
    • store todos from database in controller array
  • show all todos with ng-repeat on the DOM (unordered list)
• It should be able to add a new todo
  • create HTML form
    • Input field for todo text
    • Submit button
    • submit event should trigger submit handler function
  • submit handler function should trigger HTTP POST request
    • write todos POST route in todos.router.js
      • successfully get data from POST request
      • save POST data to database
  • get all todos after successfully adding new todo
• It should be able to 'Complete' and 'Delete' each todo
  • add Complete and Delete buttons to each list item
  • Implement Complete
    • clicking the Complete button should call completeTodo function, passing in the todo ID
    • completeTodo function should start HTTP PUT request
      • completeTodo PUT request should pass the ID to the server as data
    • server should have a route for /todos PUT request
      • get the right todo from the database by id
      • change the todo.completed to true
      • save the todo back in the database
    • upon todo PUT success, get all todos
    • completed todos should add "completed" class (ng-class)
  • Implement Delete (largely the same process and implementing the complete feature)

Stretch Goals

• add Bootstrap to the page
• create a confirmation prompt upon todo delete
• move inputs into form with ng-submit
• add input validation to form
• add category field to form
  • allow user to filter by category
• have completed tasks be brought to bottom of page