Umbrella Academy

Final Year Project Proposal

Session 2019-2023

A project submitted in partial fulfillment of the

COMSATS University Degree
of
BS in Computer Science / Software Engineering (CUI)

Department of Computer Science

COMSATS University Islamabad, Lahore Campus
26 March 2024
Project Registration

Project ID (for office

use)

Type of project [.] Traditional [ ] Industrial [ ] Continuing

Nature of project [ ] Development [ ] Research [ ] R&D

Area of specialization Web Development

Project Group Members

CGP
Sr.# Reg. # Student Name Email ID Phone # Signature
A

FA19-BCS- FA19-BCS-
(i) 099
Samir Baig 2.42 03154264339
099@cuilahore.edu.pk

FA19-BCS- FA19-BCS-
(ii) 052
Amna Altaf 2.64 03331246681
052@cuilahore.edu.pk

Declaration: FYP group members have cleared all prerequisites courses For FYP-I as per their degree
requirements.
For BS(Computer Science)
(CSC241 Object Oriented Programming, CSC291 Software Engineering Concepts, CSC371 Database
Systems-I, HUM102 Report Writing Skills)
For BS(Software Engineering)
(CSC241 Object Oriented Programming, CSE291 Introduction to Software Engineering, CSC371
Database Systems-I , HUM102 Report Writing Skills)

Plagiarism Free Certificate

This is to certify that, I am Amna Altaf S/o Altaf Hussain, group leader of FYP under registration no CIIT/FA19-
BCS-052/LHR at the Computer Science Department, COMSATS Institute of Information Technology, Lahore. I
declare that my FYP proposal is checked by my supervisor and the similarity index is 7% which is less than 20%,
an acceptable limit by HEC. The report is attached herewith as Appendix A.

Date: 27th September 2022 Name of Group Leader: Amna Altaf

Signature:

Name of Supervisor: Ms. Humaira Afzal Co-Supervisor (if any):____________________

Designation: _____________________ Designation: _____________________
Signature: _____________________ Signature: ____________________

Chapter 1: Introduction
1.1 Introduction

As we know, e-learning sites are mandatory due to this recent corona pandemic and are vastly
being implemented globally. This project is to judge currently implemented e-learning web
pages and improve and optimize them so that end-To-end users interact and advantage
themselves with an interactive, responsive, smooth, and reliable website. We decided to call this
website Umbrella Academy.

Typical characteristics of learning management systems include the capacity to automatically

make course materials accessible to students and generate progress reports based on their
performance. The Umbrella Academy provides the full functionality of a modern LMS. Users
may use Umbrella Academy's services without switching between platforms, thanks to Umbrella
Academy s integrated Zoom and interactive Chatbot.

The main focus is to benefit the students with the best and only best. Moreover, it is also best as
business criteria and reviewing the current market style that is moving towards online more than
physical as it benefits in many ways such as time and effort saving and with best interests of
students. The main focus will be on gaining subscriptions at a low price, and we will create a
business model. Hence, there is a maximum to Academy designed to help overcome several
challenges online by altering the traditional learning styles and taking it to another level of
understanding.

1. User registration and login: Students and teachers can log in through the same login
page, and all the data of students and teachers is saved on a page of MongoDB, which the
admin accesses. Students can sign up using their official email, and basic info such as age
and currently studying area is asked. Then they are allotted an ID in the database, and
when a student logs in, their id is fetched, and they can be given access accordingly.
2. Courses: Courses are uploaded by the teachers and displayed on the students'
dashboards. Each course has a description and a trailer video so students can better
understand the teacher's voice and accent and know whom they are paying. Courses will
have a chat box integrated into the specific teacher's email, so if a student has a query
about a subject, they can ask the teacher before registering. After registration, students
can ask for a (zoom) video meeting hosted by teachers and join through a link by
students.
3. Search Component: For students who want to search a particular course or any
teacher's profile, a search component will be added to the navbar using ES6 syntax,
allowing students.
4. Video Conference: A zoom component allows teachers to create a link through which
other teachers and students can join, and the host can present the lecture or present the
meeting, and the meeting will have features such as mute, video on off, recording, etc.
 5. Refer a friend: We can refer a friend, and they can join through the link to get an
