To Do List Project Report

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 79

lOMoARcPSD|43677597

To do list Project Report

Bachelor of Computer Applications (Saurashtra University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by Rohan Salve (rohan937291@gmail.com)
lOMoARcPSD|43677597

Minor Project Report


A
On
“Project Title”
Submitted in partial fulfilment for the award of the degree
of
BACHELOR OF COMPUTER APPLICATIONS
from
CHAUDHARY CHARAN SINGH UNIVERSITY, MEERUT
(Session: 2022-23)

Meerut Institute of Technology (Professional Courses), Meerut

Submitted To: Submitted By:


Mr. Lalit Kumar Name:
HOD, BCA Deptt. BCA 5th Sem
Roll No:

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

TABLE OF CONTENTS

Content Page No.


1. Declaration 3

2. Certificate 4

3. Acknowledgement 5

4. Abstract 6

5. Introduction of the Project 9

6. Objectives of the Project 15

7. Hardware and Software Requirements 18

8. Project Analysis & Designing 19

- DFD

- ER Diagram

9. Modules 27

- Process logic of each module

10. Input / Output Screenshot 33

11. Coding 40

12. Testing 73

13. Future Scope 75

14. References 77

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

DECLARATION

I, ________________, bearing roll number ____________, hereby declare that the work

which is being presented in the Minor Project, entitled “__________________________”

in partial fulfilment for award of Degree of “Bachelor of Computer Applications” in

Department of Computer Application is submitted under the Guidance of “.....................”.

I have not submitted the matter presented in this work anywhere for the award of any

other Degree.

Date: ..............................

Student Name: ...............

Roll No.: .......................

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

CERTIFICATE

Certified that the Project Report entitled “_______________________________”

submitted by_______________ bearing roll no.______________ in partial fulfilment of

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

award of any other Degree.

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

Project for the purpose for which it is submitted.

……………... Mr. Lalit Kumar

(Project-Guide) (HOD, BCA Deptt.)

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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,

as always, offered me their unconditional support, during my efforts in completing this

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:

BCA Vth Sem

Roll No.:

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

GRAPHICAL ABSTRACT

Fig. Graphical Abstract (i)

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. Graphical Abstract (ii)

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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

A few of the features of a good to-do list application include:

• Plan and execute simple actions.


• Prioritize, manage, and reason about tasks.
• Record notes, action items and ideas.

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.

There are clear immediate implications to adding a to-do list to a person’s


productivity system. The functionalities provided by a good to-do list
application/system help declutter the user’s mind as their pending tasks are
recordedsafely and they won’t be forgotten.

The To-do list project is a user-friendly website which helps them to keep a track

of their tasks. It is a simple site which requires no sign-in/log-in or any personal

details but still records your task, mark the completed tasks, and stores them even

if you visit the site after a few days.

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Traditionally, they’re written on a piece of paper or post it notes and acts as a

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

life, or in the workplace.

The Benefits of Using a To Do List -

1. Improves your memory: A to do list acts as an external memory aid. It’s

only possible to hold a few pieces of information at one time. Keep a to do

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

information, which makesit less likely you’re going to forget something.

2. Increases productivity: A to do list allows you to prioritize the tasks that

are more important. This means you don’t waste time on tasks that don’t

require your immediate attention.

3. Helps with motivation: To do lists are a great motivational tool because

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

list, your confidence will increase.

10

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

1.1 TASK MANAGEMENT

From an articulation standpoint, task management entails more than just


organizingvirtual 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 email
functionalities. Recent researches looked at task management strategies more generally
because email and related technologies are unlikely to be the whole picture.

1.2 TO-DO LIST AS A SOLUTION TO TASK MANAGEMENT

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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:

 A variety of methods for examining and managing to-dos that go beyond


listsand mirror the advantages of current resources.
 The inconvenient property, such as when it becomes the default
spot foreveryday tasks where reminders can be satisfied.
 Immediately turns on, allowing for quick input and clear view.
Conventionalto-do lists are commonly abandoned due to slow, time-
consuming input and weak output.
 No formal job description, classification, or decomposition is required
from users, and any degree of abstraction for atomic task entries must be
permitted.
 A mechanism for dealing with stale, low-priority to-dos that are becoming
lesslikely to be performed but have not been explicitly deleted.

12

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

1.3 GANTT CHART

Name of the task Start date End date Duration


Project kick off 7/14/2022 7/15/2022 1
Initial design 7/16/2022 7/20/2022 4
Making of prototype 7/21/2022 7/28/2022 7
Research 08/01/2022 08/07/2022 6
Adding functionality to prototype 08/08/2022 08/14/2022 6
Initiating development 08/15/2022 08/20/2022 5
Finalizing design 08/21/2022 08/24/2022 3
Developing prototype 08/25/2022 08/28/2022 3
Testing functionality 08/29/2022 08/31/2022 2
Implementing the solution 09/01/2022 09/06/2022 4
Initiating integration of modules 09/07/2022 09/12/2022 5
Finalizing essential
functionalities 09/13/2022 09/20/2022 7
Planning add-on functionalities 09/21/2022 09/26/2022 5
Implementing add-on
functionalities 09/27/2022 09/30/2022 3
Testing of the project 10/01/2022 10/06/2022 5
Implement improvements and
debugging 10/07/2022 10/10/2022 3

Table 1.1

13

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

1.4 START DATE AND DURATION

Fig. 1.1

14

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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:

2.1 MINIMAL INTERFACE

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.

2.2 FREE TO USE

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

2.3 OPEN SOURCE

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.

A brief overview of open-source projects:

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.

Programmers who have access to a computer program's source code can


improve that program by adding features to it or fixing parts that don't always
work correctly.

2.4 AD-FREE

There is no incentive for generation of revenue through this project so it will


forever remain ad-free and clutter free.

2.5 EFFICIENT

Very few resources are required to store and run the application.

16

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

CHAPTER 3: HARDWARE & SOFTWARE

REQUIREMENTS

3.1 HARDWARE REQUIREMENTS

 Pentium IV or higher, (PIV-300GHz recommended)


 256 MB RAM
 1 Gb hard free drive space

3.2 SOFTWARE REQUIREMENTS

Front-end Tech Stack:

 HTML
 CSS
 Bootstrap
 JavaScript

Back-end Tech Stack:

 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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

CHAPTER 4: PROJECT ANALYSIS & DESIGNING

Concept Generation, Evaluation & Selection of Specifications/Features, Design


Constraints– Regulations, Economic, Environmental, Health, manufacturability,
Safety, Professional, Ethical, Social & Political Issues considered in design,
Analysisand Feature finalization subject to constraints, Design Flow (at least 2
alternative designs to make the project), Best Design selection (supported with
comparison and reason) and Implementation plan ((Flowchart /algorithm/ detailed
block diagram)).

4.1 CONCEPT GENERATION

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.

4.2 EVALUATION & SELECTION OF SPECIFICATIONS/


FEATURES

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

4.3 DESIGN CONSTRAINTS

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

developed as well. However, thesewill heavily depend on the regulations


from the government.

4.4 PROFESSIONAL, ETHICAL, SOCIAL & POLITICAL


ISSUES CONSIDERED IN DESIGN
There are no professional, ethical, social or political issues revolving aroundthe
design of our to-do list application.

4.5 ANALYSIS & FEATURE FINALIZATION SUBJECT TO


CONSTRAINTS

The features of the to-do list applications include :

1. Viewing all the tasks in a user’s to-do list


2. Marking a task as completed, changing its priority to 0
3. Tasks are ordered by priority of importance
4. Deletion of tasks
5. Attributing due dates to tasks
6. Tasks are highlighted when they are close to due or overdue
7. Adding tasks to a user’s to-do list

21

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

4.6 DESIGN FLOW

4.6.1 FINAL DESIGN

Fig 4.1 Entity-Relationship Diagram (ERD)

Fig 4.2 Data Flow Diagram (DFD)

22

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

4.6.2 ALTERNATIVE DESIGNS

• One possible alteration to the design of the project is to add location-based


tasktracking to remind a user to complete a task triggered by the location
of the user. This design was not chosen for the project because location
services consume significantly more resources and thus it would render the
applicationinefficient for mobile devices.

• 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.

4.6 BEST DESIGN

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

The main functionalities that were added to this project are:

1. Viewing all the tasks in a user’s to-do list


2. Marking a task as completed, changing its priority to 0
3. Tasks are ordered by priority of importance
4. Deletion of tasks
5. Attributing due dates to tasks
6. Tasks are highlighted when they are close to due or
overdue
7. Adding tasks to a user’s to-do list

24

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

4.1.7 IMPLEMENTATION PLAN

The implementation plan and timeline shown through a Gantt chart:

Name of the task Start date End date Duration


Project kick off 7/14/2022 7/15/2022 1
Initial design 7/16/2022 7/20/2022 4
Making of prototype 7/21/2022 7/28/2022 7
Research 08/01/2022 08/07/2022 6
Adding functionality to prototype 08/08/2022 08/14/2022 6
Initiating development 08/15/2022 08/20/2022 5
Finalizing design 08/21/2022 08/24/2022 3
Developing prototype 08/25/2022 08/28/2022 3
Testing functionality 08/29/2022 08/31/2022 2
Implementing the solution 09/01/2022 09/06/2022 4
Initiating integration of modules 09/07/2022 09/12/2022 5
Finalizing essential
functionalities 09/13/2022 09/20/2022 7

Planning add-on functionalities 09/21/2022 09/26/2022 5


Implementing add-on
functionalities 09/27/2022 09/30/2022 3

Testing of the project 10/01/2022 10/06/2022 5


Implement improvements anddebugging
10/07/2022 10/10/2022 3

Table 4.1

25

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig 4.3 Gantt Chart

26

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

5.1.1 EVOLUTION OF TO-DO LIST

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.

This can be additionally reached out to schedules, by composing undertakings


againstdates where the dates can likewise go about as cutoff times for specific
assignments. Other potential augmentations of plans for the day can be on
whiteboards, diaries, text editors, etc.

27

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

5.1.2 ESSENTIAL FUNCTIONALITIES

1. An assortment of strategies for analyzing and figuring out how


tasks that gopast records and mirror the upsides of current assets.

2. The awkward property, for example, when it turns into the


default spot forordinary errands where updates can be fulfilled.

3. Promptly turns on, taking into consideration fast information and


clear view.Regular plans for the day are ordinarily deserted because
of slow, tedious information and frail result.

4. No conventional set of working responsibilities, order, or


deterioration is expected from clients, and any level of reflection for
nuclear errand sectionsshould be allowed.

5. An instrument for managing low-need tasks that are turning out to be


less inclined to be performed yet have not been expressly erased.

28

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

5.1.3 INTEGRATION WITH OTHER TECHNOLOGIES

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

5.1.4 GAMIFICATION

Gamification is the process of adding game elements into non-game environments


such as a website, productivity systems, or corporate intranet. Gamification
encourages consumers, employees, and partners to collaborate, contribute, and
interact by including them in games.

As shown by studies in Kappen, adding an element of gratification through


gamification boosts engagement of users to platforms, even when it comes to
productivity.

5.2 PROBLEM DEFINITION

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

5.2.2 UNNECESSARY INTEGRATIONS

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.

5.2.3 PRODUCTIVITY APPS AS PAID SERVICES

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.

While it is understandable that capital is required to maintain and provide some


services to users, a lot of those services are not necessary to most users, who
are generally students, and yet they have to pay for it.

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

5.2.3 RUNNING ADVERTISEMENT TO GENERATE REVENUE

Although less prominent, it is not rare to see productivity applications running


advertisements to generate revenue. Ads are the biggest distractions and a bane to
productivity so although the developers can earn through ads, it is a bane to the
users and very often they don’t have a choice, but to keep using the same
application with ads, which leads to a dip in productivity and focus.

32

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

CHAPTER 6: INPUT/ OUTPUT SCREENSHOT

6.1 USER MANUAL

1. Extract the project files to a folder.


2. Mount the folder directory in PowerShell or Command Prompt.
3. Mount the folder ‘ToDo-App-v2’ using the command ‘cd ToDo-App-v2’
4. Run the command ‘npm install’ followed by ‘npm app.js’
5. The project is now running, go to the URL ‘localhost:3000/’ to
access the application.

Note: Node version should be 16 or higher. (To check type ‘node -v’)

6.2 LIVE DEPLOYMENT

Our ToDo App is hosted live on internet which is deployed via Cyclic.sh

Here’s the link to access the ToDo app:

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig 6.1 ToDo App (preview on a laptop/PC)

34

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig 6.2 ToDo App (preview on a Smartphone)

35

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

6.4 THE MULTI-LIST FUNCTIONALITY


ToDo App has provides a unique functionality to the users to create multiple lists on the
go whenever & wherever they want and on any device. This functionality make ToDo
App stand out from other Todo list apps in the market and provides flexibility to its users.

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)

