INDUSTRIAL TRAINING REPORT

On

Workforwin
held at
Web Idea Solution LLP
Submitted
In partial fulfilment
For the award of the Degree of
Bachelor of Technology
In Department of Computer Science Engineering

Submitted By:

Ankit Kumar (17CS08)

Submitted To:

Department of Computer Science & Engineering

RPS College of Engineering and Technology Mahendergarh
(2020-2021)
 Candidate Declaration
I hereby declare that the work which is being presented in the Project Report, entitled
“Web Development with React JS & Next Js” in partial fulfillment for the award of
Degree of “Bachelor of Technology” in department of Computer Science and
Engineering and submitted to the Department of Computer Science and Engineering,
RPS Group of Institution, is a record of my own investigations carried under the
Guidance of Mr Rebanta Ganguli director of Web Idea Solution LLP.

Indira Gandhi University

I have not submitted the matter presented in this Project Report anywhere for the award
of any other Degree.

Ankit Kumar
Enrolment No: 17CS08

This is to certify that the above statement made by the candidate is correct to the best
of my/our knowledge.

Signature

2
 ACKNOWLEDGMENT

It is my pleasure to be indebted to various people who directly or indirectly contributed

to the development of the work and who influenced my thinking, behaviour and act
during the project Development.

I would like to express my special thanks to my project guide Amit Dave who gave me
the golden opportunity to do the wonderful project on the topic “Web Development”,
which also helped me in doing a lot of research and I came to know about so many new
things I am really thankful to him.

We Express our sincere gratitude to Dr Rajendra Yadav (Dean of Engineering) and Dr.
J.K Gothwal (H.O.D Computer Science) for providing us an opportunity to undergo
Industrial training as part of the Curriculum.

3
 ABSTRACT

Our project is workforwin. This is a website which provides engineering student study
material, and projects related to their field of interests. It is useful in the way that it
makes an easier way for students to find online study material and project based
learning. Also it helps students in understanding core concepts of computer science so
that they can implement their learning and can learn how technology can be
implemented in real life.

In this website we have basically two modules: The first module includes the customer
module or student module and the second module includes admin module.

Students can access the website freely at any time and they can learn technology of
their own choice. Each course contains a complete project at the end. After completing
the course students can build the project so that they would be able to learn how to
convert learning into a problem solving project.

The admin module contains the access of the admin pages on the website. The admin
can change everything on the website. He has the ability to add, delete and update any
information regarding the content available.

4
 Table of Content

TITLE 1

ABSTRACT 4

LIST OF FIGURES 7

LIST OF TABLES 7

1.0 Introduction 8

1.1 Objectives 8

2.0 Project 10

2.1 Project Plane 11

2.2 Task Sheet 12

2.3 Project Selection 14

3.0 Choosing Project Path 16

4.0 Web Development 17

2.1 Website 18

2.2 Webpage 19

5.0 Project Technology 20

5.1 UI Development

5.1.1 HTML 20

5.1.2 CSS 21

5.1.3 JavaScript 22
 5.1.4 React Js 23

5.1.5 Next Js 31

5.1.6 Tailwind CSS 32

5.1.7 Material UI 33

5.1.8 VS Code 34

6.0 Scripting Languages 35

6.1 JSON 35

6.2 Features 36

6.3 Code Prettifier 37

6.4 Firebase 38

6.5 Progressive web app 39

7.0 Technical Details 40

8.0 Software Requirement Specification (SRS) 41

5.1 Hardware Requirement 42

5.2 Software Requirement 42

9 Risk Monitoring 43

9.1 Risk Minimizing 43

10 Testing 44

11 Maintenance 45

12 Screenshot 46

13 Project Closer 49

14 Project Scope 50
 15 Conclusion 51

16 Appendix 52

17 References 53

List of Figures

Figure No. Title Page No.

Figure 1.1 React Dom 26

Figure 1.2 Firebase 38

Figure 1.3 PWA 39

Figure 1.4 Testing Report 44

Figure 1.5 Maintenance 45

Figure 1.6-1.11 ScreenShots 46-48

Figure 1.12 Project Close 49

List of Tables

Table No. Title Page No.

Table 1.1 Task Sheet 12-13

7
 COMPANY PROFILE
Web idea solution is a web development company in Kolkata. It is not only an IT support
team but it is the backbone and the wall with possibilities that ensure you and your
business not only go but run dynamically on a smoother path which is provided by our
team of WIS, helping you always going extra miles and with the best of the solution to
suit your individual needs.
WIS is the leading and reputed IT support company in Sydney, Australia which we have
earned over time the unimaginable support of our team and their dedication towards
bringing out the best method that surpasses any hurdle in our client's long run.
Web Idea Solution is a more than 10-year experience company, based in India
managing over the individual, small and large type IT firm with dynamic support and
services with successes. Web Idea Solution LLP works hard and takes our fun
seriously. As an IT Support team member, not only will you contribute to state-of-the-art
and innovative projects and build a professional career, you will also enjoy the benefits
that turn your job into a passion. We move into detail with you as your business is best
known by you so as to provide you with the best of us.
 Chapter - 1