additional referral discount for the buyer (of a particular course) and the referrer (for
future courses).
6. Chatbot: Designing a responsive and interactive chatbot to chat with students and
teachers.

With teacher: When a student sends a message to a teacher, it is privately sent to the
teacher in his inbox, and then the teacher has to accept the message request, reply to the
chat, reject it, or delete it. There is also an option available for teachers to block a
particular student.

With student: If a student sends a message to another student, it is in a public chat box
and displayed to every student.

7. User management: Every person on the dashboard will be managed in a particular way
according to their roles, i.e., parents, teachers, and students, according to their identity.
8. Listing:

Teachers listing: Teachers are listed and given a profile in their specializations and can
be viewed by the students to know their qualifications. This means every subject can
have multiple teachers teaching it. Every teacher will have a specialized degree to teach
that course which a student can view by visiting their profile.

Student listing: Every course finished by a student becomes his achievement, and a
degree is presented on his/hers profile as a sign of encouragement.

9. Rating component: This component rates a teacher and helps a student choose the best
teacher with good reviews for himself.

For example: If two teachers offer the same course and a student is confused about whom
to choose from, then the teacher ratings will help them. The teachers with good ratings
are the ones to choose for the course.

Students will be able to rate the course and the teacher after they complete their course.
Moreover, students can directly report an issue to the admin. After reviewing the report,
if it's valid, the admin can decrease the rating or consult that issue with a respected
teacher.

10. Teacher of the month and teacher of the week will be chosen and displayed on the
website according to their ratings.

In a Nutshell: It is an excellent user-friendly, admin-friendly, easy GUI-based website with

everything saved in the database, a quick interactive chat box, and encrypted video conferences
for students and teachers.

1.2 Objectives
Umbrella Academy's primary goal is to facilitate self-paced learning that leads to improved
problem-solving abilities in the actual world. A Learning Management System (LMS) does more
than distribute information; it also manages student enrolment, instructor communications, grade
tracking, and report generation.

Most learning management systems (LMSs) are hosted on the internet and used by many
institutions and businesses to facilitate better classroom instruction, learning strategies, and
organizational documentation. Financial services, compliance training, computer-based training,
online assessment, collaborative learning, application sharing, and so on are just a few of the
many places you could find them in use. [2]

The following are some goals that Umbrella Academy may help you achieve:

 Construction
This website will be developed on the latest framework, i.e., react, node JS, HTML 5,
CSS, and its tools.
 Effectiveness
o The proposed system will be smooth, i.e., the framework we are using is the
latest and acceptable by almost all browsers, i.e., chrome, safari, and this
would run and perform smoothly over all devices.
o JavaScript and bootstrap libraries would be imported and implemented so the
website is responsive for all the devices according to their screen sizes, and
navbars will orient and collapse accordingly.
o Mongo DB will store student and teacher data on the server in real-tim.
 Streamline training process
Using a learning management system (LMS) to centralize and simplify staff training is
innovative. Every piece of educational material may be found in the same place. In one
convenient location, students may quickly locate relevant information. SharePoint
eliminates switching between programs, emails, and internal business resources.
 Academic Progress
Learning management systems (LMS) facilitates the monitoring of employee or student
development. They may see how well individuals are doing and whether they are keeping
up with the required activities by conducting check-ins.
 Involvement of Students
Modern students have more distractions than ever, and businesses feel the pinch. Students
may benefit from a more comprehensive and exciting education. To aid in attaining
educational goals, educational information is delivered in various media, including but
not limited to text, audio, video, etc.
 Agenda of Courses