Steps to create a separate list:


1. Click on the home page url which is also the default link to access the ToDo app
i.e. https://easy-gray-binturong-wig.cyclic.app/

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig 6.3 Default list (Today)

37

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig 6.4 Separate list 1(Kitchen)

38

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig 6.5 Separate list 2(Work)

39

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

CHAPTER 7: CODING

7.1 TECHNOLOGY STACK


The technologies that are used to implement this project are:

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

CSS is designed to enable the separation of content and presentation,


including layout, colors, and fonts. This separation can improve content accessibility;
provide more flexibility and control in the specification of presentation characteristics;
enable multiple web pages to share formatting by specifying the relevant CSS in a
separate .css file, which reduces complexity and repetition in the structural content; and
enable the .css file to be cached to improve the page load speed between the pages that
share the file and its formatting.

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

In addition to HTML, other markup languages support the use of CSS


including XHTML, plain XML, SVG, and XUL.

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

JavaScript is a high-level, often just-in-time compiled language that conforms to


the ECMAScript standard. It has dynamic typing, prototype-based object-orientation,
and first-class functions. It is multi-paradigm, supporting event-driven, functional,
and imperative programming styles. It has application programming interfaces (APIs) for
working with text, dates, regular expressions, standard data structures, and the Document
Object Model (DOM).

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Example of a webpage using Bootstrap framework rendered in Firefox