INTRODUCTION

Education, An integral part of our Indian Society and it is important for every individual
to succeed in his life and help bring change to our world. In a country with more than 1.3
billion people living, for everyone individually education is essential. To keep learning
and developing themselves and helping our environment, economy, social life to be
sustainable.

Workforwin is an interactive online learning platform providing students an

opportunity to learn by themselves at home at any time. Workforwin is the first online
learning platform which deals with project based learning for engineering students. We
deliver consecutive services to each and every student of India and also from any other
country to furnish their needs in terms of learning, education, and technology by
providing them with right guidance with good and effective study material with an online
platform. Where they can learn, they can build, and can grow.

1.1 OBJECTIVES

Searching the content and finding the most relevant content is very difficult on the
internet. Also it is very difficult to find all good content at a single place. The goal of this
website is to develop a web-based interface for students of Engineering, the website
would be easy to use and will provide valuable information. It will save the time of
students and students would be able to utilise that time in learning new concepts.

Today courses in some universities or colleges are outdated and unfortunately students
are learning these outdated courses without knowing the actual requirements of the
industry.
8
Technology gets changed every year so students are not able to keep updating
themselves due to their course curriculum.
In local and rural areas of India there are many students who want to learn Technology
but due to some circumstances they are not able to learn new things. Nowadays,
everyone has access to the internet so using our website they will be able to fulfill their
dreams.
The main goal of the website is:
1. To develop an easy-to-use web-based interface where a student can take any
course of their choice and can learn new things.
2. Students would be able to learn how to convert his learning into a real world
project.
3. Students would be able to learn how to implement data structure and algorithm
designing and how to do analysis for optimal solutions.
4. They will also be able to find study material for an engineering competitive exam.
5. Students will be able to learn how to solve a competitive coding problem.
6. They will learn how to approach a problem in an interview.

9
 Chapter - 2

PROJECT

Name: Workforwin

Technology Used:
➤ HTML
➤ CSS
➤ JavaScript
➤ React JS
➤ Next Js
➤ Tailwind CSS
➤ Material UI

Deployment Server: Firebase

Development Server: Localhost
Operating System: Window 10
Code Editor: VS Code
Performance Analysis Tool: GT Matrix / Lighthouse
Device Compatibility: Mobile / Desktop / Tabs
Team Size: 2

TECHNICAL DETAILS:
Front end is designed using HTML, CSS, Tailwind CSS, React and Next Js.
The forms are made using the React Js for designing and Node js as backend.
JavaScript, and JSON used for client side scripting and Next Js for server side
development.

10
 2.1 PROJECT PLAN

The project team will cover the following deliverables and these are all steps that need
to be done before start working on the actual projects. The whole team was dedicated
to doing pre-project analysis.

1. Choosing The Project

2. Project Scope
3. Research on Project Related Technologies
4. Resource Analysis
5. Cost Calculation
6. Acquisition of Software
7. Resource Gathering
8. Team Meeting
9. Detail Design of Project
10. Design of Interface
11. Graphic Design
12. Implementing Technology
13. Server Setup
14. Testing
15. Bug Fixing
16. Project Deployment
17. Documentation

11
 2.2 Task Sheet

Sr. No. Task Sub Tasks Time Allocated

01 Choosing The Initializing part of the project is 2 Days

Project done by finding the real-world
problem.

02 Project Scope Finding project scope, and future 2 Days

scalability

03 Research on Project React Js, Next Js, Material UI, 10 Days

Related Tailwind CSS, Firebase, Visual
Technologies Studio Code

04 Resource Analysis Finding available resources and 1 Day

resources need to be obtained.

05 Cost Calculation Calculating Cost of overall 2 Days

project.

06 Acquisition of Review of software versions, 2 Days

Software Download from Internet,
Distribution of software among
project members.

07 Resource Gathering Buying paid resources like 2 Days

Domain Name, Hosting, SSL

08 Team Meeting Meeting with team member, 3 Days

finding issues in setup, solving
doubts,

09 Detail Design of Study of web editor software, 6 Days

Project Study of modules
10 Design of Interface Main page GUI, Menus, required 5 Days
pages, contact page, Course
page, how frontend and backend
will be implemented

11 Graphic Design Designing images, logo, banner 7 Days

12 Implementing Coding for User Interface events, 20 Days

Technology Toolbars, Coding navigation
page, components

13 Server Setup Creating hosting account, 5 Days

creating process for project
setup, connecting analytical tool,
initializing server

14 Testing Development of test cases, 3 Days

validation and verification

15 Bug Fixing Solving issues occur during 4 Days

tests, optimizing

16 Project Deployment Publishing project on server 1 day

17 Documentation SRS, Test plan and test cases, 5 Days

final report

Table 1.1 Task Sheet

13
 2.3 PROJECT SELECTION

The first was project selection. While selecting the project we keep in our mind that by
using the project we will be able to solve some real-world problems. We see problems
around us and then pick a problem related to online education.

