Subject – Mini Project

Submitted To - Submitted By –
Kaushal Gupta
Class – 3rd Year/ 5th Sem
Roll no. – 2102300100086
 Acknowledgement

I would like to express my profound gratitude to

Mr./Mrs.____ (name of the HOD), of ____
(designation and department name)
department, and Mr./Mrs. _____ (Dean) of
_____ university for their contributions to the
completion of my project titled _____.

I would like to express my special thanks to our

mentor Mr./Mrs. ______ for his/her time and
efforts he/she provided throughout the year. Your
useful advice and suggestions were really helpful
to me during the project’s completion. In this
aspect, I am eternally grateful to you.

I would like to acknowledge that this project was

completed entirely by me and not by someone
else.

Signature

Your name
TABLE OF CONTENTS
 Abstract

Discover a world of information with EdLearn, a

comprehensive online learning platform designed to
improve your learning experience. EdLearn is a one-
stop shop for a wide range of courses and study
resources sourced from all over the Internet and
meticulously curated to empower students of all
levels.

Key Features:
Diverse Courses: Explore a rich selection of courses
spanning a multitude of subjects, from science and
technology to arts and humanities. Our platform brings
together high-quality content from reputable sources,
ensuring a diverse and enriching learning journey.

Extensive Study Material: Access a treasure trove of study

materials, including lecture notes, textbooks, and reference
materials. EdLearn collates resources from various
educational platforms, making it convenient for you to find
comprehensive materials all in one place.
 Interactive Question Papers: Sharpen your skills with our
extensive collection of question papers and quizzes. Practice
and assess your understanding of various topics, helping you
to excel in exams and real-world applications.

Cheat Sheets for Quick Revision: Stay ahead of the curve

with our Cheat Sheets designed to provide quick and concise
summaries of key concepts. Ideal for last-minute revisions,
these Cheat Sheets serve as valuable tools for reinforcing
your knowledge.

User-Friendly Interface: EdLearn is committed to providing

a seamless and user-friendly experience. Our intuitive
interface allows you to navigate effortlessly, saving you time
and ensuring a stress-free learning experience.

Curated Recommendations: Receive personalized course

recommendations based on your preferences and learning
history. Our algorithm tailors suggestions to match your
interests, ensuring that you discover new and relevant
content to fuel your intellectual curiosity.

EdLearn is more than just a website; it's a dynamic

ecosystem dedicated to fostering a passion for learning. Join
us on this educational journey, where knowledge knows no
bounds. Embrace the future of learning with EdLearn – where
education meets innovation.
 Chapter 1
Introduction

EdLearn is an innovative online learning platform

designed to revolutionize education by providing a
comprehensive and interactive learning experience. This
project report outlines the key aspects of EdLearn,
including its objectives, features, development process,
and future prospects.

1. Project Objectives:
The primary objectives of Edlearn are:

• Accessible Education: Make quality education accessible to

learners worldwide through an online platform.

• Interactive Learning: Facilitate interactive and engaging learning

experiences through multimedia content, quizzes, and
collaborative tools.

• Adaptive Learning: Implement adaptive learning techniques to

cater to individual learning styles and pace.

• Diverse Course Offerings: Provide a wide range of courses across

various subjects and skill levels.
• User-Friendly Interface: Develop an intuitive and user-friendly
interface to enhance the overall user experience.

2. Features:
Edlearn boasts a variety of features that set it apart from
traditional learning platforms:

• Multimedia Content: Engaging video lectures, interactive

simulations, and real-world examples enhance the learning
experience.

• Adaptive Assessments: Customized quizzes and assessments

adapt to individual learning levels, ensuring effective knowledge
retention.

• Collaborative Tools: Discussion forums, group projects, and live

Q&A sessions foster collaboration among learners and instructors.

• Progress Tracking: Detailed analytics and progress reports help

learners and educators monitor performance and identify areas for
improvement.

• Certification and Recognition: Upon completion of courses,

