LinkedIn clone

Fully responsive LinkedIn clone MVP. Live demo here.

Table of Contents

• General Info
• Technologies and Techniques used
• Features
• Screenshots
• Setup
• Project Status
• Room for Improvement

General Information

• The objectives of the project are (1) to be a placeholder for general React components I am using in other projects and (2) to be a playground for some technology, tools and thechniques I am planning to use.
• This project was planned using the Story Mapping technique.

Technologies and Techniques used

Planning and Design:

• Since there is only one resource in the project, it was developmet partially with Scrum. The duration was 3 months splited in 2-week sprints.
• The planning was done with the User Story Mapping technique, you can fin the different Story Maps created in the corresponding Features section below.
• The Wireframes implemented and to be on this project were build in Figma and can be found here. The Final UI was implemented using the official LinkedIn documentation about Colors and Typography.
• The Entity Relationship Diagram (ERD) can be found here.
• The internal project architecture was implemented following the concepts of the CLEAN Architecture.
• Overal code documentation was done leveraging JSDocs.
• GitHub Actions was used to deploy the web.

Front-end:

• ReactJS with a customized CRA template.
• Routing with react-router v6.
• Internal application state managed with Redux.
• CSS design with Tailwind CSS.
• Code Splitting was implemented to reduce loading wating times. This was achieved using Dynamic Import API and React Lazy loading components.
• The web app is 100% responsive.

Back-end:

• Back-end was implemented in Firebase. Dynamic imports were used in this case due to the heavy weigth of the Google's Firebase libraries.
• Database implemented in Firestore.
• File sorage is on Firestorage.
• The authentication is possible with Google Accounts and also Anonymously, so the users can interact easily with the project. Firebase Auth was used for this pupose.

Testing:

• Unit testing was done.
• Test coverage is 45% and is increasing using Jest and react-testing-library is being used.
• While testing, the project was run using the Chrome's Development Tools "Fast 3G" and "No Caching" options. So the app is ready for slow internet connections.
• Lighhouse was executed several times, the last result objtained was 92% overal:

Features

By clicking on the Feature name you will be redirected to the corresponsing User Story Map development in order to plan the Work to be done on each Feature.

• Sign-up with Google ✔
• Sign-in with Google and Anonymously ✔
• News Feed navigation ✔
• Add a Post ✔
• Sign-up with User and Password 🔜
• React/Comment to a post 🔜
• Create Profile 🔜
• Edit Profile 🔜
• Follow and Add new Connections 🔜
• View My Profile summary/statistics information 🔜

Screenshots

Landing Page	Landing Page responsive	News Feed

Setup

Clone this project by doing:

$ git clone https://github.com/pieroguerrero/linkedin.git

Then go to the folder you cloned the code and execute:

$ npm install

WARNING: If you are going to use other libraries to achieve other purposes be carefull and remove the caret (^) prefix that the dependency versions have.

Project Status

Project is: in progress I am constantly adding some code in order to test new techologies or concepts.

Room for Improvement

There are always room for improvement, in this project so far the thinkgs that can be improved are:

• More Unit testing coverage.
• Some parts are still pending to analyze how to apply code-splitting: New Posts listing for example.