INDUSTRIAL TRAINING REPORT

ON
SkillArena
Submitted in partial fulfillment of the requirements
For the award of the degree of

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE & ENGINEERING

Submitted By

Vansh Kaushik
(05096202720)

Under the guidance of

Ms.Priya Paliwal, Teacher/Mentor, CSE department

Department of Computer Science & Engineering

Dr. Akhilesh Das Gupta Institute of Technology & Management
(Guru Gobind Singh Indraprastha University, Dwarka, Delhi.)
New Delhi -110053.

 CERTIFICATE
I hereby certify that the work that is being presented in the industrial training report entitled SkillArena to the
partial fulfillment of the requirements for the award of the degree of Bachelor of Computer Science &
Engineering from Dr. Akhilesh Das Gupta Institute of Technology & Management, New Delhi. This is an
authentic record of our own work carried out during a period from March 2022 to July 2022 under the guidance of
Ms.Priya Paliwal, Designation in CSE department.

The matter presented in this project has not been submitted by us for the award of any other degree elsewhere.

Vansh Kaushik
(05096202720)

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.

(Ms.Priya Paliwal) (DR)

Designation Head, CSE

The B. Tech Major Project Viva-Voce Examination of Vansh Kaushik (Enrollment No: 05096202720), has been
held on ……………………………….

(Project Coordinators, CSE Dept.) (Signature of External Examiner)

 ACKNOWLEDGEMENT

I would like to acknowledge the contributions of the following persons, without whose help
and guidance this report would not have been completed.

I acknowledge the counsel and support of my project guide , Ms.Priya Paliwal, CSE
department, and the CTO at my company of internship (SkillArena) with respect and
gratitude, whose expertise, guidance, support, encouragement, and enthusiasm has made this
report possible. Their feedback vastly improved the quality of this report and provided an
enthralling experience. I am indeed proud and fortunate to be supervised by them.
I am thankful to, H.O.D. CSE department, Dr. Akhilesh Das Gupta Institute of
Technology & Management, New Delhi for his constant encouragement, valuable
suggestions and moral support and blessings.
I am immensely thankful to our esteemed, Prof. (Dr.) Sanjay Kumar, Director, Dr.
Akhilesh Das Gupta Institute of Technology & Management, New Delhi for his never-
ending motivation and support.
I shall ever remain indebted to, Training Coordinator CSE department and faculty and
staff members of Dr. Akhilesh Das Gupta Institute of Technology & Management, New
Delhi.
Finally, yet importantly, I would like to express my heartfelt thanks to God, my beloved
parents for their blessings, my friends/classmates for their help and wishes for the successful
completion of this project.

Vansh Kaushik
(05096202720)

 Company Letter

 Table of Contents

ABSTRACT………………………………………………………………………………………………………7

Chapter-1:
Introduc on…………………………………………………………………………………………………..8
1.1: Introduc on to E-Learning……………………………………………………………………..8
1.2: Introduc on to the Company………………………………………………………………….9
1.3: Introduc on to the Project……………………………………………………………………10

Chapter-2: SRS………………………………………………………………………………………………11
2.1: Objec ve…………………………………………………..……………………………………………11
2.2: So ware requirement…………………………………………………………………………….12
2.3: Frameworks……………………………………………………………………………………………12
2.4: Hardware Requirement…………………………………………………………………………..13

Chapter-3:
Diagrams……………………………………………………………………………………………………….14
3.1: DFD for admin…………………………………………………………………………………………14
3.2: DFD for upda on of details………………………………………………………………….….15
3.3: User Flow…………….………………………………………………………………………………….16

Chapter-4: Process Selec on…………………………………………………………………………19

4.1: Tech stack used………………………………………………………………………………………19
4.2; Implementa on……………………………………………………………………………………..28
4.3; Github…………………………………………………………………………………………………….28
4.4: Tailwind CSS……………………………………………………………………………………………30