Problem Statement:
It commonly happens with a fresher student, in the initial days of engineering he doesn't
have much idea about the technology available in the market and the resources for
learning them. As he moves forward in his engineering he gets caught in a trap due to
which at the end of his engineering he doesn't have much knowledge about tech
industries and their work process for which he was preparing in his engineering.
Another big problem with the university course curriculum, which is outdated. Along
with in the classroom students learn only theoretical approaches due to which he
doesn't have any idea about how to implement his learning.
The process of hiring engineers in the industry has changed completely. Today the
industry prefers to hire such freshers who know how to work on a project as a team
rather than the student who just got good marks in theory with no idea about project
implementation. Hiring process is changing to project-based and many students are not
aware about these processes which is a big cause of not getting a job as a fresher.
We found all these problems exist on a large scale and hence we use this as our final
year project.

14
Project Scope:
As the project is based on a Real world problem which is the worst. We are
implementing only a few points of the existing actual problem using a web application.
The features of the application could be increased in the future based on the solution of
the problem. The website will revolutionize the process of online learning.

Scope -
● Providing live training
● Web based embedded Compiler
● Used Machine Learning
● Personal AI coach
● AI assistant
● Advance courses on technologies

Constraints -

Minimum number of computers is at least two which will limit the development process if
they are not available. A good internet connection is required while project
development. Computer should follow the minimum requirement as a mini 512 GB Ram
1024 X 768 monitor resolution with 24 bit colour. Visual Studio code will be required as
a code editor. Required plugins need to be installed to enhance the performance of
development. Plugins like code pretty, syntax highlighter should be installed with a live
server plugin on vs code. To see the output of the development will require a browser.
Chrome Browser will be considered good to see the web page. Chrome must have an
vs 8 engine so that it can render JavaScript files easily. A graphic designing tool is also
required to create images used on web pages.

15
 Chapter - 3

CHOOSING PROJECT PATH

There are several options at hand in terms of functionality. Depending on the

requirements a website can be made in many different ways.
Our website has around 4 different ways to complete. The elements are given below:

A. Code: Code consists of basic coding that is the basic element of a website.
B. Domain: Domain is the web address that is linked to the website server.
C. Local Server: A laptop can be used as a local server while development of the
project. It must be connected to the internet or wifi.
D. Hosting: The website needs to be placed on a server that is connected to the
internet. Usually, the large organization has its own server division. As
Accounting & Information Systems don't have any experts it should be hosted by
a 3rd party. We use firebase as our hosting.
E. ERP: To securely conduct user-related registration, payment, authorizations, etc.
Organizations often use Enterprise Resource Planning (ERP) software. ERP
ensures security and reliability. It also helps reduce hacking-related problems.
F. Server Management: If we use only a local server the overall cost will reduce
but then will need an expert to manage the server.
G. Form: A separate webpage where people can connect to admin in case they
have some issue related to the web.
H. Community: Require a software where specific content or links are available
only for team members.

16
 Chapter - 4

WEB DEVELOPMENT

4.1 Web Development

Web development Is a broad term for the work involved in developing a website for the
Internet (World Wide Web) or an internet (a private network). Web development can
range from developing the simple static single page of plain text to the most complex
web-based internet applications, electronic businesses, and social network services. A
more comprehensive list of tasks to which web development commonly refers may
include web engineering, web designing, web content development, web server, and
network security configuration, and e-commerce development. Among web
professionals “web development” usually refers to the main non-designing aspects of
building websites: writing markup and coding. Most recently web development has
come to mean the creation of a content management system or CMS. This CMS can be
made from scratch or open source. In broad terms, the CSM acts as middleware
between the database and the user through the browser. A principle benefit of a CMS is
that it allows non-technical people to make changes to their website without having
technical knowledge.

For larger organizations and businesses, web development terms can consist of
hundreds of people (web developers) and follow standard methods like Agile
methodologies while developing websites. Smaller organizations may only require a
single permanent or contracting developer, or secondary assignment to related job
positions such as a graphic designer or information system technician. Web
development may be a collaborative effort between development rather than the domain
of a designated development. There are three kinds of web developer specialization:
front-end developer, back-end developer, and full-stack developer.

17
4.2 Website

A website is a collection of related web pages, including multimedia content, typically

identified with a common domain name, and published on at least one web server. A
website may be accessible via a public Internet Protocol (IP) network, such as the
Internet, or a private local area network (LAN), by referencing a uniform resource
locator (URL) that identifies the site.

Websites have many functions and can be Used in various fashions; a website can be a
personal website, a commercial website for a company, a government website or a
non-profit organization website. Websites are typically dedicated to a particular topic or
purpose, ranging from entertainment and social networking to providing news and
education. All publicly accessible websites collectively constitute the World Wide Web,
while private websites, such as a company's website for its employees, are typically a
part of an intranet.

Web pages, which are the building blocks of websites, are documents, typically
composed in plain text interspersed with formatting instructions of Hypertext Markup
Language (HTML, XHTML). They may incorporate elements from other websites with
suitable markup anchors. Web pages are accessed and transported with the Hypertext
Transfer Protocol (HTTP), which may optionally employ encryption (HTTP Secure ,
HTTPS) to provide security and privacy for the user. The user’s application , often a
web browser, renders the page content according to its HTML markup instructions onto
a display terminal.

