Professional Documents
Culture Documents
To Do List Project Report
To Do List Project Report
To Do List Project Report
TABLE OF CONTENTS
2. Certificate 4
3. Acknowledgement 5
4. Abstract 6
- DFD
- ER Diagram
9. Modules 27
11. Coding 40
12. Testing 73
14. References 77
DECLARATION
I, ________________, bearing roll number ____________, hereby declare that the work
I have not submitted the matter presented in this work anywhere for the award of any
other Degree.
Date: ..............................
CERTIFICATE
the requirements for the award of the degree of Bachelor of Computer Applications is a
record of the student’s own work carried out under my supervision and guidance. To the
best of our knowledge, this Minor Project work has not been submitted anywhere for the
It is further understood that by this certificate the undersigned does not endorser approve
of any statement made, opinion expressed or conclusion drawn therein but approve Minor
ACKNOWLEDGEMENT
Many people have supported me, in different ways, during the work with the minor
project. I’d like to thank my guide ………………. & HOD Mr. Lalit Kumar for their
kind and active support and valuable guidance during the work process. My family has,
Minor Project.
However, it would not have been possible without the kind support of many individuals
and institution.
I would like to extend my sincere thanks to each and every members related to MIT (PC).
Student Name:
Roll No.:
ABSTRACT
A to-do list is a list of tasks that need to be completed, typically organized in order
of priority. It is one of the simplest solutions for task management and provides a
minimal and elegant way for managing tasks a person wishes to accomplish.
Our aim is to design a simple and elegant website for people to keep a track of the
status of their tasks. Making a to-do list is an easy and important task that
everyone should do. The immense satisfaction that one gets when completing the
task and marking it on the list are incomparable. Moreover, creating a list of tasks
ensure you don’t miss out on anything. It’s a scientific fact that when you write the
tasks that youneed to complete, you are even more motivated to complete it. With
this in mind, we come to build a platform which will help people create their own
task list.
With the help of modern tools and technologies, we strive to build a minimal and
efficient to-do list which minimizes distractions and helps people achieve task
management with ease and without hassle.
GRAPHICAL ABSTRACT
CHAPTER 1: INTRODUCTION
A to-do list is a simple prioritized list of the tasks a person must complete. People
make a list of everything they need to do, ranked according to priority from the
mostcritical task at the top to the least critical task at the bottom
To-dos are the tasks or the atomic entities that make up a to-do list. To-dos are
made quickly, the bulk of them do not specify the work; instead, they are typically
just comprehensive enough to serve as a valuable indicator. To be sure, to-do
terminologylike "Groceries" or "Car Wash" is frequently grammatically correct.
Because the signal is so quick, it is only useful for a short period of time while the
task is remembered. In certain cases, a simple item like a stack is enough to recall
the job without the need for a note.
The To-do list project is a user-friendly website which helps them to keep a track
details but still records your task, mark the completed tasks, and stores them even
memoryaid. As technology has evolved, we have been able to create a to-do lists
with excel spreadsheets, word documents, to-do list apps, Microsoft to do and
google to do list to name a few. You can use to do list in your home and personal
list and you’ll be able to keep track of everything, rather than just a few
of the tasks you need to do. Your to do list will also reinforce the
are more important. This means you don’t waste time on tasks that don’t
you can use them to clarify your goals. You can divide your long-term goal
into more achievable short-term goals and as you tick each one off your
10
Recent research has begun to address the problem of generic task management in the
context of email. This development is hardly surprising, given that many digital device
users are overloaded by the number of chores done through email. According to this
research, any successful productivity tool must be tightly connected with email
functionalities. Recent researches looked at task management strategies more generally
because email and related technologies are unlikely to be the whole picture.
The concept of to-do list has existed for a very long time and it is one of the
primary methods for management of tasks, use of a to-dos as a reminder system,
to-dos as a system for note management, etc. In the simplest and most primitive
form, a to-do listcan be implemented on a pen and paper as a checklist of items
which can be crossed of or ticked against when completed.
This can be further extended to calendars, by writing tasks against dates where the
dates can also act as deadlines for particular tasks. Other possible extensions of to-
dolists can be on whiteboards, journals, text editors, etc.
The functionalities of to-do lists naturally evolve to perfectly fit web applications
andapplications on digital devices. Equipped with modern tools and technologies,
engineers can build an application to create a minimal and powerful application
that can help boost productivity without loss of focus and attention.
11
With the computing power and persistence of modern devices and databases,
losingtrack of tasks will not be a problem people will have to face anymore and
they can rest assured, only focused on the tasks they will have to accomplish as
with moderntechnology and the power of digital devices, integration will be
seamless and tasks can be synced across multiple devices all at once, without any
hassle.
Essential Functionalities:
12
Table 1.1
13
Fig. 1.1
14
CHAPTER 2: OBJECTIVE
To-do lists offer a way to increase productivity, stopping you from forgetting
things, helps prioritize tasks, manage tasks effectively, use time wisely and
improve time management as well as workflow.
Making a to-do list is an easy and important task that everyone should do. The
immense satisfaction that one gets when completing the task and marking it onthe
list is incomparable. Moreover, creating a list of tasks ensures you don’t miss out
on anything. It’s a scientific fact that when you write the tasks that you need to
complete, you are even more motivated to complete it.
With this in mind, we come to build a platform which will help people create
their own task list. The main goals we hope to accomplish with this project
include:
The primary focus of our application on the user interface aspect is minimalism.
It should only provide the basic functionalities of a to-do list andnot anything
unnecessary as that is a hinderance to focus and productivity of a user.
The to-do list application build for this project is completely free to use to any
and everyone. The only requirement of this application is to have a device
capable of running a web browser.
15
To-do list is open source and its code repository is publicly available on GitHub. It
is open to contributions and improvements by anyone who wishes to contribute to
it. It is also free for modification and personal use.
Open-source software is software with source code that anyone can inspect, modify, and
enhance. "Source code" is the part of software that most computerusers don't ever see; it's
the code computer programmers can manipulate to change how a piece of software—a
"program" or "application"—works.
2.4 AD-FREE
2.5 EFFICIENT
Very few resources are required to store and run the application.
16
CONCLUSION
The to-do list developed for this project is meant to be a minimal, free and
open-source application that can help improve the productivity of a user
without taking anything. It aims to solve at least some of the problems
discussed earlier in this report.
17
REQUIREMENTS
HTML
CSS
Bootstrap
JavaScript
Node.js
Express.js
EJS
MongoDB
Tools/ Platforms:
VS CODE
Web Browser: Microsoft Internet Explorer, Mozilla, Google Chrome or
later
Operating System: Windows/ MacOS/ Linux
Git
Cyclic (for deployment)
18
In order to do manage tasks, the concept of to-do lists was formulated to provide a
simple, hassle-free solution to the problem of taking short notes and recording the
daily tasks that a person needs to complete. We extend this concept and implement
itusing modern tools and technologies.
In order to do manage tasks, the concept of to-do lists was formulated to provide a
simple, hassle-free solution to the problem of taking short notes and recording the
daily tasks that a person needs to complete. We extend this concept and implement
itusing modern tools and technologies.
19
1. ECONOMIC:
To-do list is free to use. However, damage to a device’s software and/or
hardware due to improper modification of this application is always a
possibility.
2. ENVIRONMENTAL:
The use of To-do list does not generate any environmental concerns. The
possible causes ofany problems may be from the hardware not being
disposed properly which would lead to e-waste generation.
3. HEALTH:
There are no health constraints. The only issues and problems that may
arise might be due to the devices and hardware that the user uses. In case
of any such situation or in the event of any problem or emergency in which
the user feels biological discomfort, it is suggested to immediately seek
professional medical assistance.
4. MANUFACTURABILITY:
As To-do list is digital software, there seem to be less issues with
manufacturability.
5. SAFETY:
To-do list it does not guarantee the physical safety of users. In case
of intimidation orunderhanded malicious extortions, it is advised to
seek police aid.
6. PROFESSIONAL:
With the constant development in new technologies revolving around
to-do list applications, new professional services are required to be
20
21
22
• E-mail based reminders can also be seen as alternative design for the project but
were not implemented because they require access to a user’s email and details,
which could possibly risk user anonymity and be a potential securityrisk without
adding proper security middleware to the project.
The final design chosen for the implementation of this project was to divide it
into three main components: the frontend, backend and database. The frontend is
themedium through which the user can interact with the application and utilize the
necessary functionalities of the application.
The backend is a two-way bridge betweenthe database and the frontend. It ensures
security, transfer and integrity of data that flows from the database to the frontend
of the application. The database is basically a store of all the information a user
wishes to persistently store. It is responsible for storage, persistence, integrity and
retrieval of data.
The technologies used for the implementation of this project are : ReactJS for
frontend, Node.js for backend and MongoDB for database as the primary focus of
this project is simplicity.
23
24
Table 4.1
25
26
CHAPTER 5: MODULES
As discussed earlier, productivity and task management entails more than just
organizing virtual and physical collections and scheduling activities.
Recent research has begun to address the problem of generic task management in
the context of email. This development is hardly surprising, given that many
digital device users are overloaded by the number of chores done through email.
According to this research, any successful productivity tool must be tightly
connected with emailfunctionalities. Recent researches looked at task
management strategies more generally because email and related technologies are
unlikely to be the whole picture.
The idea of plan for the day has existed for quite a while and it is one of the
essentialtechniques for the board of assignments, utilization of a tasks as an
update framework, tasks as a framework for note the executives, and so on. In the
least difficult and most crude structure, a plan for the day can be executed on a
pen and paper as an agenda of things which can be crossed of or ticked against
when finished.
27
The functionalities of plans for the day normally develop to fit web applications
and applications on advanced gadgets flawlessly. Furnished with current
apparatuses and advancements, specialists can fabricate an application to make a
negligible and strongapplication that can assist with supporting efficiency without
loss of concentration and consideration.
With the processing power and steadiness of current gadgets and data sets,
forgetting about assignments won't be an issue individuals should confront any
longer and they can have confidence, just centered around the errands they
should achieve similarly as with present day innovation and the force of
advanced gadgets, combination will be consistent and undertakings can be
adjusted across different gadgets at the sametime, with next to no problem.
28
A To-do list is a simple and somewhat independent entity, which makes it easy to
integrate with related technologies to help create a better system of productivity
overall.
Various studies have pointed towards and shed light on how well e-mail as a
technology can be seamlessly integrated with to-do list technologies and the
synergyof these two technologies help boost productivity greatly as e-mail and
social media have now become an essential technology that people need to have
access to in orderto be a productive member of any organization or institution as
these have now become an essential part of everyday life.
Collaborative task management is also one of the problems that can be solved
througha well designed and engineered to-do list application such as Trello, a web
based, Kanban-style list application which helps teams organize their tasks and
stay in sync when working collaboratively on a project.
Another example of a well integrated to-do list application is Google Tasks, a to-
do list application which is completely synchronized with other Google and third
party services such as Google Calendar, Mail, Clock, etc. Such well integrated
applicationshelp build a highly effective productivity system for a user.
29
5.1.4 GAMIFICATION
5.2.1 INTRODUCTION
The current state of task management through currently available to-do list
applications is a hotch-potch, to say the least. The highly available and most
used to-do list applications are heavily bloated and provide unnecessary levels of
integrations which are usually not required and clutter a user’s productivity
system.
A lot of good to-do list applications are not free to use and usually run ads to
generate revenue, which is a huge negative point when it comes to productivity
apps. Ones which are run by large companies are usually trying to pull users
towards their own app ecosystem through non-sensical integrations and bloatware.
Some of the most glaring issues of to-do list productivity applications are
discussed in this chapter as we try to identify the problems and shortcomings of
currently available solutions and build our project to overcome the shortcomings.
30
For most of the to-do list applications available to use, they are not independent
entities or applications. Most of these applications are usually meant to be used
with other applications to form a “productivity system” where a user’s calendar,
clock, mail, notifications, etc. are all linked to their to-do list. While this may be
desirable to most people and may work to improve productivity for some, it is very
often more distracting than useful and over-integration of applications often leads
to sensory overload and overwhelming frustration.
Integrations are very often counter-productive and there should exist solutions that
are absolutely independent entities, free of all clutter and meant to fulfill a simple
and minimal purpose. Unfortunately, not many solutions like this exist currently.
Ironically, most good to-do list applications are not free-to-use and almost always
have some in-app purchase or subscription model to generate revenue.
This is one of the prominent problems with to-do list applications as very often all
people need is a simple app to take notes and record tasks without paying for it
and that is all a good to-do list application needs to offer, a simple and minimal
application to serve the mentioned functionalities to the user.
31
Most of any productivity application’s user base is composed of students and they
are usually the type of users with the least funds to expend, so having a minimal
to-do list application can help the student demographic greatly.
32
Note: Node version should be 16 or higher. (To check type ‘node -v’)
Our ToDo App is hosted live on internet which is deployed via Cyclic.sh
LIVE: https://easy-gray-binturong-wig.cyclic.app/
6.3 USAGE
ToDo App is a fully responsive multi-lists app on which you can easily
create & delete many todos and even divide your todos among many
categories/lists on-the-go.
Any user can access the app with just one tap on the link on any device
whether a computer, a laptop or even a smartphone.
Using the app is very basic and user-friendly. The instructions for creation
& deletion of list(s) are simply stated on the app interface itself.
33
34
35
For example:
A user can make a ToDo list containing the todos for the current day i.e. ‘Today’ which
is also the default list which shows up whenever a user tries to access the ToDo app. (see
fig. 6.3)
But here’s the twist, a user can also divide the work or todos into various categories or
various lists, I must say!
A user can divide & categorize, let say, the tasks like washing dish, cutting vegetables
etc. into a separate list named as ‘Kitchen’. (see fig. 6.4)
Or a user can also separate out the tasks like submit project, fill form etc into an another
list named as ‘Work’. (see fig. 6.5)
2. Now type and add whatever name you want to give to your list at the end of the
url (given above) after the slash.
For eg: If you want to name a list as ‘Kitchen’ then you can add the name at the
end of the url like this https://easy-gray-binturong-wig.cyclic.app/Kitchen
3. That’s it! Now you can create as many lists as you want & then you are ready to
go.
36
37
38
39
CHAPTER 7: CODING
7.1.1 HTML
The HyperText Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. It is frequently assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of
a web page semantically and originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded into the
rendered page. HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes, and other
items. HTML elements are delineated by tags, written using angle brackets. Tags such
as <img /> and <input /> directly introduce content into the page. Other tags such
as <p> surround and provide information about document text and may include other tags
as sub-elements. Browsers do not display the HTML tags but use them to interpret the
content of the page.
HTML can embed programs written in a scripting language such as JavaScript, which
affects the behavior and content of web pages. The inclusion of CSS defines the look and
40
layout of content. The World Wide Web Consortium (W3C), former maintainer of the
HTML and current maintainer of the CSS standards, has encouraged the use of CSS over
explicit presentational HTML since 1997. A form of HTML, known as HTML5, is used
to display video and audio, primarily using the <canvas> element, in collaboration with
JavaScript.
7.1.2 CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language such
as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is
a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Separation of formatting and content also makes it feasible to present the same markup
page in different styles for different rendering methods, such as on-screen, in print, by
voice (via speech-based browser or screen reader), and on Braille-based tactile devices.
CSS also has rules for alternate formatting if the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine which style
rule applies if more than one rule matches a particular element. This cascading priority
scheme is predictable.
41
The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318
(March 1998). The W3C operates a free CSS validation service for CSS documents.
CSS was first proposed by Håkon Wium Lie on 10 October 1994. At the time, Lie was
working with Tim Berners-Lee at CERN. Several other style sheet languages for the web
were proposed around the same time, and discussions on public mailing lists and
inside World Wide Web Consortium resulted in the first W3C CSS Recommendation
(CSS1) being released in 1996. In particular, a proposal by Bert Bos was influential; he
became co-author of CSS1, and is regarded as co-creator of CSS.
Style sheets have existed in one form or another since the beginnings of Standard
Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide
style sheets for the web. One requirement for a web style sheet language was for style
sheets to come from different sources on the web. Therefore, existing style sheet
languages like DSSSL and FOSI were not suitable. CSS, on the other hand, let a
document's style be influenced by multiple style sheets by way of "cascading" styles.
As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the
demands of web developers. This evolution gave the designer more control over site
appearance, at the cost of more complex HTML. Variations in web
browser implementations, such as ViolaWWW and WorldWideWeb, made consistent site
appearance difficult, and users had less control over how web content was displayed. The
42
browser/editor developed by Tim Berners-Lee had style sheets that were hard-coded into
the program. The style sheets could therefore not be linked to documents on the
web. Robert Cailliau, also of CERN, wanted to separate the structure from the
presentation so that different style sheets could describe different presentation for
printing, screen-based presentations, and editors
7.1.3 JAVASCRIPT
JavaScript often abbreviated as JS, is a programming language that is one of the core
technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98%
of websites use JavaScript on the client side for webpage behavior, often incorporating
third-party libraries. All major web browsers have a dedicated JavaScript engine to
execute the code on user’s devices.
The ECMAScript standard does not include any input/output (I/O), such
as networking, storage, or graphics facilities. In practice, the web browser or
other runtime system provides JavaScript APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core
components of some servers and a variety of applications. The most popular runtime
system for this usage is Node.js.
43
Although Java and JavaScript are similar in name, syntax, and respective standard
libraries, the two languages are distinct and differ greatly in design.
The first popular web browser with a graphical user interface, Mosaic, was released in
1993. Accessible to non-technical people, it played a prominent role in the rapid growth
of the nascent World Wide Web. The lead developers of Mosaic then founded
the Netscape corporation, which released a more polished browser, Netscape Navigator,
in 1994. This quickly became the most-used.
During these formative years of the Web, web pages could only be static, lacking the
capability for dynamic behavior after the page was loaded in the browser. There was a
desire in the flourishing web development scene to remove this limitation, so in 1995,
Netscape decided to add a scripting language to Navigator. They pursued two routes to
achieve this: collaborating with Sun Microsystems to embed the Java programming
language, while also hiring Brendan Eich to embed the Scheme language.
Netscape management soon decided that the best option was for Eich to devise a new
language, with syntax similar to Java and less like Scheme or other extant scripting
languages. Although the new language and its interpreter implementation were called
LiveScript when first shipped as part of a Navigator beta in September 1995, the name
was changed to JavaScript for the official release in December.
The choice of the JavaScript name has caused confusion, implying that it is directly
related to Java. At the time, the dot-com boom had begun and Java was the hot new
language, so Eich considered the JavaScript name a marketing ploy by Netscape.
44
7.1.4 BOOTSTRAP
Bootstrap is an HTML, CSS and JS library that focuses on simplifying the development
of informative web pages (as opposed to web applications). The primary purpose of
adding it to a web project is to apply Bootstrap's choices of color, size, font and layout to
that project. As such, the primary factor is whether the developers in charge find those
choices to their liking. Once added to a project, Bootstrap provides basic style definitions
for all HTML elements. The result is a uniform appearance for prose, tables and form
elements across web browsers. In addition, developers can take advantage of CSS classes
defined in Bootstrap to further customize the appearance of their contents. For example,
Bootstrap has provisioned for light- and dark-colored tables, page headings, more
prominent pull quotes, and text with a highlight.
Bootstrap also comes with several JavaScript components which do not require other
libraries like jQuery. They provide additional user interface elements such as dialog
boxes, tooltips, progress bars, navigation drop-downs, and carousels. Each Bootstrap
component consists of an HTML structure, CSS declarations, and in some cases
accompanying JavaScript code. They also extend the functionality of some existing
interface elements, including for example an auto-complete function for input fields.
45
The most prominent components of Bootstrap are its layout components, as they affect an
entire web page. The basic layout component is called "Container", as every other
element in the page is placed in it. Developers can choose between a fixed-width
container and a fluid-width container. While the latter always fills the width with the web
page, the former uses one of the five predefined fixed widths, depending on the size of
the screen showing the page.
576–768 pixels
768–992 pixels
992–1200 pixels
Larger than 1200 pixels
A precompiled version of Bootstrap is available in the form of one CSS file and three
JavaScript files that can be readily added to any project. The raw form of Bootstrap,
however, enables developers to implement further customization and size optimizations.
This raw form is modular, meaning that the developer can remove unneeded components,
apply a theme and modify the uncompiled Sass files.
7.1.5 NODE.JS
46
Node.js lets developers use JavaScript to write command line tools and for server-side
scripting. The functionality of running scripts server-side produces dynamic web
page content before the page is sent to the user's web browser. Consequently, Node.js
represents a "JavaScript everywhere" paradigm. Unifying web-application development
around a single programming language, rather than different languages for server-side
and client-side scripts.
The Node.js distributed development project was previously governed by the Node.js
Foundation, and has now merged with the JS Foundation to form the OpenJS Foundation.
OpenJS Foundation is facilitated by the Linux Foundation's Collaborative Projects
program.
47
Node.js was written initially by Ryan Dahl in 2009, about thirteen years after the
introduction of the first server-side JavaScript environment, Netscape's LiveWire Pro
Web. The initial release supported only Linux and Mac OS X. Its development and
maintenance was led by Dahl and later sponsored by Joyent.
Dahl criticized the limited possibilities of the most popular web server in 2009, Apache
HTTP Server, to handle a lot of concurrent connections (up to 10,000 and more) and the
most common way of creating code (sequential programming), when code either blocked
the entire process or implied multiple execution stacks in the case of simultaneous
connections.[.
Dahl demonstrated the project at the inaugural European JSConf on November 8, 2009.
Node.js combined Google's V8 JavaScript engine, an event loop, and a low-
level I/O API.
48
In January 2010, a package manager was introduced for the Node.js environment
called npm. The package manager makes it easier for programmers to publish and share
source code of Node.js packages and is designed to simplify installation, updating, and
uninstallation of packages.
In January 2012, Dahl stepped aside, promoting coworker and npm creator Isaac
Schlueter to manage the project. In January 2014, Schlueter announced that Timothy J.
Fontaine would lead the project.
In December 2014, Fedor Indutny started io.js, a fork of Node.js. Due to the internal
conflict over Joyent's governance, io.js was created as an open governance alternative
with a separate technical committee. Unlike Node.js, the authors planned to keep io.js up-
to-date with the latest releases of the Google V8 JavaScript engine.
In February 2015, the intent to form a neutral Node.js Foundation was announced. By
June 2015, the Node.js and io.js communities voted to work together under the Node.js
Foundation.
In September 2015, Node.js v0.12 and io.js v3.3 were merged back together into Node
v4.0. This merge brought V8 ES6 features into Node.js and a long-term support release
cycle. As of 2016, the io.js website recommends that developers switch back to Node.js
and that no further releases of io.js are planned due to the merge.
49
In 2019, the JS Foundation and Node.js Foundation merged to form the OpenJS
Foundation.
7.1.6 EXPRESS.JS
Express.js, or simply Express, is a back end web application framework for
building RESTful APIs with Node.js, released as free and open-source software under
the MIT License. It is designed for building web applications and APIs. It has been called
the de facto standard server framework for Node.js.
In June 2014, rights to manage the project were acquired by StrongLoop. StrongLoop
was acquired by IBM in September 2015; in January 2016, IBM announced that it would
place Express.js under the stewardship of the Node.js Foundation incubator.
Features:
Robust routing
Concentrate on high-performance
HTTP helpers (redirection, caching, etc)
50
7.1.7 MONGODB
MongoDB is a source-available cross-platform document-oriented database program.
Classified as a NoSQL database program, MongoDB uses JSON-like documents with
optional schemas. MongoDB is developed by MongoDB Inc. and licensed under
the Server Side Public License (SSPL) which is deemed non-free by several distributions.
MongoDB is a member of the MACH Alliance.
MongoDB stores data in flexible, JSON-like documents, meaning fields can vary
from document to document and data structure can be changed over time
The document model maps to the objects in your application code, making data
easy to work with
Ad hoc queries, indexing, and real time aggregation provide powerful ways to
access and analyze your data
MongoDB is free to use. Versions released prior to October 16, 2018 are
published under the AGPL. All versions released after October 16, 2018,
including patch fixes for prior versions, are published under the Server Side
Public License (SSPL) v1.
51
On October 20, 2017, MongoDB became a publicly traded company, listed on NASDAQ
as MDB with an IPO price of $24 per share.
MongoDB is a global company with US headquarters in New York City, USA and
International headquarters in Dublin, Ireland.
On October 30, 2019, MongoDB teamed up with Alibaba Cloud, who will offer its
customers a MongoDB-as-a-service solution. Customers can use the managed offering
from BABA's global data centers.
7.1.8 VS CODE
Visual Studio Code is a code editor in layman’s terms. Visual Studio Code is “a free-
editor that helps the programmer write code, helps in debugging and corrects the code
using the intelli-sense method ”. In normal terms, it facilitates users to write the code in
an easy manner.
Many people say that it is half of an IDE and an editor, but the decision is up to to the
coders. Any program/software that we see or use works on the code that runs in the
background. Traditionally coding was used to do in the traditional editors or even in the
basic editors like notepad! These editors used to provide basic support to the coders.
52
Some of them were so basic that it was very difficult in writing basic English level
programs in them. As time went by, some programming languages needed a specific
framework and support for further coding and development it, which was not possible
using these editors. VI Editor, Sublime Text Editor, is one of the many kinds of editors
The most prominent and which supports almost every coding language is VISUAL
STUDIO CODE. Its features let the user modify the editor as per the usage, which means
the user is able to download the libraries from the internet and integrate it with the code
The distributed version control tool is used for source code management
Git is used primarily by developers to manage their source code. Git records changes to
files over time, while ensuring the integrity of those changes at each stage of processing.
Users can revert to earlier versions and compare different versions at the file level.
53
They can also branch & merge files to support independent development efforts and
nonlinear workflows. And Git is not limited to source code. It can be used for database
scripts , LaTeX documents, configuration files, content management data or other file
types.
7.1.9 EJS
EJS simply stands for ‘Embedded Javascript’. As the name suggests, it lets us
embed JavaScript code in a template language that is then used to generate
HTML.
It is a simple templating language/engine that lets its user generate HTML with
plain javascript. That’s why we have added four separate ejs templates in our code
to provide modularity i.e. to load parts of html separately with the help of
Javascript.
EJS is mostly useful whenever you have to output HTML with a lot of javascript.
With EJS, we’re able to provide the Multi-list functionality to the users
54
Fig 7.1
55
Note:
You can find the all the source code files and other related files on the link given below:
GitHub: https://github.com/akshitsangwan/ToDo-App-v2
There are various files with different file extensions in the code which are as follows:
1. Index.html
2. Styles.css
3. App.js
4. Package.json
5. EJS files for Templating
I. About.ejs
II. Footer.ejs
III. Header.ejs
IV. List.ejs
Note:
Node Modules & package-lock.json will be added to the folder when you will run
command ‘npm install’ which will install all the required npm packagas to run your app.
56
7.3.1 INDEX.HTML
The ‘index.html’ file is used to give the foundational structure to our ToDo app.
It also helps in linking & incorporating the css and javascript files and their
functionalities into our app.
It acts as a skeleton which builds the outer static layout of our web app.
57
7.3.2 STYLES.CSS
The ‘styles.css’ file is responsible for the designing & formatting part of our
ToDo app.
It is used to style and layout web pages — for example, to alter the font, color,
size, and spacing of your content, split it into multiple columns, or add animations
and other decorative features.
It makes the front-end of a website shine and it creates a great user experience.
Without CSS, websites would be less pleasing to the eye and likely much harder
to navigate.
58
59
60
61
7.3.3 APP.JS
The ‘app.js’ file sets up the server for the backend support in our ToDo App.
This file contains all the HTTP client & server request codes which are executed
when called upon.
It also helps to set-up a local server on our personal device and can access our
web app on the ‘http://localhost:3000’ by running ‘node app.js’ on CLI.
62
63
64
65
66
67
7.3.4 PACKAGE.JSON
The ‘package.json’ file is core to the Node.js ecosystem & is a fundamental part
of understanding & working with Node.js , npm & even modern Javascript.
This file contains holds important information about our web app.
It contains human-readable metadata about the project (like the project name and
description) as well as functional metadata like the package version number and a
list of dependencies required by the application.
68
7.3.5 EJS
EJS simply stands for ‘Embedded Javascript’. As the name suggests, it lets us
embed JavaScript code in a template language that is then used to generate
HTML.
It is a simple templating language/engine that lets its user generate HTML with
plain javascript. That’s why we have added four separate ejs templates in our code
to provide modularity i.e. to load parts of html separately with the help of
Javascript.
EJS is mostly useful whenever you have to output HTML with a lot of javascript.
With EJS, we’re able to provide the Multi-list functionality to the users.
69
70
71
72
CHAPTER 8: TESTING
CONCEPT TESTING
Concept testing helps me verify if the flow and idea can be understood by users. I
translated my two flows into two simple sketches. I produced the flows with pen and
paper, rather than jump too quickly to wireframes, so that I would be pushed to consider
carefully how I would place the elements in the layout and how they would connect
logically. Early concept testing with pen and paper is valuable because it allows me to
identify what works and what does not and to make sure that what I am creating is based
on user needs.
In my testing, I started by giving users a few tasks to see if they were able to accomplish
them. During the process, users were able to complete tasks assigned to them, such as
create a todo and deleting a todo etc. They also indicated that the app function doesn’t
look cluttered with too many extra options. I’ve tried to avoid giving the user too many
options so that the app does not overwhelm them and hinder their actions.
WIREFRAMES
At this stage, I translated the sketches to Sketch. While I was making the wireframes, I
should have the add button in the bottom, why to make strike-through lines for while
deleting etc.
73
I then decided to stop my work and go back to the problem statement and user research
findings. Revisiting my research put me back on the right track regarding the elements and
USER TESTING
For user testing, I selected users who were involved in the previous user testing, and I also
included some new users. The age range of the users was from 25 to 45. They are
After incorporating user feedback, I was able to make another revision to my slides.
Users were able to perform assigned tasks such as quickly adding todos and deleting
ACHIEVEMENTS
74
1. The initial plan was to use an SQL database instead of MongoDB but the
on with it.
2. The feature to rank and list tasks by their priority was implemented towards
the end of the project as we had initially planned to classify tasks into two
3. Several implementation problems did not have any solutions that could be
6. Implementation of authentication
75
I learn that there is no right or wrong in our design solution, and there is no perfect way to
achieve a design solution. The only way to reach a design goal and perfect our product is
through iteration and incorporation of user feedback. Iteration makes my design get better
and better, and each iteration keeps me focused on the problem I want to solve. Input from
design critique makes me look at the problem from different directions and helps shape a
better product.
76
CHAPTER 9: REFERENCES
2. Kvalheim, C. (2015). The Little Mongo DB Schema Design Book. The Blue
Print Series.
3. Khedkar, S., Thube, S., Estate, W. I., & Naka, C. (2017). Real time databases
5. Syed, B. A., & Bean, M. (2014). Beginning Node. js (pp. 181-182). New York
City: Apress.
7. Gaspar, F., Taniça, L., Tomás, P., Ilic, A., & Sousa, L. (2015). A
77
78