45

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Smaller than 576 pixels

 576–768 pixels
 768–992 pixels
 992–1200 pixels
 Larger than 1200 pixels

Once a container is in place, other Bootstrap layout components implement a CSS


Flexbox layout through defining rows and columns.

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

Node.js is a cross-platform, open-source server environment that can run


on Windows, Linux, UNIX, macOS, and more. Node.js is a back-end JavaScript runtime
environment, runs on the V8 JavaScript Engine, and executes JavaScript code outside
a web browser.

46

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Node.js has an event-driven architecture capable of asynchronous I/O. These design


choices aim to optimize throughput and scalability in web applications with many
input/output operations, as well as for real-time Web applications (e.g., real-time
communication programs and browser games).

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.

Corporate users of Node.js software


include GoDaddy, Groupon, IBM, LinkedIn, Microsoft, Netflix, PayPal,
SAP, Walmart, Yahoo!, and Amazon Web Services.

47

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Ryan Dahl, creator of Node.js, in 2010

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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 June 2011, Microsoft and Joyent implemented a native Windows version of


Node.js. The first Node.js build supporting Windows was released in July 2011.

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

In 2019, the JS Foundation and Node.js Foundation merged to form the OpenJS
Foundation.

At February 21 2023, Node.js 19.7.0 was released.

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.