Hyperlinking between web pages conveys to the render the site structure and guides
the navigation of the site, which often stalls with a home page containing a directory of
the site web content. Some websites require user registration or subscription to access
content. A website consists of web pages which are interconnected to each other and
contain various data and functionalities.
18
1.3 Webpage

A web page, or webpage, is a document that is suitable for the World Wide Web and
web browsers. A web browser displays a web page on a monitor or mobile device. The
web page is what displays, but the term also refers to a computer file, usually written in
HTML or comparable markup language. Web browsers coordinate the various web
resource elements for the written web page, such as style sheets, scripts, and images,
to present the web page. Typical web pages provide hypertext that includes a
navigation bar or a sidebar menu to other web pages via hyperlinks, often referred to as
links.

On a network, a web browser can retrieve a web page from a remote web server. On a
higher level, the web server may restrict access to only a private network such as a
corporate intranet or it provides access to the World Wide Web. On a lower level, the
web browser uses the Hypertext Transfer Protocol (HTTP) to make such requests.

A static web page is delivered exactly as stored, as web content in the web server's file
system, while a dynamic web page is generated by a web application that is driven by
server-side software or client-side scripting. Dynamic website pages help the browser
(the client) to enhance the web page through user input to the server.

19
 Chapter - 5

TECHNOLOGY

Technologies that are mostly used to develop a User Interface are:

● HTML
● CSS
● JavaScript

5.1.1 HTML
Hypertext Markup Language (HTML) is the standard markup language for creating
web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it
forms a triad of cornerstone technologies for the World Wide Web. HTML was first
created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. The latest
version available is HTML5.
Web browsers receive HTML documents from a web server or from local storage and
render them into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs,
images and other objects, such as interactive forms, may be embedded into the
rendered page. It provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes and other
items. HTML elements are delineated by tags, written using angle brackets.Most tags
must be opened <h1> and closed </h1> in order to function.
Tags such as <img> and <input> introduce content into the page directly. Others such
as <p> surround and provide information about document text and may include other
tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret
the content of the page.
20
5.1.2 CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML.

CSS is used to control the style of a web document in a simple and easy way.

CSS is the acronym for "Cascading Style Sheet". This tutorial covers both the versions
CSS1,CSS2 and CSS3, and gives a complete understanding of CSS, starting from its
basics to advanced concepts.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language

intended to simplify the process of making web pages presentable.

CSS is a MUST for students and working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. I will list down
some of the key advantages of learning CSS and different type of implementation of
CSS:

Inline CSS:
In this CSS is applied in between the tags

Eg: <tag style=’styling’>Hello World</tag>

Internal CSS:
Internal CSS is applied within the same page inside the head tag we create a style
component and inside that style component we can style the tag used in the web page.

External CSS:
To implement external CSS we need to create a separate CSS file. Inside the CSS file
we will write down this style for a complete website and this stylesheet will be linked to
the main HTML page inside the header tag.

21
5.1.3 JavaScript
JavaScript, often abbreviated as "JS '', is a high-level, dynamic, untyped, and
interpreted run-time language. It has been standardized in the ECMAScript language
specification. Alongside HTML and CSS, JavaScript is one of the three core
technologies of World Wide Web content production; the majority of websites employ it,
and all modern Web browsers support it without the need for plug-ins. JavaScript is
prototype-based with first-class functions, making it a multi-paradigm language,
supporting object-oriented, imperative, and functional programming styles. It has an API
for working with text, arrays, dates and regular expressions, but does not include any
I/O, such as networking, storage, or graphics facilities, relying for these upon the host
environment in which it is embedded.

Although there are strong outward similarities JavaScript and Java, including
language name, syntax, and respective standard libraries, the two are distinct
languages and differ greatly in their design. JavaScript was influenced by programming
languages such as self and Scheme.

JavaScript is also used in environments that are not Web-based, such as PDF
documents, site specific browsers, and desktop widgets. Newer and faster JavaScript
visual machines (VMs) and platforms built upon them have also increased the popularity
of JavaScript for server-side Web applications. On the client side , developers have
traditionally implemented it as an interpreted language, but more recent browsers
perform just-in-time compilation. Programmers also use JavaScript in video-game
development, in crafting desktop and mobile applications, and in server-side network
programming with run-time environments such as Node js.

22
Cons of Using Only HTML, CSS, and JS:

1.1 Repetition of Code:

This Problem occurs when we use only HTML, CSS, and JavaScript in the
development. A website contains multiple pages and there are some components
which are common on all the pages like header and footer. If we are using only HTML
and CSS to build a website then for inserting header and footer we have to repeat the
same code again on each page.

1.2 Large Size of Project File:

If we are working on a large project then the problem of repetition of code will be a
disaster. Due to this problem the overall size of the project will become very large. On
large project CSS and JavaScript files also make overall project size very large. To
reduce the problem of CSS we are using Tailwind CSS and to solve the problem of
reputation of the code we use react JS in our project.

1.3 Slow Page Loading Speed:

When the size of a web page becomes very large then the loading speed of the
website will become very slow. To reduce the problem we can only load necessary
assets of the webpage which can be easily done by using purge cache system.

