Build a Linkedin clone using ReactJS, Redux, Styled-components and Firebase
This past couple weeks I created a Linkedin clone where the users can login using their Google account, add a new post with picture or video and designing a beautiful app as close as the official Linkedin website.
In this blog, I will go over the structure of the app and some important steps.
Set up the app
As usual, to set up the app, I started by creating a folder in my projects, and ran ‘npx create-react-app linkedin-clone’ which created the basics of my project.
Once the project was created, I opened it with VSCode and started cleaning up some files by deleting ‘App.test.js’, ‘logo.svg’ and ‘setupTests.js’ in my ‘src’ folder. Then I deleted everything in ‘App.css’, and added this following css in ‘index.css’:
* {
margin: 0;
}Then I deleted everything inside the header in ‘App.js’, added a simple <h> tag and deleted the ‘import logo.svg’ on top of the file :
<h1>Let's build a Linkedin clone<h1>At this point, by running ‘yarn start’ in my terminal, I am supposed to see my <h> tag rendering in the browser.
My second step was to create a Firebase project by visiting Firebase, ‘Get started’, ‘add a project’, give theproject a title (in my case linkedin-clone) and by clicking on the </> sign, registering my app as ‘linkedin-clone’ using the Test mode. Once this was done, I copied the config file that firebase provides in project setting and stored it in my notes
Structure of the app
- Components
App.js is the main component of the app which acts like a container for all the other components. By installing ‘react-router-dom’ and importing {BrowserRouter as Router, Switch and Route} from it, we can redirect the user depending which uri they are visiting. They will go the Login page if they visit the root path (‘/’) unless they are already logged in, in this case they will be redirected to the home page (this happens in the Login and Home component)
In App.js, we also dispatch an action ‘getUserAuth’ to the reducer to get the user’s information. This is done by using ‘mapDispatchToProps’, which is used for dispatching actions to the store, and using ‘connect’ from react-redux to connect the components to the Redux store.
Next the Login component where if the user is logged in, he will be redirect to the home page. If not, he will need to log in by using their Google account. So we set up Firebase on Firebase.com to enable the Google auth, then we dispatch an action that comes from Firebase. Once Firebase responds with a promise, we are going to take the payload which will be the users’ information. Then in our Login component, when the user clicks on Google auth, it will trigger a function ‘signIn’ that dispatch the signInAPI function in our actions.
The Home component will render 3 components, if the user is logged in. The Leftside, Main and Rightside components
Leftside component
Leftside and Rightside components don’t have a lot of functionalities, so I will focus on the Main. In this component, we have another component called PostModal which is when the user clicks on create a Post, this will display a form keeping the Home page as a background, very cool functionality that I just learned and that is done with CSS. We use both hooks ‘useState’ to be able to close the PostModal component, and ‘useEffect’ to get the articles.
On line 74, there is a loading spinner that will display when the new article is loading.
I used mapDispatchToProps to get the articles, which is an action handled by our reducer.
On line 134, if the user clicks on create a post, it will open the PostModal component using the handleClick function, passing the showModal as a prop.
PostModal will handle different state (editorText, shareImage, videoLink and assetArea). The editorText will allow the user to type in the textarea, shareImage and videoLink will let them add an image or video, and assetArea will set the icon to
One thing that I found out when working on this project was that I had to modify my svg in order to render properly, by adding or modifying the height and width to ‘24’ like so:
Please note that I did not display the styled-component that are part of the components. Feel free to look at the full code here.
