TODO NOTE WEB APPLICATION
(MERN STACK)
PROJECT SYNOPSIS
OF SUMMER INTERNSHIP
BACHELOR OF TECHNOLOGY
COMPUTER SIENCE ENGINEERING
SUBMITTED BY:
NAVJOT SINGH
1819318
NOV 2022
HARYANA ENGINEERING COLLEGE
(Affiliated to Kurukshetra University, Kurukshetra),
JAGADHRI-135003
DECLARATION
I hereby certify that the work which is being carried out in this Project titled
“TODO NOTE WEB APPLICATION (MERN STACK)” in fulfillment of the
requirement for the degree of Bachelor of Technology in Computer Science and
Engineering and submitted to “Haryana Engineering College (Affiliated to
Kurukshetra University, Kurukshetra), Jagadhri”.
Yamuna Nagar, Navjot Singh
Nov 2022
2
TABLE OF CONTENTS
Chapter Title Page No.
1 Introduction 4
2 Proposed Objective 5
3 Requirement specification 5
4 Literature Review 6
5 System Design 7
6 Project Snapshots 10
7 Conclusion 12
3
Chapter 1. Introduction
1.1. Brief description:
TODO NOTE! is a full stack note taking web app using the MERN stack (MongoDB,
Express.js, React.js, Node.js). It has got all the features that you need in a note taking app
while being simplistic. This app is a full-fledged, complete app which means you can make
this app as your go-to note taking app from now onwards. It has a JWT authentication and a
classic black and white UI. You can add/edit/delete note(s). Also, it is mobile responsive and
no design library is used to implement this since I used plain CSS to build the UI to improve
my CSS skills.
1.2. What a Use of TODO NOTE-APP ?
Note-taking is an important skill for students, especially at the college level. In some
contexts, such as college lectures, the main purpose of taking notes may be to implant the
material in the mind, the written notes themselves being of secondary importance. Many
studies have been able to show that note taking in college students has helped them
become more engaged in the lecture and allowed them to better comprehend the material.
4
Chapter 2. Proposed Objective
“Taking notes” is something that has long been important for successful communication and
teamwork, but it’s taken on a whole new meaning in our remote world. First of all, setting
an agenda before the meeting via note-taking apps helps everyone get on the same page.
Without those moments before meetings to chat over the agenda in person, you need to
create some sort of format for your meeting. Using note-taking apps to prep the team for
the meeting, and sharing the note with everyone beforehand, is essential.
2.1. Goals of our Project:
Never lose your notes.
Always have your notes with you and never run out of fresh pages.
Organize and search for important information.
Revise and review for better preparation.
Save the planet because Paper is a scarce resource.
Chapter 3. Requirement Specification
Most web based applications are far more compatible across platforms than traditional
installed software. Typically the minimum requirement would be a web browser of which
there are many. (Internet Explorer, Firefox, Chrome, Safari). So whether you use Windows,
Linux or Mac OS you can still run the web application and with help of following our “TODO
NOTE WEB APPLICATION (MERN STACK” is able to proceed through its development which
are as follows:
3.1. Software Requirement Specification:
Programing Stack: MERN stack (MongoDB, Express.js, React.js, Node.js)
Platform: Web Browser.
Development Software: Visual Studio Code, Nodejs 18.0, MongoDB Compass.
5
Chapter 4. Literature Review
Note-taking has been an important part of human history and scientific development. The
Ancient Greeks developed hypomania, personal records on important subjects. In the
Renaissance and early modern period, students learned to take notes in schools, academies
and universities, often producing beautiful volumes that served as reference works after
they finished their studies. In pre-digital times, people used many kinds of notebooks,
including commonplace books, accounting waste books, and marginalia. Philosopher John
Locke developed and published a popular indexing system which served as a model for
commonplace books and inspired at least ten different published editions of commonplace
book templates in Europe and the Americas as well as Bell's Common-Place Book, Form’s
Generally upon the Principles Recommended and Practised by Mr Locke (London, 1770).
Note-taking is an important skill for students, especially at the college level. In some
contexts, such as college lectures, the main purpose of taking notes may be to implant the
material in the mind, the written notes themselves being of secondary importance. Many
studies have been able to show that note taking in college students has helped them
become more engaged in the lecture and allowed them to better comprehend the material.
Even when students fail to return to their notes and study them, they have shown higher
test scores and better comprehension when they take notes versus not taking notes. The
difference is even more significant when the notes are hand written and reworded rather
than merely transcribed or typed.
Many different formats are used to structure information and make it easier to find and to
understand later. The format of the initial record may often be informal and/or
unstructured. One common format for such notes is shorthand, which can allow large
amounts of information to be put on paper very quickly. Historically, note-taking was an
analogy process, written in notebooks, or other paper methods like Post-It notes. In the
digital age, use of computers, tablet PCs and personal digital assistants (PDAs) is common.
6
Chapter 5. System Design/Methodology
System design is the process of defining the components, modules, interfaces, and data for
a system to satisfy specified requirements. System development is the process of creating or
altering systems, along with the processes, practices, models, and methodologies used to
develop them.
5.1. Architecture:
MVC, also known as (Model View Controller), is the most popular of these patterns. It is
used to break up a large application into smaller sections. Each section of the project is
designed to illustrate its own function. MVC Architecture becomes so popular that now
most of the popular frameworks follow the MVC design pattern to develop the applications.
Some of the popular Frameworks that follow the MVC Design pattern are –
JAVA Frameworks: Sprint, Spring Boot.
Python Framework: Django.
NodeJS (JavaScript): ExpressJS.
Components of MVC
Generally, we know that MVC has 3 components. Model, View, and Controller. But it also
has a major component that is equally important to make this framework work in action.
And that is Router. So we can say that there is a total of 4 components of MVC. Those are –
View – Where the user interacts.
Router – Handles the Request where to process.
Controller – Process the request and send the response to view.
Model – Middleware that handles the database operations.
7
8
5.3.Directory Structure:
9
Chapter 6. Project Snapshots
6.1. Login/Register Interface
6.2. Main-Page
6.3. New/Add Note
10
6.3. Editing Old Note
11
Chapter 7. Conclusion
TODO NOTE! is a full stack note taking web app using the MERN stack (MongoDB,
Express.js, React.js, Node.js). It has got all the features that you need in a note taking app
while being simplistic. This app is a full-fledged, complete app which means you can make
this app as your go-to note taking app from now onwards. It has a JWT authentication and a
classic black and white UI. You can add/edit/delete note(s). Also, it is mobile responsive and
no design library is used to implement this since I used plain CSS to build the UI to improve
my CSS skills.
The final report for the project was good, as it showed how the academic question was
created from the initial problem. The next section of the report was the literature review,
which contained quality sources from various different formats such as books, journals and
websites. The sources gave excellent background knowledge of the topic and aided in
answering the academic question.
The planning for the project was very well carried out as it initially had two weeks of slack
available. This allowed for leniency if any task took longer than anticipated. All tasks were
completed in the order they were anticipated.
The testing methods used in the project were appropriate. The system test ensured that all
features of the chess game were functional before the beta test. There was no other suitable
tests found that would test the game as thoroughly as the system test.
12