o Trailer of the course
Before buying the course, students will be provided with a trailer and course description.
It will let them decide which course they're looking for.
o Quiz and exercises
There would be an interactive quiz and a short exercise for every student who goes
through some lectures to learn and memorize things better. When using Umbrella
Academy, either a business or a school may easily monitor the development of its staff or
 pupils. They may see how well individuals are doing and whether they are keeping up
with the required activities by conducting check-ins.
 Certificate of Achievement
You will receive a certificate of completion as soon as you pass all quizzes and exercises,
but only for paid courses. After completing a training program, an LMS immediately
feeds back to workers on how they did. Both instructors and trainees benefit from this
since it provides an unbiased evaluation of their progress.
 Make things more efficient
Practical training is made more accessible with the help of Umbrella Academy. It is more
effective to let workers learn at their speed and seek clarification as they go. Instructor-
led classes have their place and time now. The main benefit is in the several forms of
automated help and advice it offers its users. Since they may learn at their speed, workers
benefit from this self-paced training.

1.3 Problem Statement

The principles of Umbrella Academy include self-directed education and the empowerment that
comes from determining one's future. Because of the accessibility of online education, learners
may now choose their next course of study without being constrained by physical proximity to a
school's physical classrooms. The flexibility of online education allows you to study precisely
what interests you from among several options. Most importantly, you have complete control
over your training and learning rate with Umbrella Academy.

The courses offered by Umbrella Academy are grounded on real-world scenarios and expert
knowledge. Using this evaluation, you may learn from the mistakes and successes of industry
experts, put what you've learned into practice, and then apply what you've learned to real-world
business settings. Once the code is cracked, Umbrella Academy awards you a certificate that will
boost your professional standing.

1.4 Assumptions
1. The user shall know about the basic functionality of the system.
2. The admin and assessor shall have login credentials to log into the system.
3. The user shall have an active email account.
4. The user shall have a device to run the web application.
5. The user shall have a built-in camera in the device or an additional hardware device to conduct
video meetings.
6. The user shall have an internet connection.
7. The user shall have a compatible web browser installed on the device to use the system.
8. The user shall be proficient in the English language.
9. The user shall know the knowledge to operate the system
10. The user shall have an active account with one of the payment services available to make a
purchase.
Constraints
1. The proposed system shall be completed by the specified time (i.e., by March 2022).
2. The budget shall not exceed the planned budget.
3. The documentation shall follow IEEE standards.
 4. The architecture and diagrams shall be according to UML standards.
5. Users can only send texts in chat.

1.5 Project Scope

The applications of Umbrella Academy extend well beyond the domain of individual education
into the realm of both industry and academia. The courses include tools and training scenarios
developed by experts around the globe to influence students' focus, self-assurance, and
perception of the course's usefulness.

The main attributes of Umbrella Academy are:

 Ability to deliver engaging and motivating training

 Centralized learning
 Simplified learning process
 Integrates social learning experience
 To offer online instruction that can be given anytime and anywhere
 User and Admin validation and authentication
 Easy for students to connect with teachers through Chatbox and video conference
 Animations will be promising and look pretty good on scrolling and hopping between
pages.
When discussing the project's scope, it is essential to say what not part of the project is. We
won't discuss the modules for registering the administrator and the teacher. Administrators and
assessors will have to meet specific criteria to get into the system, but that is outside the scope of
our project.
 Chapter 2: Requirements Analysis

2.1 Literature review / Existing system study

 Udemy is a well-liked online school with more than 130,000 courses

that will help you improve your professional prospects or acquire new abilities. More
than two-thirds of the students and faculty are based in countries other than the United
States.
Cons:
o The quality of a course offered on Udemy might vary depending on the
expertise of its teachers.
o Although Udemy's quality assurance for its courses is undoubtedly more brief
than comprehensive, it's hard to say considering the many courses available.
[1]

 Salman Khan founded the Khan Academy in 2008 and is based in

the United States as a non-profit educational resource. The project aims to provide digital
resources to aid teaching and learning. The group creates video tutorials that are meant to
be quick and informative. The website also has additional learning resources for teachers.
Cons:
o It lacks the personal interaction of having a tutor or instructor with you. [1]

 American educational institutions Harvard and MIT founded edX to meet