Chapter 6:
Conclusion………………………………………………………………………………………..…………..31

ft
ti
ti
ti
ti
ti
ti
ti
ti

 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.

E-learning might be a widespread technology today and the actual conception of e-

learning is explained in this section. Because the nature of learning differs from
characteristics and activities that employ computers and the permitted network that
connects those computers, e-learning is frequently defined. E-learning, according to a
researcher, is a means of exercising and supplying data through online media, as well
as exchanging knowledge with someone on the other side of the world over the
Internet.

E-learning can be seen as a variant of self-collaborative learning and has close

collaboration with the teacher and the student and can move with each other through
websites and typical chat functions. There are various technical advances towards e-
learning and it has taken many forms, and there are various service providers offering
extremely integrated elearning environment and key among them is Moodle.

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.

2. Introduction to the company

In today’s VUCA world, theoretical learning alone will not be enough. The hour of
the need is to develop higher cognitive skills for an individual’s overall holistic
growth. At SkillArena we have re-engineered the traditional education system in
India.
Skillarena is an interactive platform for learners who are willing to enhance their
skills and expand their knowledge horizons by the advancement of science,
methodology, practical applicability, and technology. We want the youngsters to travel
their crucial journey from campus to corporate with our assistance and guidance at
every point, in case they find themselves stuck between career choices.
We aspire to become the one-stop solution to every skill development related issue in
our nation.
Skillarena encompasses an array of online courses in multiple domains of education
and knowledge. Our courses are architectured to provide the most relevant and
market-specific knowledge that comes with practical assessments. Our Arena
provides a seamless learning experience that makes the learner – skill ready. Get
ready to witness your break from traditional learning.









 Not only do we deliver quality courses, but we also deal in a wide variety of different
learning internships as well as connecting youngsters with job-providing professionals
in the industry.

3. Introduction to the project

The company SkillArena Educational Technologies had a website built a long time
ago using olden tools. Due to load and technical debt the website became slow and
obsolete with time. Also adding more features to it was really difficult due to
compatibility issues with older technologies. It also could not manage to integrate
AWS features which were now required.

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

1. Objective of the project

• 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.1. Code Editor:

• Preferably VS Code with proper extensions for ReactJs.
• VS Code, is a source-code editor made by Microsoft with the Electron
Framework, for Windows, Linux and macOS. Features include support for
debugging, syntax highlighting, intelligent code completion, snippets, code
refactoring, and embedded Git.
2.2. Modern web browser:
• Any web browser for testing the website.

• Preferably Google Chrome.

• Google Chrome is a cross-platform web browser developed by Google. It was

first released in 2008 for Microsoft Windows, built with free software
components from Apple WebKit and Mozilla Firefox. It was later ported to
Linux, macOS, iOS, and Android, where it is the default browser.

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

3. Languages and Frameworks Used

React_js
HTML 5
CSS
Java Script

 4. Hardware Requirements

• Standard processor with a speed of 2.0GHz

• 2GB RAM
• Standard colour monitor

• Standard keyboard
• Standard mouse

 Chapter-3
Diagrams

1. DFD for admin

2. DFD for updation of details

3. User-flow diagrams for admin-panel dashboard

 Chapter-4
Process Selection

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.

1.1. Front-end tech-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.

Internet Navigation: - HTML provides tags which are used to navigate

from one page to another and is heavily used in internet navigation.

Responsive UI: - HTML pages nowadays works well on all platform,

mobile, tabs, desktop or laptops owing to a responsive design strategy.

Offline Availability: - HTML pages once loaded can be made available

offline on the machine without any need of the internet.

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

Control Web: CSS is easy to learn and understand but it provides

powerful control over the presentation of an HTML document. Most
commonly, CSS is combined with the markup languages HTML or
XHTML.

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

Client-side validation: - This is really important to verify any user input

before submitting it to the server and JavaScript plays an important role in
validating those inputs at front-end itself.

