Crio Projects - ToDo Web App | Crio.Do | Project-Based Learning Platform for Developers

Objective

You will implement the backend of a simple web application where you can create, edit, delete ToDo lists. This is a basic backend project for CRUD-based projects built with Adonis.js, a modern Node.js MVC framework. After completion of the project, you will learn the essential fundamentals of CRUD applications, REST API and MVC design pattern. You will also get well-versed with ES6 Javascript and Adonis.js framework by implementing this project.

Project Context

Day by day, the tech-stacks are evolving. Currently, one of the best frameworks for backend development is Adonis.js which uses MVC design patterns. Here you will be learning the basics of this framework while building the backend of ToDo web application. Also, you will be learning how backends can be developed independent of the frontend for any full-stack application with help of REST API. Building a UI (User Interface) for this particular application is beyond the scope of this project and Though we will keep features at a basic level, you are welcome to add more features & make your ToDo backend more dynamic.


The main context of this project is to learn building the backend for any API driven CRUD application using modern Node.js frameworks.


This project is a good challenge for beginners and the perfect exercise for professionals who have dabbled in Node.js/Javascript frameworks before. The experience of using Adonis.js will be challenging as it would involve a lot of research and learning but in turn will be helpful in mastering the other frameworks easily, so keep exploring!

Project Stages

The product Architecture can be divided into 5 stages as follows:

  • Design the database schema
  • Create models which will communicate with the database
  • Create controllers to handle requests and responses
  • Create route files to steer the endpoint requests to correct controllers.
  • Test the APIs with any API client tester to check whether the APIs are working or not

A flowchart of the above sequence of implementation is as follows:

product_architecture

High-Level Approach

  • Database Design: For a ToDo web app, there will be different users. Each user will have many projects and each project can have many TODOs. A user should have an email-id (primary key) along with a password as attributes for user account credentials. A project should have an id (primary key), a user-id (foreign key) and title as attributes. A TODO task should have an id (primary key), a project-id (foreign key) and description as attributes. So the Entity Relationship diagram would be like below:

ER_diagram

You must be confused about the extra table named Tokens in the above diagram; we will come to that later while discussing the task modules.

  • Once the database design is ready, write controllers for project and task tables to execute CRUD operations. For the user table, a controller is needed for registration and login purposes only. Once controllers are ready, test the API endpoints with help of Postman (a popular API client testing tool).

Final backend's (of the app) testing -


Primary goals

  • A user should be able to register and login
  • A user may have multiple projects and each project may have multiple Tasks.
  • A particular user should not be able to see other users' projects/Tasks.
  • A user shouldn't be able to see his projects without logging in.
  • A user should have the privilege to create, read, update and delete projects; where for each project's tasks the user should have the privilege to perform similar CRUD operations.
  • While deleting a project all the associated tasks should be deleted from the database.

OVERVIEW

ToDo Web App

View Complete Project