the demand for MOOCs. It provides college-level instruction in various subjects to
students all over the globe over the internet, with some of these classes being offered at
no cost. It also studies how users learn by analyzing their platform activity.
Cons:
o Since edX focuses on higher education and the sciences, not every subject is
covered.
o Since edX partners are given creative flexibility to design courses however
they see fit, there may be some variation in quality across different courses
offered on the platform. [1]

 On Open Culture, you may find a collection of resources

for free online learning. Students may enroll in courses at many different institutions,
covering many other topics. This portal aims to make online courses and certification
exams available to learners of all ages.
Cons:
 ○ Because anybody may sign up for an account and submit content, there is a
chance that some of the materials offered will be inaccurate or irrelevant to your
needs. [1]

● Open Yale Courses is an initiative at Yale University that makes

all lecture videos and supplementary materials for its undergraduate classes freely
available online. Several beginning courses are available for free on Open Yale Courses.
Cons:
○ Video is paused automatically when you get new notifications
○ Sometimes it has problems with starting and connectivity. [1]

 Established in 2012 by computer science instructors at Stanford

University, Andrew Ng and Daphne Koller created Coursera Inc. to meet the need for
accessible, high-quality education in the form of massive open online courses. Coursera
collaborates with educational institutions and other organizations to provide access to
online education at all levels and on a wide range of topics.
Cons:
o Some classes may be out of reach due to high costs.
o Due to incompatibilities with some browsers, not all stimulation tasks may be
completed. [1]

 The goal of W3Schools, a free eLearning platform, is to provide

students with instruction in all areas of web design. When given a menu of learning
options, students choose the ones they're most interested in exploring. Students go
through a range of online tutorials, examinations, and courses for whatever topic they
choose to learn. To demonstrate their competence, students may take a final exam and,
for an additional cost, print out a completion certificate.
Cons:
o When they see a decline in revenue, only then do they change their tutorials and
educational materials.
o It is widely held among IT experts that w3s certificates are not respected and are
thus pointless.
o W3Schools is unique among educational resources in that it provides no visual
aids for its students besides textual instruction and code editors.
[1]

Sr# Project Similarities with Umbrella Differences with Umbrella

Academy Academy
1 Udemy ● Instructional videos ● Umbrella Academy provides
● Personalized learning integrated chatbot and zoom
dashboards services
● Practice exercises ● Umbrella Academy has a
● Learning at your prerequisite test for course
convenience and pace registration
● Student-Instructor
interactions
● Completion certificates

2 Khan ● Instructional videos ● Umbrella Academy provides

Academy ● Personalized learning integrated chatbot and zoom
dashboards services
● Practice exercises ● Umbrella Academy has a
● Learning at your prerequisite test for course
convenience and pace registration
● Umbrella Academy allows
you to select your course
instructor and interact with
the instructor
● Umbrella Academy provides
course competence
certificates to students on
course completion

3 EdX ● Instructional videos ● EdX offers some free courses

● Practice exercises which do not award
● Interactive forums for certificates
discussions ● Umbrella Academy provides
● In-class learning forums integrated chatbot and zoom
which contain university services
curriculum courses ● Umbrella Academy has a
prerequisite test for course
registration

4 Open Culture ● Offer courses in multiple ● Umbrella Academy provides

categories practice exercises
● Instructional videos ● Umbrella Academy provides
integrated chatbot and zoom
services
● Umbrella Academy offers
competence certificates on
course completion
 ● Umbrella Academy has a
prerequisite test for course
registration

5 Open Yale ● Instructional videos ● Umbrella Academy offers

Courses ● Personalized learning integrated zoom and chatbot
dashboards facilities
● Learning at your
convenience and pace

6 Coursera ● Instructional videos ● Coursera courses are free, but