Manipulating HTML Pages: - JavaScript helps in manipulating HTML

page on the fly. This helps in adding and deleting any HTML tag very
easily using JavaScript and modify your HTML to change its look and
feel based on different devices and requirements.

Presentation: - JavaScript also provides the facility of creating

presentations which gives website look and feel. JavaScript provides
RevealJS and BespokeJS libraries to build a web-based slide presentation.

Server Applications: - Node JS is built on Chrome's JavaScript runtime

for building fast and scalable network applications. This is an event based
library which helps in developing very sophisticated server applications
including Web Servers.

1.2. Back-end tech-stack

The backend or server-side tech stack consists of many components, like a

database, server, framework, and operating system. You have to choose the
server- side frameworks and tools carefully, because some technologies are

 lightweight, fast, and suitable for basic purposes, whereas some are loaded
with features that only a complex application might need.
• .NET
NET is Microsoft’s answer to Sun Microsystems’ Java platform.
Microsoft was on the Java train before .NET was released. They actually
developed a Java IDE dubbed Visual J++. Microsoft faced lawsuits from
Sun Microsystems later

So Microsoft had to create their own alternative and they came up

with .NET Framework

.NET Framework provided new programming languages: C# and Visual

Basic .NET and a new managed runtime that lets you write programs that
are more secure and with less bugs. Because it’s a new runtime layer,
programs written against .NET Framework can be run on other platforms,
specifically with the new framework called .NET Core.

The purpose should be clear now: Have a software development

ecosystem centered around the runtime and the languages rather than the
operating system. I think Microsoft has been tremendously successful in
that.

2. Tech-Stack Components

2.1. User interface

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

Frameworks provide a structure to the application and have common utilities

so that you don’t have to write every piece of logic from scratch. Some
popular web frameworks are Express, Spring, Django, Laravel, Rails,
and .NET.

2.4. Runtime environment

Runtime environment is the software in which an application is run. Runtime

provides cross-platform compatibility. Java Runtime Environment (JRE),
Node.js, and Common Language Runtime (CLR) are examples of runtime
environments.

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

Databases are an integral part of a tech stack. Whether your application is

simple or has many workflows, you need a place to store all your
information. Some popular databases are MongoDB and MySQL. Modern
data platforms like MongoDB further enhance the functionality of a database
by providing intelligent querying, aggregation, and transformation features, in
addition to data storage and retrieval.

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.

React.js is a front-end JavaScript framework developed by Facebook.

To build composable user interfaces predictably and efficiently using declarative

code, we use React. It’s an open-source and component-based framework
responsible for creating the application’s view layer.

ReactJs follows the Model View Controller (MVC) architecture, and the view
layer is accountable for handling mobile and web apps.

React is famous for building single-page applications and mobile apps.

3.1. Why do people choose to program with React?

• Fast - Feel quick and responsive through the Apps made in React can
handle complex updates.
• Modular - Allow you to write many smaller, reusable files instead of
writing large, dense files of code. The modularity of React is an attractive
solution for JavaScript's visibility issues.
• Scalable - React performs best in the case of large programs that display
a lot of data changes.
• Flexible - React approaches differently by breaking them into
components while building user interfaces. This is incredibly important in
large applications.
• Popular - ReactJS gives better performance than other JavaScript
languages due to t’s implementation of a virtual DOM.

 • Easy to learn - Since it requires minimal understanding of HTML and

JavaScript, the learning curve is low.
• Server-side rendering and SEO friendly - ReactJS websites are famous
for their server-side rendering feature. It makes apps faster and much
better for search engine ranking in comparison to products with client-
side rendering. React even produces more opportunities for website SEO
and can occupy higher positions on the search results page.
• Reusable UI components - React improves development and debugging
processes.
• Community - The number of tools and extensions available for ReactJS
developers is tremendous. Along with impressive out-of-box
functionalities, more opportunities emerge once you discover how giant
the React galaxy is. React has a vibrant community and is supported by
Facebook. Hence, it’s a reliable tool for website development.

