LinkedIn Clone Project Setup

LinkedIn Clone Project Setup

The LinkedIn application was built by React and the backend is powered by Firebase for authentication, building a database, and more. I will be explaining the procedure step by step.

Step 1 - creating react app

In your Vs code terminal, create a react app with: npx create-react-app linkedln-clone --template redux

This would create the react app and the "--template redux" added at the end would provide a redux template. Once it is done loading, you can open the app by typing:

npm start

Step 2 - setting up your firebase

Firebase is an application that provides services to developers; things like authentication, database, hosting, and more.

If you don't have an account, you would be required to register. If you do have an account, go ahead and create a new project. It is a three-step process.

Click on Create a New Project, and give it a name.

You can either enable google analytics or ignore it, I enabled it.

Pick a location for analytics. I left mine in the United States, the default.

Once the project has been created, we would need to make some settings.

Click on the firestore database. This will take you to another page with "cloud firestore" as its headline.

Click on Create the Database, which would trigger a popup.

Click on Start in text mode and press Next.

The next popup would require you to pick the location for your cloud storage which cannot be changed afterward - pick a location and press Enable to finish the setup.

The next setup would be on the Authentication

Click on Authentication, when taken to the authentication page, click on Get Started.

The next step is picking the authentication method you would like to apply to your website. Go to Email and Password and click on Enable, after which you can save it. This means users can log into your website with their emails and password. Although there are more options like phone, google, GitHub, Twitter, Facebook, and many more.

Project setup

Click on the setting icon on the left, besides "project overview", and select Project settings.

Stroll down and click on the Anchor icon which would direct you to a page to register your app - input a nickname for your app (any name would be fine and wouldn't affect your application) and also mark the checkbox with this text Also set up Firebase Hosting for this app. This would ensure your app is hosted on Firebase.

After which you can click on Register app. Once you are done registering, the second step is adding Firebase to your website.

Install Firebase on your Terminal

Copy the npm code from the Firebase website and paste it on your terminal type: npm install firebase

To check if it was successfully installed, you should type firebase --version on your terminal. It will provide you with its current version.

Back on the Firebase website, click on Next which is the third step - installing Firebase tools on your terminal.

Copy and paste on your terminal: sudo npm install -g firebase-tools

Initially, I had issues with installing Firebase on my CLI because of certain restrictions placed by PowerShell. If you are unable to install Firebase on your terminal, follow this procedure:

  • Open PowerShell as an administrator by right-clicking on the PowerShell icon and selecting "Run as administrator".

  • Type the command "Get-ExecutionPolicy" and press enter. This will show you the current execution policy set on your system.

  • If the execution policy is set to "Restricted", you will need to change it to "RemoteSigned" or "Unrestricted" to allow running scripts. You can do this by typing the command "Set-ExecutionPolicy RemoteSigned" or "Set-ExecutionPolicy Unrestricted" and pressing enter.

  • When prompted to confirm the change, type "Y" and press enter.

  • Now try running the Firebase command again and see if the issue is resolved.

Back on the Firebase website, under Project Settings:

  • Stroll down to SDK setup and configuration and click on config

  • copy the Firebase configure script and paste it into a separate file to be used later.

  • Inside the src folder, we're going to delete files we won't be needing. Leaving only index.js, App.js, index.css, and App.css.