● Personalized learning the certificate claim applies
dashboards charges
● Practice exercises ● Umbrella Academy provides
● Learning at your integrated chatbot and zoom
convenience and pace services
● Interactive forums for ● Umbrella Academy has a
discussions prerequisite test for course
● Competence certificates registration
on completion

7 W3school.com ● Enable personalized and ● Umbrella Academy provides

individualized learning integrated chatbot and zoom
features. services
● Learning at your ● Umbrella Academy offers
convenience and pace competence certificates on
● Practice exercises course completion
● Umbrella Academy has a
prerequisite test for course
registration

2.2 Stakeholders list

Stakeholders involved in the project:

 Final Year Project Supervisor

 Final Year Project Committee
 Final Year Project Jury
 COMSATS University Islamabad
 Developers

Users

 Admin
 Candidate
2.3 Requirements elicitation
2.3.1 Functional requirements
Admin

2.3.1.1 FR01 Login

FR01-01 The system shall enable customers to register.

FR01-02 The system shall ask for their first and last names, email addresses, and
passwords and confirm passwords.

FR01-03 The system shall ask them to verify the email address and redirect them to their
account.

2.3.1.2 FR02 Forget Password

FR02-01 The system shall enable customers to log in. The system shall check whether the
email address and password are correct. If not, the system will display a message
"login failed" or "forget password"; otherwise, it will redirect to their particular
account.

2.3.1.3 FR03 Add new course

FR03-01 The system shall allow the admin to add new courses.

FR03-02 The system shall allow the admin to add the course title

FR03-03 The system shall allow the admin to add course details.

FR03-04 The system shall allow the admin to add lectures to the course.

FR03-05 The system shall allow the admin to add assignments to the course.

FR03-06 The system shall allow the admin to add quizzes to the course

FR03-07 The system shall allow the admin to add assessors to the course.

2.3.1.4 FR04 Edit course

FR04-01 The system shall allow the admin to edit a course.

 2.3.1.5 FR05 Logout

FR05-01 The system shall allow the admin to log out.

Candidate
2.3.1.6 FR06 Register

FR06-01 The system shall allow the new candidate to register into the system.

2.3.1.7 FR07 Login

FR07-01 The system shall enable customers to register.

FR07-02 The system shall ask for First and last names, email addresses, and passwords
and confirm passwords from them.

FR07-03 The system shall ask them to verify the email address and redirect them to their
account.

2.3.1.8 FR08 Reset Password

FR08-01 The system shall allow the candidate to forget the password.

FR08-02 The system shall allow the candidate to reset the password.

2.3.1.9 FR09 Search Categories of Courses

FR09-01 The system will allow customers to search for Courses from the following
categories, i.e., Courses names, teacher names, etc.

2.3.1.10 FR10 Category & featured

FR10-01 The system will allow customers to select courses from the following categories
top-rated, top seller, etc.

FR10-02 The system will allow customers to select courses from the following categories
of courses present; systems allow users to select a particular course from
 categories.

2.3.1.11 FR11 Availability courses

FR11-01 The system will allow the customer to view all the available in-stock of products.
And the customer will be able to buy anything available in uploaded courses.

2.3.1.12 FR12 Add to wish list

FR12-01 The system shall allow the customer to view all the available courses. And
Customers will be able to use the add to wish list option for any course available
in the database.

2.3.1.13 FR13 Add to cart

FR13-01 The customer will able to add the product in the cart which he wants to purchase
and also able to view the cart.

2.3.1.14 FR14 Edit/Delete from cart

FR14-01 The system shall enable to edit or deleting the courses from the cart

2.3.1.15 FR15 Payment Method/Options

FR15-01 The system shall allow the candidate to enter personal details

FR15-02 Customers will pay from a bank card or any other wallet, i.e., apple pay or
google pay, etc.

2.3.1.16 FR16 My courses

FR16-01 The courses bought will be added to my courses and we can also download them
for offline use.

2.3.1.17 FR17 View lecture

FR17-01 The system shall allow candidates to view all lectures.

FR17-02 The system shall allow candidates to select a lecture.

FR17-03 The system shall allow the candidate to view the selected lecture