1.4 Maintenance Problem:

It becomes very difficult to maintain a large project. The folder structure of the project
will become very complex if it is not maintained properly from the start of the project.
File size of HTML, CSS websites will be very large which can be solved using
JavaScript library react JS.

23
 5.1.4 REACT JS

ReactJS is an open-source, component based front end library responsible only for the
view layer of the application. It is maintained by Facebook and a community of
Individual developers. React can be used as a base in the development of single page
or mobile applications. React JS is mainly used to build web applications and react
native is used to build native applications like Android and IOS.

Why we use React:

There are some interesting feature which we get in react development like-
● Easy to code and maintain
● Efficient debugging
● Reusability of code
● Optimized and fast applications
● Virtual DOM

React Installation:
In order to work on the react js project first, we need to install react on our system. To
install React we need to install node first which comes with NPM ( Node Package
Manager ). With the help of NPM, we will install create-react-app, and using
create-react-app we can create our react project. Along with this, we require a text
editor where we will write our react js code. Installing all the required dependencies.
Steps to install react js
● Install Node js and NPM
● Install React using cmd
npm install -g create-react-app
create-react-app "Project Name"
24
Reusability of Code:
React is based on creating components to implement which can be used later without
repetition of the code. We can directly import a component inside the webpage to use it.
The data is passed inside the component using jsx. React components solve the
problem of repetition of code hence the react project size will be smaller as compared to
project build in only HTML and CSS.
Ex:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

React Component:
React code is made of entities called components. Components can be rendered to a
particular element in the DOM using the React DOM library. When rendering a
component, one can pass in values that are known as "props":

ReactDOM.render(<Greeter greeting="Hello World!" />,

document.getElementById('myReactApp'));

In react we have two types of component:

1. Class Component
2. Functional Component

Class Component:
Class Components are declared using ES6 classes. In class we can use
ComponentDidMount, ComponentWillMount, and Constructor.

25
Functional Component:
Class Components were more popular before functional components because class
components were providing more functionality as compared to functional. Since react
hooks are introduced functional components become more popular and widely used as
a react component. A functional component is very easy to implement as compared to
a class component. With functional components we can easily define States, Props and
jsx.

Virtual DOM:
● JavaScript is based on the Real Dom concept but in react we use Virtual Dom
which is lighter and faster as compared to Real Dom.
● In virtual Dom HTML did not get updated directly.
● It updates jsx if an element got updated.
● It can directly update HTML.

Fig 1.1 React DOM

26
JSX:
JSX, or JavaScript XML, is an extension to the JavaScript language syntax. Similar in
appearance to HTML, JSX provides a way to structure component rendering using
syntax familiar to many developers. React components are typically written using JSX,
although they do not have to be (components may also be written in pure JavaScript).
JSX is similar to another extension syntax created by Facebook for PHP called XHP.
Ex:
import React from 'react'

export default class HideShow extends React.Component{

constructor(){
super();

this.state={
isHide : true
}
}

render(){
return(
<>
{
this.state.isHide?<h1>Ankit</h1>:null
}
<button onClick={()=>{this.setState({isHide:
!this.state.isHide})}}>Hide</button>
</>
)
}
}
27
 REACT JS (PROS & CONS)

It's used for handling the view layer for web and mobile apps. React also allows us to
create reusable UI components. ... React allows developers to create large web
applications that can change data, without reloading the page. The main purpose of
React is to be fast, scalable, and simple.

Pros :
➢ Easy to Learn and Use. ReactJS is much easier to learn and use. ...
➢ Creating Dynamic Web Applications Becomes Easier. ...
➢ Reusable Components. ...
➢ Performance Enhancement. ...
➢ The Support of Handy Tools. ...
➢ Known to be SEO Friendly. ...
➢ The Benefit of Having a JavaScript Library. ...
➢ Scope for Testing the Codes.

Cons :
➢ The high pace of development
➢ Poor Documentation
➢ View Part
➢ JSX as a barrier
➢ Load complete Website as a single page app
➢ Render on the client side.
➢ Show a blank page for some time when visiting the web for the first time.

28
 CLIENT SIDE RENDERING

Client-side rendering is a reasonably new approach to rendering websites, and it

didn’t really become popular until JavaScript libraries started incorporating it.

When we talk about client-side rendering, it’s about rendering content in the browser
using JavaScript. So instead of getting all the content from the HTML document itself, a
bare-bones HTML document with a JavaScript file in initial loading itself is received,
which renders the rest of the site using the browser.

With client-side rendering, the initial page load is naturally a bit slow. However, after
that, every subsequent page load is very fast. In this approach, communication with the
server happens only for getting the run-time data. Moreover, there is no need to reload

the entire UI after every call to the server. The client-side framework manages to update
UI with changed data by re-rendering only that particular DOM element.

Initially react applications are rendered on the client machine. In this server don't know
anything about the js file content. In result application will not be seo friendly. To solve
this issue we need to render a react app on a server called server side rendering.

Cons of Client Side Rendering:

● Low SEO if not implemented correctly
● The initial load might require more time
● In most cases, it requires an external library

29
 SERVER SIDE RENDERING

In server-side rendering when a user makes a request to a webpage, the server

prepares an HTML page by fetching user-specific data and sends it to the user’s
machine over the internet. The browser then constructs the content and displays the
page. This entire process of fetching data from the database, creating an HTML page
and sending it to the client happens in mere milliseconds.

Server Side Rendering Vs Client Side Rendering:

The main difference is that for SSR your service response to the browser is the HTML of
your page that is ready to be rendered, while for CSR the browser gets a pretty empty
document that links to your javaScript. That means your browser will start rendering the
HTML from your server without having to wait for all the JavaScript to be downloaded
and executed, In both cases, React will need to be downloaded and go through the
same process of building a virtual DOM and attaching events to make the page
interactive but for SSR, the user can start viewing the page while all of that is
happening. For the CSR world, you need to want all of the above to happen and then
the virtual DOM is moved to the browser DOM for the page to be viewable.

Pros of Server Side Rendering:

● Search engines can crawl the site for better SEO
● The initial page load is faster
● Great for static sites

Cons of Server Side Rendering:

● Frequent server requests.
● An overall slow page rendering.
● Full page reloads.
30
 5.1.5 Next Js

Next JS is an open source react front end development web framework. It was created
by vercel and initially released on 25th October 2016. Now it is maintained by vercel
and the open source community. The current version available is 11.0.0 it enables
functionality such as server side rendering and generating static websites for react
based web applications.

Next.js aims to have best-in-class developer experience and many built-in features,
such as:

● An intuitive page-based routing system (with support for dynamic routes)

● Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are
supported on a per-page basis
● Automatic code splitting for faster page loads
● Client-side routing with optimized prefetching
● Built-in CSS and Sass support, and support for any CSS-in-JS library
● Development environment with Fast Refresh support
● API routes to build API endpoints with Serverless Functions
● Image optimization
● Typescript support
● JIT (Just InTime Compiler) Support
● Compatible with Material UI and hero icon
● Support functionality of tailwind css

31
Installing Next JS:
In order to create the next app Node JS should be pre installed in the system with an
updated version and version more than 10.13. Creating the next app is similar to
creating a react app. By using the command npx create-next-app <Project-Name> we
can create our react project. Once the project gets installed in order to run the app we
need to run the command npm Run Dev.

5.1.6 Tailwind CSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and
rotate-90 that can be composed to build any design, directly in your markup. It is
compatible with the next JS.
● It is highly customisable we can create a custom class easily by updating the
tailwind.config.js file
● It enables building Complex responsive layout freely
● Tailwind CSS is like inline CSS which comes with inline pseudo classes
● Purging unnecessary style hence reduce all over CSS file size

Installing Next JS:

In order to work on Tailwind CSS we need to install it using by command npm install -D
tailwindcss@latest postcss@latest
1. Create a tailwind.config.js file in the root directory of the project.
2. Include tailwind to CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
3. Add tailwind post css plugin

32
 5.1.7 Material UI

Material UI is the most powerful and efficient tool to build an Application by adding
Designs and Animations and use it with technical and scientific innovation. It is basically
a design language that was developed by Google in 2014.

Material UI is an open-source, front-end framework for React components.

Material UI is based on Google's Material Design to provide a high-quality, digital

experience while developing front-end graphics.

The Material Design responsive layout grid adapts to screen size and orientation,
ensuring consistency across layouts. The grid creates visual consistency between
layouts while allowing flexibility across a wide variety of designs. Material Design's
responsive UI is based on a 12-column grid layout.

Material-UI is developed mobile-first, a strategy in which we first write code for mobile
devices, and then scale up components as necessary using CSS media queries. To
ensure proper rendering and touch zooming for all devices, add the responsive
viewport meta tag to your <head> element.

Material UI ICON

Material-UI provides icons support in three ways:

● Standardized Material Design icons exported as React components (SVG icons).
● With the SvgIcon component, a React wrapper for custom SVG icons.
● With the Icon component, a React wrapper for custom font icons.
Installation:
Material UI icon can be installed by command: npm install @material-ui/icons
33
 5.1.8 VS CODE

For the development of the project we need a code editor. I prefer to use visual studio
code as an integrated development environment. Visual studio code is software that
provides you an effective way of writing your code. One of the biggest advantages is the
auto completion of syntax. Also, it suggests the highlighted code and makes
development easy. Visual Studio Code is a source-code editor that can be used with a
variety of programming languages, including JavaScript, Go, Node.js, Python and C++.

IDE(Integrated Development Environment)

An Integrated Development Environment (IDE) is a software application that provides

comprehensive facilities to computer programmers for software development. An IDE
normally consists of at least a source code editor, build automation tools and a
debugger. Some IDEs, such as Atom , Bracket and Visual Studio Code contain the
necessary compiler, interpreter, or both.

VS Code Setup:
Steps to install the VS Code :
➔ To download visit the official website of Microsoft visual studio code.
➔ Select os and click on download.
➔ After download click to install and accept the agreement
➔ Click on Install Now & then Finish