The original author, TJ Holowaychuk, described it as a Sinatra-inspired server, meaning


that it is relatively minimal with many features available as plugins. Express is the back-
end component of popular development stacks like the MEAN, MERN or MEVN stack,
together with the MongoDB database software and a JavaScript front-end framework or
library.

Express.js was founded by TJ Holowaychuk. The first release, according to


Express.js's GitHub repository, was on 22 May 2010. Version 0.12

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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 is a non-relational document database that provides support for JSON-like


storage. The MongoDB database has a flexible data model that enables you to store
unstructured data, and it provides full indexing support, and replication with rich and
intuitive APIs.

 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 a distributed database at its core, so high availability, horizontal


scaling, and geographic distribution are built in and easy to use

 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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

10gen software company began developing MongoDB in 2007 as a component of a


planned platform as a service product. In 2009, the company shifted to an open-source
development model, with the company offering commercial support and other services.
In 2013, 10gen changed its name to MongoDB Inc.

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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

that came into existence.

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

as per his requirements.

7.1.8 GIT (VERSON CONTROL SYSTEM)


Git is a version control system used for tracking changes in computer files. It is generally
used for source code management in software development.

 Git is used to tracking changes in the source code

 The distributed version control tool is used for source code management

 It allows multiple developers to work together

 It supports non-linear development through its thousands of parallel branches

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