2.3.1.18 FR18 Attempt assignment

FR18-01 The system shall allow candidates to attempt assignments before the deadline.
2.3.1.19 FR19 Chat

FR19-01 The system shall allow candidates to view course progress.

FR19-02 The system shall allow candidates to access the course chatroom

FR19-03 The system shall allow candidates to view the chat in the course chatroom.

FR19-04 The system shall allow candidates to chat in the course chatroom.

2.3.1.20 FR20 Schedule meeting

FR20-01 The system shall allow candidates to select dates.

FR20-02 The system shall allow the candidate to view available slots.

FR20-03 The system shall allow candidates to schedule a meeting.

2.3.1.21 FR21 Conduct meeting

FR21-01 The system shall allow candidates to view scheduled meetings.

FR21-02 The system shall allow the candidate to conduct a meeting via zoom.

2.3.1.22 FR22 Logout

FR22-01 The system shall allow the admin to log out.

2.3.2 Non-functional requirements

2.3.2.1 NFR-1 Availability
NFR1-1 The system shall be available 24/7.

2.3.2.2 Compatibility

NFR2-1 The system shall be compatible with all web browsers

2.3.2.3 Portability

NFR3-1 The system shall be able to run on all windows and mac devices.

2.3.2.4 Security

NFR4-1 The system shall be accessible to authorized users only via the login module

NFR4-2 The system shall not allow any user to access information about any other user
other than the information the system allows via provided user views.

2.3.2.5 Reliability

NFR5-1 The system shall ensure no data is lost in case of connectivity issues.

2.3.2.6 Performance

NFR6-1 The average response time for starting a web application should be less than 10
seconds.

NFR6-2 The average response time of a query should be less than 6 seconds

NFR6-3 The average response time of loading a page should be less than 5 seconds.

2.3.2.7 Usability

NFR7-1 The users shall be able to learn the interface within an hour.

NFR7-2 The system shall allow users to mitigate errors and mistakes.

NFR7-3 The system shall have an eye-appealing design.

2.3.2.8 Maintainability

NFR8-1 The system shall be highly maintainable due to its modular structure.

NFR8-2 The source code should be maintainable, and bug identification should be easy.
 NFR8-3 The user manual will be provided to support system maintainability.

 Use case descriptions

Use Case Id 1

Use Case Name Login

Actors: 1. Admin
2. Candidate

Description: The use case describes the process by which the admin and candidate
will log into the system.

Pre-conditions: 1. The admin and candidate must contain an account.

2. The admin and candidate must fill login form.

Post-conditions: 1. The account is verified.

2. The admin and candidate are redirected to the dashboard.

Normal Flow of Events: 1. The admin and candidate enter their registered email.
2. The admin and candidate enter a password
3. The admin and candidate press the “log in” button or enter.

Alternative Flows:

Exceptions: 1. Admin/candidate/assessor account does not exist.

2. The credentials entered by the admin and candidate are invalid.
3. A server or database error occurs while logging in.

Use Case Id: 2

Use Case Name: Add new course

Actors: Admin

Description: The use case describes the process of how admin can add new course
into the system.
Pre-conditions: Admin should be logged into the system.

Post-conditions: Course is added into the system.

Normal Flow of Events: 1. The admin selects add new course option.
2. The admin adds course title.
3. The admin adds overview of the course.
4. The admin add details for the course.
5. The admin adds competences to the course.
6. The admin adds sub competences to the course.
7. The admin adds solution to the sub competences.
8. The admin selects assessors for the course.
9. The admin selects save button.

Alternative Flows:

Exceptions: Server or database error occurs while adding new course.

Use Case Id:

Use Case Name:

Actors:

Description:

Pre-conditions:

Post-conditions:

Normal Flow of Events:

Alternative Flows:

Exceptions:
Use Case Id:

Use Case Name:

Actors:

Description:

Pre-conditions:

Post-conditions:

Normal Flow of Events:

Alternative Flows:

Exceptions: