A

Progress report for Major Project

on

LinkedIn-Clone (Online Web Application)

By

Aayushi Jain

(Roll no. - 19601)

Archana Kushwaha

(Roll no. - 19615)

Under the Supervision of

Prof. R. K. Singh

Prof. Sohit Shukla

Bachelor of Technology

in

Department of Computer Science and Engineering

Kamla Nehru Institute of Technology

Sultanpur
December 2022
 DECLARATION

We, Aayushi Jain and Archana Kushwaha, students of Bachelor of Technology (Information
Technology), declare that the project titled LinkedIn-Clone, which is submitted by us to the
Department of Computer Science and Engineering.

December 2022

Aayushi Jain

Archana Kushwaha
 ACKNOWLEDGEMENT

We would like to convey our heartfelt gratitude to Prof. R. K. Singh and Prof. Sohit Shukla
and for their tremendous support and assistance for my project. The completion of the project
would not have been possible without their help and insights. We consider ourselves privileged
to express gratitude and respect towards all those who guided us throughout the project.
 ABSTRACT
This project is a web-based social media application. The project’s objective is to provide a
web-based platform for interaction between students, companies, and professionals. This
project’s approach if to create economic opportunity for every member of the global workforce.
It helps to connect the world’s professionals to make them more productive and successful.
LinkedIn allows its members (both students and employers) to create profiles and connect with
each other in an online social network which may represent real-world professional
relationships. Members can make connections with colleagues and classmates and learn about
other companies and get industry insights. We can share our thoughts and insights through a
long form publishing platform. It also provides the feature of sharing images and videos
regarding our thoughts and achievements.
 TABLE OF CONTENT

S. No. Content Page No.

1. Introduction 1

2. System Requirement Analysis 3

3. Design 4

4. Methodology 7

5. Module Implemented 9

6. Pert Chart 11

7. Conclusion 12

8. Future Scope 13

9. References 14
 INTRODUCTION

This project is aimed at developing a Web application that depicts an online social media
application for professionals. Its main purpose is to help people network professionally.

The objective of this project is to study and understand the software and hardware requirements
to build LinkedIn-Clone. In order to build such an application complete web supports, need to
be provided. A complete and efficient web application which can provides the online
interaction experience to professionals is the basic objective of this project. We will also be
using Firebase for Authentication, Database, Functions and Hosting. Firebase is a great tool to
get started with projects quickly.

We will also be using HTML, CSS, ReactJs and Redux. We need Visual Studio Code and
NodeJS installed. This service allows a user to post updates about their achievements along
with images and videos which improves their professional profile.

1
Objective

• To study and understand the software and hardware requirements to build LinkedIn-
Clone
• Design the model and structure
• Implement and deploy the model and do the alpha and beta testing.

Limitations

There is no social-networking site or interaction platform specifically for the professionals.

People were not able to connect and interact regarding their professional career with industrial
people who are in the same field. There was a dire need for a platform which could connect
students, professional, companies with each other and hence making industrial insight easier.

Motivation
There are various factors that motivated us to make this project which are as follows:

• Establish our professional profile on a platform.

• Build and maintain our professional network.
• Find and connect with colleagues and classmates.
• Learn about other companies and get industry insights.
• Share our thoughts and insights through a long-form publishing platform.
• We can also share images and videos regarding our thoughts, achievements, etc

2
 SYSTEM REQUIREMENT AND ANALYSIS
Hardware Requirements
• Processor – Intel Core i3 or higher version
• RAM – minimum 4 GB
• Hard disk – 10 GB or higher
• System type – 64-bit operating system

Software Requirements
• Operating System – Windows 7 or equivalent, macOS

• Browser – Chrome, Firefox, or any equivalent browser

• Editor – VS Code, Sublime

• React.js – React is a declarative, efficient, and flexible JavaScript library for building
user interfaces. ReactJS is an open-source, component-based front-end library
responsible only for the view layer of the application. For designing simple views for
each state in our application. We will use it for designing the user interface and backend
of our application.

• Redux – Redux helps us to write applications that behave consistently, run in different
environments (client, server, and native), and are easy to test. To maintain large amount
of application state that will be needs in many places in our application.

• Firebase – Firebase is a set of hosting services for any type of application. It offers
NoSQL and real-time hosting of databases, content, and social authentication. It also
provides real-time communication service. We will deploy our application on firebase.