Along with vs code I use GIT Bash which provides a command based environment and
helps in better development. To use GIT Bash with vs code we need to integrate it as an
external plugin.

34
 Chapter 6
JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy
for humans to read and write. It is easy for machines to parse and generate. It is based
on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition
- December 1999.

JavaScript Object Notation (JSON) is a standard text-based format for representing

structured data based on JavaScript object syntax. It is commonly used for transmitting
data in web applications (e.g., sending some data from the server to the client, so it can
be displayed on a web page, or vice versa).

JSON is a lightweight, text-based, language-independent data interchange format. It

was derived from the Javascript/ECMAScript programming language, but is
programming language independent. ... JSON defines a small set of structuring rules
for the portable representation of structured data.

A JSON object contains data in the form of a key/value pair. The keys are strings and
the values are the JSON types. Keys and values are separated by colon. Each entry
(key/value pair) is separated by comma. The { (curly brace) represents the JSON
object.

35
 6.2 FEATURES

Scripting Languages provide a lot of features to make development easy. These

features help a lot to the developer during the development phase of the project.

Features of JavaScript :

➢ Validating User's Input. JavaScript is very useful while using forms. ...
➢ Simple Client-side Calculations. ...
➢ Greater Control. ...
➢ Platform Independent. ...
➢ Handling Dates and Time. ...
➢ Generating HTML Content. ...
➢ Detecting the User's Browser and OS.

Features of JSON :

➢ Scalable
➢ Lightweight
➢ Easy to read and write
➢ Human readable data format

What we can do with JSON

➢ JSON is mainly used to transmit data between servers and web applications.
➢ Currently, the NoSQL database is also using JSON for storing information.

36
 6.3 CODE PRETTIFIER

The Prettifier provides code formatting and syntax highlighting for common
programming languages and file formats including JSON, CSS, HTML, XML, SQL, PHP,
Perl, Apache Config, and JavaScript, where editing often takes place outside of an IDE.

A number of code prettifiers are available in the market. These code prettiers provide
multiple functionalities like code formatting, syntax highlighting etc.

I used Prettier as a code prettifier to maintain this tak during my project development.

Features:
● An opinionated code formatter
● Supports many languages
● Integrates with most editors
● Has few options

React Syntax Highlighter:

Syntax highlighting component for React using the seriously super amazing lowlight and
refractor by wooorm.
It highlights code written in text format. So that code embedded in the web page looks
good and becomes easily readable.
To use react syntax highlighter install it by command: npm install
react-syntax-highlighter

37
 6.4 FIREBASE

Firebase is a toolset to “build, improve, and grow your app”, and the tools it gives you
cover a large portion of the services that developers would normally have to build
themselves, but don’t really want to build, because they’d rather be focusing on the app
experience itself. This includes things like analytics, authentication, databases,
configuration, file storage, push messaging, and the list goes on. The services are
hosted in the cloud, and scale with little to no effort on the part of the developer.

Features:
● Authentication
● Real Time Database
● Cloud Storage
● Firebase Hosting

Fig 1.2 Firebase

38
 6.5 PROGRESSIVE WEB APP

The web is an incredible platform. Its mix of ubiquity across devices and operating
systems, its user-centered security model, and the fact that neither its specification nor
its implementation is controlled by a single company makes the web a unique platform
to develop software on. Combined with its inherent linkability, it's possible to search it
and share what you've found with anyone, anywhere. Whenever you go to a website,
it's up-to-date, and your experience with that site can be as ephemeral or as permanent
as you'd like. Web applications can reach anyone, anywhere, on any device with a
single codebase.

Fig 1.3 PWA

39
 Chapter 7

TECHNICAL DETAILS
A number of technologies were used for performing the specific task in the project. A
number of tasks are involved in the project, Like Frontend Development , Backend
Development, Deployment.

Frontend Development :

Front-end web development is the practice of converting data to a

graphical interface, through the use of HTML, CSS, and JavaScript, so that users can
view and interact with that data.

To perform this task technologies used were : HTML, CSS, Tailwind CSS, React
and Next Js.

Backend Development :

Back end Development refers to the server side of development where

you are primarily focused on how the site works. ... This type of web development
usually consists of three parts: a server, an application, and a database. Code written by
back end developers is what communicates the database information to the browser.

Primary focus of the project was on frontend development. It was a minor part of the
project. Nodejs was used to perform this task.

Deployment :

Deployment is the mechanism through which applications, modules,

updates, and patches are delivered from developers to users. The methods used by
developers to build, test and deploy new code will impact how fast a product can
respond to changes in customer preferences or requirements and the quality of each
change.

40
 Chapter - 8

SOFTWARE REQUIREMENT SPECIFICATION

A software requirements specification (SRS) is a document that describes what the

software will do and how it will be expected to perform. It also describes the
functionality the product needs to fulfill all stakeholders (business, users) needs.

A Software requirements specification document describes the intended purpose,

requirements and nature of a software to be developed. It also includes the yield and
cost of the software.

A software requirements specification (SRS) is a detailed description of a software

system to be developed with its functional and non-functional requirements. The SRS is
developed based on the agreement between customer and contractors. It may include
the use cases of how the user is going to interact with the software system.

41
 5.1 HARDWARE REQUIREMENTS

To develop any project hardware as well as softwares are required.

Here, We are discussing the hardware required to develop this project Workforwin.

➢ A computer System
➢ RAM (4GB minimum, 8GB recommended)
➢ ROM

5.2 SOFTWARE REQUIREMENTS

To develop any project hardware as well as softwares are required.

Here, We are discussing the hardware required to develop this project Workforwin.

➢ Any Operating System

➢ IDE
➢ Knowledge of Development Tools
➢ Browser
➢ Server

42
 Chapter 9
RISK MONITORING
The most common risks and risks that have a higher impact have been included in the
risk management plan, so that the team can monitor the risks over the project period. All
the risks related to the current phase of the project are discussed in each meeting. The
project manager, senior web programmer and members will discuss the risks and their
current state.Risk monitoring is a part of monitoring and controlling. It will be a
continuous process over the project life. As each risk approaches it will be updated in
the risk register.

9.1 RISK MINIMIZING

As the risks are identified the project manager and web programmer will face them and
together with the team, they will take the necessary steps to minimize or avoid risks.
These items will be registered to the risk register and will be included in the risk
management plan. It will provide information on whether the risks are being identified in
time and handled in a professional manner.

It is important that current and future risks are managed within the scope, time, and
resources. The project manager and senior web programmer will analyze the risks and
find the best way to mitigate or avoid them. If it is impossible to overcome this should be
considered as the constraint of the projects. To meet the project time and scope it may
be necessary to add extra resources and time. This should be only done in the
worst-case scenario. Scope and funding should only be modified in the case where no
mitigation and avoidance techniques work.

43
 Chapter 10
TESTING

Testing phase consists of testing reports of the complete website. It includes moules like
performance testing, platform compatibility.
● Tested different browser
● Tested on different viewports
● Tested on different operating system
● Analysed network report

Fig 1.4 Testing Report

44
 Chapter 11

MAINTENANCE
At its heart, project maintenance is a matter of practicing some very simple values
throughout the course of your project. It means being very intentional about tracking
your progress toward milestones and goals, instead of assuming everything will happen
as planned. It means keeping things on track through clear and continuous
communication.

Fig 1.5 maintenance

45
 Chapter 12

SCREENSHOTS

Fig 1.6 Workforwin WebSite

Fig 1.7 Competitive Course

46
Fig 1.8 Course

Fig 1.9 Projects

47
 Fig 1.10 Team

Fig 1.11 Contact Form

48
 Chapter 13
PROJECT CLOSER
It is the last phase of the project. After implementation of the project, the results are
acquired, but some tasks remain still working. These small tasks continue to the last
phase and continue until they are fully closed.

Fig 1.12 Project Close

Our main activities to close the project:
● Close all open tasks
● Prepare and present project results
● Provide the results to the Department
● Close monitoring tools for the project
● Complete documentation
● Lessons learned discussion.
49
 Chapter - 13

FUTURE SCOPE AND ENHANCEMENT

As the project is based on a Real world problem which is the worst. We are
implementing only a few points of the existing actual problem using a web application.
The features of the application could be increased in the future based on the solution of
the problem. The website will revolutionize the process of online learning.

Scope -
● Providing live training
● Web based embedded Compiler
● Used Machine Learning
● Personal AI coach
● AI assistant
● Advance courses on technologies

Future Enhancement :

★ AI assistants can be added for virtual conversation with users.

★ A database can be added to store the data of the user.
★ Machine Learning can be used for showing the content related to the
user’s interest.

50
 CONCLUSION
The purpose and objective of the workforwin project is achieved. By providing valuable
content to engineering students. Projects are uploaded on web development and
machine learning. Good quality images are used in courses to explain concepts more
clearly. For hard and complex topics video solutions are provided. Informative blogs are
written to provide updates and information. Modification may be done on the page of
project updates. Some major items have been presented in the appendix section. It is
possible to complete the project in less time. Some more team members may need to
implement more features in the project. Successfully deployed the project on server and
analyzed performance after deployment.

51
 APPENDIX

SR. NO ABBREVIATION MEANING

01 W3C World wide web consortium

02 HTTP Hypertext transfer protocol

03 TCP Transmission control protocol

04 UDP User datagram Protocol

05 SSL Secure Sockets Layer

06 ERP Enterprise resource planning

52
 REFERENCES

I scrolled over various websites during my learning phase. I learned about various
technologies like HTML, CSS, JavaScript, React.js, Next Js, Firebase, and Tailwind
CSS..

Various References used :

For HTML, CSS [ W3 School ]: https://www.w3schools.com/
For JavaScript [ Tutorials Point ]: https://www.tutorialspoint.com/index.htm
For Technical Content [ Geeksforgeeks ]: https://www.geeksforgeeks.org/
For React Js [ React Js Web ]: https://reactjs.org/docs/getting-started.html
For Next Js [ Next Js web ]: https://nextjs.org/docs
For Tailwind CSS [ Tailwind CSS Web ]: https://tailwindcss.com/docs

53