3.2. Differences between Reactjs and Vanilla JavaScript

• ReactJS apps start with a blank HTML page. It dynamically creates the
initial state in JavaScript. However, Plain JavaScript apps start with the
initial UI created on the server side.
• React wants you to break down your UI into components. However, in
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.

3.3. ReactJS Features:

 • ReactJS apps start with a blank HTML page. It dynamically creates the
initial state in JavaScript. However, Plain JavaScript apps start with the
initial UI created on the server side.
• React wants you to break down your UI into components. However, in
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.

3.4. 3.4.3 ReactJS Features:

• JSX - JavaScript Syntax Extension

JSX is a preferable choice for many web developers. It isn't necessary to

use JSX in React development, but there is a massive difference between
writing react.js documents in JSX and JavaScript. JSX is a syntax
extension to JavaScript. By using that, we can write HTML structures in
the same file that contains JavaScript code.

• Unidirectional Data Flow and Flux

React.js is designed so that it will only support data that is flowing

downstream, in one direction. If the data must flow in another direction,
you will need additional features.

• Virtual Document Object Model (VDOM)

React contains a lightweight representation of real DOM in the memory

called Virtual DOM. Manipulating real DOM is much slower compared to
VDOM as nothing gets drawn on the screen. When any object’s state

 changes, VDOM modifies only that object in real DOM instead of

updating whole objects.

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

React supports various extensions for application architecture. It supports

server- side rendering, Flux, and Redux extensively in web app
development. React Native is a popular framework developed from React
for creating cross-compatible mobile apps.

• Debugging

Testing React apps is easy due to large community support. Even

Facebook provides a small browser extension that makes React
debugging easier and faster.

3.5. 3.4.4 ReactJS Advantages:

• React.js creates its own virtual DOM. This will improve apps
performance since JavaScript virtual DOM is faster than the regular
DOM.

• ReactJS helps to create awesome UI.

• ReactJS is SEO-friendly.

• Component and Data patterns improve readability which helps to

maintain larger apps.

• React can be used with other frameworks.

• React simplifies the complete process of the scripting environment.

• It facilitates advanced maintenance and increases productivity.

• Ensures faster rendering

 • The best thing about React is the provision of a script for mobile app
development.

• A strong community backs ReactJS.

• React JS comes with a helpful developer toolset

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.

1.1. Common Terms

• Repository (repo) — a folder in which all files and their version histories
are stored.

• Branch — a workspace in which you can make changes that won’t affect
the live site.

• Markdown (.md) — a way to write in Github that converts plain text to

GitHub code. Sites such as Atom and Sublime Text are examples of free
resources for developers using Markdown.

• Commit Changes — a saved record of a change made to a file within the

repo.

• 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

• GitHub is the ultimate tool for collaborative coding. Firstly, GitHub

contains powerful versioning software so that it can handle branching and
merging easily. This means multiple people can work on the same piece
of code, online or offline, which will be saved in the same Git.

• 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

Using an online repository should never be considered infallible, but it provides a

nice and simple way to have code and version history available online, regardless of

 what happens to your local machine. For some people, this is enough, but we stress
that a mul -solu on backup plan is always the best.

2. Tailwind CSS

2.1. Advantages
• Control over styling
Tailwind is a unique CSS framework when it comes to styling web
applications, meaning that Tailwind does not have a default theme that
you have to use like other CSS frameworks. For example, you can give
each project a different look even if you use the same elements (color
palette, size, etc.). Therefore, it’s one of the few CSS frameworks that is
not opinionated on how you should style your project.
Faster CSS Styling Process

There is no faster framework than Tailwind when it comes to styling

HTML. As a result, you can easily create good-looking layouts by styling
elements directly. This is possible because Tailwind offers thousands of
built-in classes that do not require you to create designs from scratch.

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.

Responsiveness and Security

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

ti

ti

 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