3
 DESIGN
The basic idea is as follows:

• Firstly, we will create the login component with sign-in and sign-out feature using
Google authentication. We will set up Firebase for authentication, database and
hosting.
• Secondly, we will build the user interface component of LinkedIn Clone.
• We will create publishing platform, design header component. And, build the feature
of posting content, images, and videos.
• Finally, we will deploy the application on Firebase.

DATA FLOW DIAGRAMS

A. When new User Interact with web application

4
B. When Existing User Interact with web application

5
ER DIAGRAM

6
 METHODOLOGY

The Project flow will be as follows:

1. Setup the React App:

• We make a new folder named linkedin-clone and open it with Visual Studio Code
and type the following in the terminal and press Enter: npx create-react-app
linkedin-clone
• By running this script, we created and set up a new React application
• Now, we delete some irrelevant files from the public folder: favicon.ico,
logo192.png, logo512.png and from the src folder: App.test.js, logo.svg.
• We go to App.css and remove all the contents of this file. Now, we go to index.css
and add this piece of code to remove the default margin: *{margin:0};
• Inside the App.js file, we remove the <header> and add a simple <h1>.
• Now we can finally type npm start in the terminal and start our application.

2. Building the Sign-in Page:

• We have added react router to enable react routing in our web application.
• Firstly, we installed react-router-dom package.
• Then we organized our environment by creating a folder named components in
the src folder.
• We have created a login component in our components folder in src and enabled
default route “/” in the React Router.
• We have added LinkedIn logo, Join now and Sign in nav element to the menu
bar.
• And, we have styled the page with react css styling.

3. Building the Header component:

• We have created a header and home components in our components folder in
src.

7
 • Now, we have added route “/home” for header and home component in React
Router.
• We have added logo and search and search function to the header component.
• We have added other nav elements such as home, my network, jobs, messaging,
notifications, profile, and work with their respective image icons.
• And, we have added media query in react css styling to make it responsive.

4. Building the left and right section.

5. Building the feed component.
6. Building the message functionality.
7. Live Interaction with connections.
8. Setting up Firebase.
9. Testing and deployment.

8
 MODULE IMPLEMENTED

The following component have been implemented-

SIGN-IN PAGE:
Sign-in component which is rendered by default because we configured it to be rendered it on
default route “/” in the React Router.
When the user opens the website, they will be directed to the login page. Login page has
two components – Join now for new users and Sign in for existing users. Here, google
authentication is used for unique identification of users.

9
HOME PAGE (Header component):
Home Page component is configured to be rendered on route “/home” in the React Router.
Home Page can be divided into four parts the header, left section, auto scrolling publishing
section and right section. The header contains the search function, home, my network, Live,
messaging, notifications and profile. We have added every nav element with unique image icon
respectively. We have also added sign-out feature in the drop down of profile nav element so
far.

10
PERT CHART

Fig. - PERT Chart

11
 CONCLUSION
The project entitled LinkedIn-Clone is being implemented. The system has been developed
with much care and free of errors and at the same time it is efficient and less time consuming.
The purpose of this project was to develop a web application to connect professionals. This
project helped us in gaining valuable information and practical knowledge on several topics
like designing web page application using React packages, usage of responsive templates, and
management of database using Firebase. The entire system is secured. Also, the project helped
us understanding about the development phases of a project and software development life
cycle. We learned how to test different features of a project. This project has given us great
satisfaction in having designed an application which can be used by any professionals for
sharing knowledge and giving and taking some valuable advice.

12
 FUTURE SCOPE

There is a scope for further development in our project to a great extent. A number of features
can be added to this system in future like providing video call feature among connections so
that they can get connect and share knowledge more comfortably with each other. We can also
add another feature of through which user can also add story of any event or seminar which
will lasts for 24 hours. This feature could have implemented unless the time did not limit us.

13
 REFERENCES
• https://reactjs.org/docs/getting-started.html
• https://redux.js.org/tutorials/essentials/part-1-overview-concepts
• https://firebase.google.com/docs
• https://www.w3schools.com/react/
• YouTube tutorial for Redux

______________ _______________
Prof. R. K. Singh Prof. Sohit Shukla
(Supervisor) (Supervisor)

14