Professional Documents
Culture Documents
Im PDF
Im PDF
ON
SkillArena
Submitted in partial fulfillment of the requirements
For the award of the degree of
BACHELOR OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY &
ENGINEERING
Submitted By
Pratham Kakkar
(09115603120)
The matter presented in this project has not been submitted by us for the award of any other degree elsewhere.
Pratham Kakkar
(09115603120)
This is to certify that the above statement made by the candidate is correct to the best of my knowledge. He/She/
They are permitted to appear in the External Examination.
The B. Tech Major Project Viva-Voce Examination of Pratham Kakkar (Enrollment No: 09115603120), has been
held on ……………………………….
I would like to acknowledge the contributions of the following persons, without whose help
and guidance this report would not have been completed.
Pratham Kakkar
(09115603120)
Course Certificate
Table of Contents
ABSTRACT ............................................................................................................................................ 7
Chapter-1:
Introduction… .................................................................................................... 8
1.1 : Introduction to E-Learning ........................................................................ 8
1.2 : Introduction to the Company ..................................................................... 9
1.3 : Introduction to the Project… .................................................................... 10
Chapter-3:
Diagrams ............................................................................................................ 14
3.1 : DFD for admin ............................................................................................ 14
3.2 : DFD for updation of details .........................................................................15
3.3 : User Flow… .................................................................................................. 16
Chapter 6:
Conclusion… ...................................................................................................... 31
Abstract
Electronic learning, sometimes known as e-learning, is one of the most crucial parts of
today's world. E-learning refers to any type of learning or teaching that is aided by
technology. Whether or whether networked learning is used, knowledge and communication
systems use specialized media to carry out academic processes. While advancements in terms
of devices and curriculum continue, the term is likely to be used to refer both out-of-
classroom and in-classroom educational experiences via technology. E-learning is the transfer
of skills and knowledge using a computer and a network. Web-based learning, computer-
based learning, virtual education opportunities, and digital collaboration are all included in e-
learning apps and processes. The Internet, intranet/extranet, audio or video cassette, satellite
television, and CD-ROM are all used to provide content. It can be self-paced or instructor-led
and incorporates text, image, animation, streaming video, and audio as well as other material.
Abbreviations like CBT (Computer-Based Training), IBT (Internet-Based Training) or WBT
(Web-Based Training) are used as synonyms to e-learning. these days one will still realize
these terms being used, together with variations of e-learning corresponding to e-learning, E-
learning, and eLearning. The terms are going to be utilized throughout this text to point their
validity beneath the broader nomenclature of E-learning. Because of its flexibility, the
demand for e-learning has been increasing day by day. E-learning systems are gaining
attention among students and academics because they are location and time independent,
which solves the flexibility problems in learning new things. Most e-learning systems are
implemented on the Internet. The elearning system needs to be standardized due to increasing
demand to increase the quality of existing systems. Therefore, the purpose of this e-learning
platform is to provide students with knowledge through this website. The required software is
readily available and easy to use. This website will offer many courses and students can
access these courses for their learning purposes. Courses are available for free and also paid
depending on how the lecturer chooses to publish their course. Therefore, it will help students
make better use of resources.
Chapter-1
Introduction
1. Introduction to E-learning
Nowadays e-learning is a mainly online-based learning process. This technique uses
Internet technology to design, implement, manage, support and enhance learning, and
can greatly improve learning performance. E-learning uses electronic technologies for
the teaching and learning method. large number of e-learning definitions; however, all
definitions describe the general use of electronic media in the context of the teaching
and learning process. K.H.Fee defines e-learning as any learning that involves the use
of the internet or intranet. The term e-learning encompasses many things, especially
online learning, distributed learning, virtual learning, networked or web-based
learning.
Since the letter "e" in e-learning means "electronic", e- learning includes all academic
activities managed by professionals, individuals, teams or organizations, online or
offline, synchronous or asynchronous via computers, networked or standalone and
alternatively electronically working devices. Although there are various disadvantages
and advantages, we should not always see e-learning as a form of communication. It
would pose some challenges for the teachers to understand the students' perceptions
or views about the courses where face-to-face communication does not take place. As
the world becomes more and more connected every day, all kinds of services are
going digital. And the teaching profession is no different. From old-school academics
to the latest generation of knowledgeable people, everyone seems to be engaging with
e-learning media.
Platforms like Udemy, Coursera, and Khan Academy have thrived in this market.
With the right platform with elegant features, you can build an e-learning empire
together and grow teachers and students. This is why we tend to build an e-learning
empire and allow educators or teachers and students to grow with the right tools and
also the right mindset.
My task was to be a part of the development team and rebuild the website from
scratch with modern technology.
The team found React to be the perfect for the problem due to its popularity,
community backing, and single-page application solution. React uses a declarative
paradigm that makes it easier to reason about your application and aims to be both
efficient and flexible. It designs simple views for each state in your application, and
React will efficiently update and render just the right component when your data
changes. The declarative view makes your code more predictable and easier to debug.
The backend team supported us with new APIs as per our demand.
We also improvised the User Interface of the application as per modern paradigms.
Chapter-2
System Requirement Specification
• To design and develop a fully responsive landing page and home page with
information regarding the company as well as basic knowledge about the courses
offered and the mentors.
• To design and develop a fully responsive admin panel dashboard which stores
data regarding various courses, mentors and price ranges in a database.
• To create a sign/sign up page with authentication for various users and admins to
log in and check their stats.
• To help fix UI/UX design bugs and also suggest new changes.
2. Software Requirement
2.3. NodeJS
• NodeJS version greater than 14 is required for installation of the node
modules.
• Node.js is an open-source, cross-platform, back-end JavaScript runtime
environment that runs on a JavaScript Engine and executes JavaScript code
outside a web browser, which was designed to build scalable network
applications
React_js
HTML 5
CSS
Java Script
4. Hardware Requirements
• Standard keyboard
• Standard mouse
Chapter-3
Diagrams
1. Tech-Stack Used
A stack is an arrangement of “things” kept in order one over the other. A
technology stack is a set of technologies that are stacked together to build any
application. Popularly known as a technology infrastructure or solutions stack,
technology stack has become essential for building easy-to-maintain, scalable
web applications.
The technology stack determines the type of applications you can build, the level
of customizations you can perform, and the resources you need to develop your
application.
Most tech stacks are a combination of frontend and backend technologies like
JavaScript (user interface), Python (programming language), MongoDB
(database), and Apache (server).
In general, a tech stack can be a frontend tech stack, backend tech stack, or a mix
of both—i.e., a full stack.
For most web applications, the choice of front end remains similar. Modern
web applications are based on HTML, CSS, JavaScript, TypeScript, or
frameworks based on JS, like React, Vue, and Express.
• HTML
HTML (Hypertext Markup Language) defines the basic layout and
structure of your pages. For example, the sections, bulleted points, and
tables are created using HTML tags.
Web page development: - HTML is used to create pages which are
rendered over the web. Almost every page of web is having html tags in it
to render its details in browser.
• CSS
All the styling that’s applied to the web pages comes from CSS—for
example, the green theme of the MongoDB pages.
Create Stunning Web Site: CSS handles the look and feel part of a web
page. Using CSS, you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs, variations in
display for different devices and screen sizes as well as a variety of other
effects.
• JavaScript
The dynamic elements of the page come from the JavaScript code written
by developers. For example, what happens when you hover your mouse
over an image, or when you click on a submit, like, or comment button is
decided by JavaScript events in the code.
There are many other frameworks and libraries—like Bootstrap, Vue,
React, Angular, and jQuery—that are built on JavaScript and provide
additional functionalities and common use cases, making a developer’s
life much easier.
As mentioned before, JavaScript is one of the most widely used
programming languages (Front-end as well as Back-end). It has its
presence in almost every area of software development. Some of them are
as follows: -
2. Tech-Stack Components
You can use markup like HTML and CSS stylesheets, or frameworks like
Bootstrap or Tailwind, depending on the styling needs of the project.
2.2. Programming languages
Programming languages take care of the important business logic that your
applications need. Some top programming languages are JavaScript,
TypeScript, Java, Python, Ruby, Scala, PHP, and C#.
2.3. Frameworks
2.5. Servers
A web server takes in requests (http) from the client (example, browser),
passes it on to the database for the requested information, and handles the
response. Apache httpd and Nginx are commonly used robust web servers.
2.6. Databases
There are many other components—like APIs, analytics tools, BI tools, cloud
services, and microservices—that can enhance the functions of an application.
3. ReactJS
React is a popular JavaScript library used for web development. React.js or
ReactJS or React are different ways to represent ReactJS. Today’s many large-
scale companies (Netflix, Instagram, to name a few) also use React JS. There are
many advantages of using this framework over other frameworks, and It’s ranking
under the top 10 programming languages for the last few years under various
language ranking indices.
ReactJs follows the Model View Controller (MVC) architecture, and the view
layer is accountable for handling mobile and web apps.
plain JavaScript apps, you can only structure the app in one way that
seems perfect to you.
• ReactJS applications save data in regular JavaScript variables whereas
data for plain JS apps are saved in the DOM itself and developers have to
be found from the DOM before it can be used.
• ReactJS automatically updates the UI based on modifications and updates
within the component. However, UI updates in plain JavaScript have to
perform by finding out the DOM node to update and/or remove the
elements.
That makes things move fast, particularly compared with other front-end
technologies that have to update each object even if only a single object
changes in the web application.
• Extensions
• Debugging
• React.js creates its own virtual DOM. This will improve apps
performance since JavaScript virtual DOM is faster than the regular
DOM.
• ReactJS is SEO-friendly.
Implementation
1. Github
GitHub is a web-based interface that uses Git, the open source version control
software that lets multiple people make separate changes to web pages at the
same time. As Carpenter notes, because it allows for real-time collaboration,
GitHub encourages teams to work together to build and edit their site content.
• Branch — a workspace in which you can make changes that won’t affect
the live site.
• Pull Request (PR) — the way to ask for changes made to a branch to be
merged into another branch that also allows for multiple users to see,
discuss and review work being done.
• Merge — after a pull request is approved, the commit will be pulled in
(or merged) from one branch to another and then, deployed on the live
site
• Issues — how work is tracked when using git. Issues allow users to report
new tasks and content fixes, as well as allows users to track progress on a
project board from beginning to end of a specific project.
1.2. Collaboration
• Secondly, GitHub is great for remote collaboration. For those who are not
in the same physical location (e.g. remote workers or people working
from home), an online Git is an easy solution requiring no setup for new
users. With no need to connect to the company’s VPN, it may be easier to
dump everything on a private repository on GitHub.
• This benefit is much greater to those working collaboratively on a project
which is not part of a professional environment – particularly open-source
projects. Most programmers already know how to use GitHub, and it’s
easy to point people to a GitHub page if they want to make contributions.
Online repositories are essential for open-source projects (though some
will avoid GitHub because of its acquisition by Microsoft).
1.3. Backup
2.1. Advantages
• Control over styling
Therefore, you do not have to write CSS rules yourself. These CSS
classes are the main reason why building and styling with Tailwind is so
fast.
With Tailwind’s pre-built classes, you can design the layout directly in an
HTML file. This makes it a very responsive, mobile-friendly CSS
framework. Apart from that, Tailwind has proven to be a stable
framework since its initial release. The framework was developed by top-
notch engineers, which is why bugs and breaks are rare.
Additional Features
Tailwind CSS works in the front end of a website. For this reason, it is
reasonable for developers to demand ultimate responsiveness. Well,
Tailwind provides the ability to create responsive themes for your web
applications and remove all unused CSS classes. With PurgeCSS,
Tailwind helps you keep your final CSS as small as possible.
Chapter-5
Conclusion
The sole motive of the project was to decrease the technical debt. So, when building a new
website from scratch, my motto was to give them a perfectly segregated and clean code.
In the first week, I researched and built an excellent architecture for the project according to
the needs of the project. Created separate folders with proper naming for different
responsibilities.
As the application grew larger the data transfer between different components became more
and more complex. We decided to use a central state management tool. The best we found for
our purpose was recoil as it was easier than the popular redux and there was no need to
update our data much often. The requirement was to read and write on every search.
I got a chance to study and learn many new things a fun way.
REFERENCES
1. https://skillarena.in
2. https://reactjs.org/
3. https://www.xenonstack.com/insights/reactjs-project-structure
4. https://recoiljs.org/
5. https://redux.js.org/
6. https://tailwindcss.com/
7. https://stackoverflow.com/
8. https://www.w3schools.com
9. https://react-icons.github.io/react-icons/
10.https://www.javascript.com/
11.https://www.npmjs.com/
12.https://www.npmjs.com/package/yarn