7.2 USE-CASE DIAGRAM

Fig 7.1

55

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

7.3 SOURCE CODE


The underlying source code & related files of the ToDo App is divided and
segregated/modulated into a bunch of various component files each responsible for a
particular function which collectively facilitates the functioning of the ToDo App.

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Fig. 7.2 index.html (code)

57

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Fig. 7.3 styles.css (code) (i)

58

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.4 styles.css (code) (ii)

59

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.5 styles.css (code) (iii)

60

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.6 styles.css (code) (iv)

61

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Fig. 7.7 app.js (code) (i)

62

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.8 app.js (code) (ii)

63

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.9 app.js (code) (iii)

64

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.10 app.js (code) (iv)

65

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.11 app.js (code) (v)

66

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.12 app.js (code) (vi)

67

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Fig. 7.13 package.json (code)

68

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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.

Fig. 7.14 about.ejs (code)

69

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.15 footer.ejs (code)

70

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.16 header.ejs (code)

71

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

Fig. 7.17 list.ejs (code)

72

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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

reconsidered some interaction elements at the bottom. For example, I considered if I

should have the add button in the bottom, why to make strike-through lines for while

deleting etc.

73

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

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

interactions, and I was able to make decisions about them confidently.

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

currently working full-time or doing freelancing work.

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

todos, making custom list(s) etc.

ACHIEVEMENTS

Successfully created a functional web application and learnt implementation of


system design concepts in real life projects while alsogaining experience of
building applications with JavaScript and its frameworks.

74

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

CHAPTER 8: FUTURE SCOPE

8.1 DEVIATIONS FROM EXPECTED RESULTS & WAY AHEAD


Some unexpected deviations and resulting design changes during the
development of this project include:

1. The initial plan was to use an SQL database instead of MongoDB but the

Object Relational Mapping(ORM) library we planned to use (Sequelize)

with Node.js had issues performing queries on localPostgreSQL database so

we tried implementing the project with MongoDB instead and decided to go

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

lists only based on whether the tasks were completedor pending.

3. Several implementation problems did not have any solutions that could be

solved by directly using third-party libraries so they had to be solved by

manually implementing the functionalities.

4. Improvement in security and integrity

5. Integration with other applications such as calendar, mail, etc.

6. Implementation of authentication

7. Hosting the web application online to make it accessible to moreusers

75

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

8.2 WHAT I LEARNED, AND WHAT I COULD HAVE DONE BETTER

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

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

CHAPTER 9: REFERENCES

1. Staff, C. A. C. M. (2016). React: Facebook's functional turn on writing

Javascript. Communications of the ACM, 59(12), 56-62.

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

for applications. International Research Journal of Engineering and Technology


(IRJET), 4(06), 2078-2082.

4. Tilkov, S., & Vinoski, S. (2010). Node. js: Using JavaScript to

build high-performance network programs. IEEE Internet


Computing, 14(6), 80-83.

5. Syed, B. A., & Bean, M. (2014). Beginning Node. js (pp. 181-182). New York

City: Apress.

6. Morales-Morell, A. (2001). Usability aspects of a location-aware

TODO list application. University ofPuerto Rico, Mayaguez (Puerto


Rico).

7. Gaspar, F., Taniça, L., Tomás, P., Ilic, A., & Sousa, L. (2015). A

framework for application-guided taskmanagement on heterogeneous


embedded systems. ACM Transactions on Architecture and Code
Optimization (TACO), 12(4), 1-25.

77

Downloaded by Rohan Salve (rohan937291@gmail.com)


lOMoARcPSD|43677597

8. Lin, C. Y., Hung, M. T., & Huang, W. H. (2012, September). A

location-based personal taskmanagement application for


indoor and outdoor environments. In 2012 15th International
Conference on Network-Based Information Systems (pp. 582-
587). IEEE.

9. Bellotti, V., Ducheneaut, N., Howard, M., & Smith, I. (2002).

Taskmaster: recasting email as task management. PARC, CSCW, 2.

10. Unger, T., & Bauer, T. (2008). Towards a Standardized Task

Mgmt. In Multikonferenz Wirtschaftsinformatik (pp. 443-444)

78

Downloaded by Rohan Salve (rohan937291@gmail.com)

You might also like