learners receive certifications recognized by industry standards,
enhancing their employability.
3. Development Process:
• The development of Edlearn.study followed an agile
methodology, ensuring flexibility and responsiveness to user
feedback. The process involved the following stages:

• Market Research: Understanding the needs and preferences

of the target audience through extensive market research.

• Platform Design: Collaborating with UX/UI designers to

create an intuitive and visually appealing platform.

• Content Creation: Developing high-quality multimedia

content in collaboration with subject matter experts.

• Testing and Iteration: Continuous testing and iteration based

on user feedback to enhance platform functionality and user
experience.

• Launch and Marketing: A strategic launch plan, including

digital marketing campaigns and partnerships with
educational institutions.

4. Challenges and Solutions:

• Several challenges were encountered during the development
process, including technical issues, content quality control, and
user onboarding. These challenges were addressed through a
combination of technical solutions, rigorous quality control
processes, and user training modules.

5. Future Prospects:
• Edlearn is poised for growth and expansion. Future plans include:
• Course Expansion: Continuously adding new courses to cater to
evolving industry demands.

• Global Reach: Expanding the platform's reach to a global audience

through localization and partnerships with international educational
institutions.

• Technology Integration: Incorporating emerging technologies such

as AI and AR/VR to enhance the learning experience.

• Community Building: Fostering a vibrant online learning community

through events, webinars, and networking opportunities.
 Chapter 2
System Design

The most creative and challenging of the system life cycle is system
design. The term design describes a final system and the process by
which it is developed. The design phase focuses on the detailed
implementation of the system recommended in the feasibility study.

2.1 PROJECT MODULES

• Admin (Backend and Database)
• User

Admin (Backend and Database)

Admin is the authority who have right to manage whole operation of the
website or Application.

• Validation
• Database Management
• CI/CD
• Hosting
• Frontend Responsiveness

User
The Person who uses the Website or Application.
2.3 DATA FLOW DIAGRAM
The DFD is a network representation of the system. They are excellent
mechanism for communicating with customers during requirement analysis. A
DFD, also known as bubble chart, which clarify system requirements identifying
major transformations. It is the starting point in the system design and
decomposes the requirement specification down to the lowest level.
A DFD represents data flow between individual statement and blocks of
statement in a routine, data flow between sequential routines, data flow
between concurrent processes or a distributed computing system where each
node represents a geographically remote processing unit. DFD are quite
valuable for establishing naming conventions and names of systems, files, and
data links. It describes what flow rather than how they are proposed, so it
doesn’t depend on hardware, software and data structures or file
organizations.

NOTATIONS USED
The logic data flow diagram can be drawn using four simple notations i.e.
special symbols or icons and the notations that associates them with a specific
system. The notations are specified below:

DESCRIPTION
• Process : Describes how input data is converted to output data.
• Data Store : Describes the repositories of data in a system.
• Data Flow : Describes the data flowing between process, stores and
external entities.
• Sources : An external entity causing the origin of data.
• Sink : An external entity, which consumes the data.

DFD : LEVEL 0
DFD : LEVEL 1
• ADMIN PROCESSES

DFD : LEVEL 2
• DATA STORAGE AND CONTENT MANAGEMENT
• USER PROCESSES
 HARDWARE AND SOFTWARE SPECIFICATION

Hardware Specification
• Processor : Intel Pentium 4 with 1.5 Giga Hertz or higher
• Primary Memory : 1024MB RAM or higher
• Secondary : 20 GB Hard disk or higher
• Monitor : LCD or higher
• Keyboard : 104 keys
• Pointing Device : Mouse or Touchpad

Software Specification
• Operating System : Windows 10 or higher
• Frontend : HTML, CSS, JavaScript, React, FontAwesome’s Font, Tailwind
CSS, jQuery, Owl Carousel and Axios API Handling.
• Backend : FIREBASE (Storage and API)
• Hosting: Netlify or Heruko
 Chapter 3
Software tools Used

Front End
About Reactjs Library :
React.js, often referred to as React, is a JavaScript library for building user
interfaces, particularly for single-page applications where user interactions are
dynamic and require fast updates to the UI. Developed and maintained by
Facebook, React has gained widespread adoption in the web development
community for its efficiency and declarative approach to building components.

Key Concepts in React:

1. Components: React applications are built using components, which are
reusable and self-contained pieces of UI. Components can be simple,
representing a button or a form input, or complex, representing entire
sections of a web page.
2. 2.JSX (JavaScript XML): React uses JSX, a syntax extension for JavaScript
that allows you to write HTML-like code within your JavaScript files. JSX
makes it easier to describe what the UI should look like.
3. 3.Virtual DOM: React uses a virtual DOM to improve performance.
Instead of updating the entire DOM when a change occurs, React creates
a virtual representation of the DOM and updates only the specific parts
that changed. This minimizes the need for direct manipulation of the
actual DOM, resulting in faster updates.
4. State and Props: React components can have state, which represents the
data that can change over time. Props (short for properties) are used to
pass data from a parent component to a child component.
 5. Lifecycle Methods: React components have lifecycle methods that allow
developers to execute code at different points in a component's
existence, such as when it is mounted or updated.
Uses of React:

1. Building User Interfaces: React is primarily used for building interactive

and dynamic user interfaces. Its component-based architecture makes it
easy to create reusable UI elements.
2. Single Page Applications (SPAs): React is well-suited for building SPAs
where a single HTML page is loaded initially, and subsequent content
updates are managed dynamically without requiring full page reloads.
3. Cross-Platform Development: React can be used with frameworks like
React Native to build mobile applications for iOS and Android platforms.
This allows developers to use the same codebase for both web and mobile
applications.
4. Reusable Components: React's component-based structure promotes
code reusability. Developers can create modular components and reuse
them throughout their applications, making it easier to maintain and
update code.
5. Efficient Updates with Virtual DOM: React's use of a virtual DOM helps
optimize rendering performance by minimizing direct manipulation of the
actual DOM. This is particularly beneficial when dealing with complex and
dynamic UIs.
6. Community and Ecosystem: React has a large and active community, and
it is supported by a vast ecosystem of libraries and tools. This makes it
easier for developers to find solutions, share knowledge, and enhance
their projects.
Overall, React has become a popular choice for web developers due to its
efficiency, flexibility, and ability to create scalable and maintainable
applications.
Backend and Database
About Firebase:
Firebase is a comprehensive mobile and web application development platform
developed by Firebase, Inc. (acquired by Google). It provides a suite of services
and tools that help developers build, deploy, and scale applications quickly.
Firebase offers both backend and frontend solutions, simplifying the
development process and allowing developers to focus on creating high-quality
user experiences.

Key Features of Firebase:

1. Realtime Database: Firebase includes a NoSQL cloud database that
allows developers to store and sync data in real-time across connected
clients. It's particularly useful for applications that require collaborative
and responsive features.

2. Authentication: Firebase provides a secure and easy-to-use

authentication system that supports various identity providers, such as
Google, Facebook, Twitter, and email/password. This allows developers
to easily implement user authentication in their applications.

3. Cloud Firestore: Firebase's Cloud Firestore is a scalable and flexible

NoSQL document database. It's designed to store and sync data for web,
mobile, and server applications and offers features like real-time updates
and offline support.

4. Cloud Functions: Firebase allows developers to run backend code in

response to events triggered by Firebase features or HTTPS requests.
These serverless functions, known as Cloud Functions, enable developers
to extend and customize the functionality of their applications.
 5. Hosting: Firebase Hosting provides developers with a secure and globally
scalable web hosting solution. It supports deploying static web content,
dynamic content with Cloud Functions, and automatic SSL certificate
provisioning.

6. Cloud Storage: Firebase offers cloud storage for user-generated content,

such as images, videos, and files. This can be seamlessly integrated into
applications for storing and serving media assets.

7. Authentication: Firebase provides a secure and easy-to-use

authentication system that supports various identity providers, such as
Google, Facebook, Twitter, and email/password. This allows developers
to easily implement user authentication in their applications.

8. Cloud Messaging (FCM): Firebase Cloud Messaging is a cross-platform

messaging solution that allows developers to send notifications and
messages to users on iOS, Android, and web applications.

Uses of Firebase:

1. Mobile App Development: Firebase is widely used for building mobile

applications, providing a complete backend infrastructure,
authentication, and real-time data synchronization. It supports both
Android and iOS platforms.

2. Web App Development: Firebase can be used to build and host web
applications, providing features like hosting, authentication, and cloud
functions. The real-time database or Cloud Firestore is useful for
managing dynamic data on the web.
 3. Progressive Web Apps (PWAs): Firebase supports the development of
Progressive Web Apps, allowing developers to create web applications
that work offline, provide a native-like experience, and can be installed
on a user's device.

4. Authentication and Authorization: Firebase's authentication services

make it easy for developers to implement secure user authentication and
authorization in their applications without having to build complex
backend systems.

5. Real-time Collaboration: The real-time database and Cloud Firestore

enable developers to build collaborative applications where changes
made by one user are instantly reflected on the screens of other
connected users.

6. Serverless Computing: Cloud Functions in Firebase allows developers to

implement serverless computing, executing backend code in response to
events without managing server infrastructure.

7. App Analytics: Firebase provides analytics tools to help developers

understand user behavior, track app performance, and make data-driven
decisions to improve their applications.

Firebase's ease of use, real-time capabilities, and the integration of various

services make it a popular choice for developers looking to quickly prototype,
develop, and scale their applications.
Progressive Web Apps (PWAs) Introduction:

A Progressive Web App (PWA) is a type of web application that

leverages modern web technologies to provide users with a native app-like
experience directly through their web browsers. PWAs aim to combine the best
of both web and mobile app worlds, offering features such as offline
functionality, push notifications, and smooth performance, while remaining
accessible through a simple URL.

Key Characteristics of Progressive Web Apps:

1. Progressive Enhancement: PWAs are built with the concept of
progressive enhancement, meaning they should work for every user,
regardless of the browser or device they are using. They are designed to
take advantage of the latest web features while providing a functional
experience on older browsers.

2. Responsive Design: PWAs are responsive and adapt to different screen

sizes, ensuring a consistent and user-friendly experience across various
devices, including desktops, tablets, and smartphones.

3. Connectivity Independence: One of the key features of PWAs is their

ability to function in offline or low-network conditions. PWAs can cache
content and assets, allowing users to access certain parts of the app
even without an active internet connection.

4. App-Like Experience: PWAs provide a native app-like feel with smooth

animations, transitions, and interactions. They are often built using a
mobile-first approach and can be added to the home screen of a user's
device for quick access.
 5. Secure (HTTPS): PWAs require a secure connection (HTTPS) to ensure
data integrity and security. This is especially important for features like
service workers, which enable background synchronization and offline
capabilities.

6. Service Workers: PWAs use service workers, which are scripts that run in
the background and enable features like offline caching, push
notifications, and background synchronization. Service workers play a
crucial role in making PWAs reliable and performant.

7. App Shell Architecture: PWAs often adopt the app shell architecture,
where the basic structure of the application is cached, allowing for fast
and seamless navigation. Content is then dynamically loaded, providing a
responsive and engaging user experience.

8. Manifest File: PWAs include a manifest file, which is a JSON file that
contains metadata about the app, such as its name, icons, and theme
colours. This allows users to add the PWA to their home screen and
launch it like a native app.

Progressive Web Apps have gained popularity as a flexible and user-friendly

solution for delivering high-quality web experiences that resemble native
mobile apps. Their ability to work seamlessly across devices and provide offline
capabilities makes them a compelling choice for many developers and
businesses.
 Desktop View of Project

Mobile View of Project