Create Social Network by ReactJS

Most of the time I have been trying to find a project in real world for ReactJS which support popular libraries and data platforms. I also needed to have a flexible structure to make reusable codes which give me the ability to use same code on React Native for mobile apps.

[Update]

Please check new version of Social Network on Cloud, Telar Social .

There are some cool stuff which I used in React Social Network such as Redux, Material-UI, redux-saga, InversifyJS, etc. which I would talk about through this blog. I will talk about my experience and issues which I faced with creating this project in a nutshell. Seems a long story, however I will try to update this blog every time is possible and add more.

Before starting if you are new to React I recommend you to take a look at [react-howto](https://github.com/petehunt/react-howto) article and be sure you have general idea of React/React tools.

First let’s see how is look like

I create a Demo of React Social Network hosting on Firebase. There is point that I should mention here which this Demo is just a demo and it’s not a real social network. Here I don’t focus mostly on features of a social network, mostly I focus on the developing features of the project itself. Social network is just a case study. However, it could be a good base of a social network with ReactJS. And the structure and tools in the base of project is strong enough for easy scaling.

How I can run this project on our machine

This project created on create-react-app a powerful and well document tool for creating ReactJS apps. For developing and change on this project I recommend you to read create-react-app document.

Clone The Project and Installing node modules

For the first step we need to clone react-social-network project on your machine.

1- Be sure you have installed Node JS, Git and Yarn on your machine.
2- Open Terminal/Command Prompt on your machine.
3- To clone project file from Github Type or Copy/Paste bellow command on your terminal and press Enter key.

Clone react-social-network on local machine

3- To open project folder from Github Type or Copy/Paste bellow command on your terminal and press Enter key.

Open react-social-network project folder

4- To install npm modules Type or Copy/Paste bellow command on your terminal and press Enter key.

Create Project On Firebase

React Social Network could be connected to any data platform. Here we use Firebase free account to Store/Query Data such user profile, post, etc.

1- Login Firebase you need to sign-in by your Google Account.
2- Go to Firebase Console then click on Add Project

Firebase console

3- In add project dialog type your project name (e.g. temp) then click on Create Project.

Add project dialog

4- Then click on Continue.

Add project Dialog

5- Inside your project page go to the Database page from Develop menu then click on Get Started of Cloud Firestore Beta box.

Database page

6- In Security rules for Cloud Firestore Dialog select Start in test model then click on Enable.

For more information about Security Rules please checkout Firestore security rules page.

Security rules for Cloud Firestore dialog

7- To store some files such as images we use Firebase Storage. To enable this feature from Develop menu choose Storage page then click on Get Started.

Storage page

8- Click on GOT IT button.

For more information about Firebase Storage security rules please checkout this link.

Security storage rules dialog

9- For user authentication with Firebase we have some sign-in methods. Here we are using Email/Password method which User able Sign-up/Sign-in with Email/Password. Under Develop menu choose Authentication then Click on Setup Sign-in Method button (or choose Sign-in method tab).

React Social Network also support other sign-in methods such as:
Enable Github OAuth with Firebase
Enable Facebook OAuth with Firebase
Enable Google OAuth with Firebase

Authentication page

10- Choose Email/Password then select Enable and click on SAVE button.

Enable Email/Password authentication

Add Firebase Web Configuration

1- In Firebase Console and Project Overview page. Choose Add Firebase to your web app (</>).

2- Then from open dialog, Copy config object.

3- From react-social-network project folder open environment.dev.ts and environment.prod.ts files. Then paste firebase config from previous step in that files in firebase field according to the blow code sample.

When you paste firebase config be sure you replace [‘] with [“] as tslint rules in this project configured on [‘].

Installing Firebase backend

1- Open Terminal/Command Prompt on your machine.
2- To clone project file from Github Type or Copy/Paste bellow command on your terminal and press Enter key.

3- Go root project folder. Type or Copy/Paste bellow command on your terminal and press Enter key.

4- Installing Node Modules. Type or Copy/Paste bellow command on your terminal and press Enter key.

5- In command line type firebase login. This command connects your local machine to your Firebase account and grants access to your projects. To test that authentication worked, you can run firebase list to see a list of all of your Firebase projects. The list should be the same as the projects listed at Firebase console.Type or Copy/Paste bellow command on your terminal and press Enter key.

6- Be sure the name of firebase project for [react-social-network] and [firestore-social-backend] are same with your project name in Firebase Console. Check .firebaserc if you set correct project name in default field of projects field.

7- Set the gmail.email and gmail.password Google Cloud environment variables to match the email and password of the Gmail account used to send emails (or the app password if your account has 2-step verification enabled). Type or Copy/Paste bellow command on your terminal and press Enter key.

(Optional) : The recaptcha.secretKey key is using for recaptcha secret key in SMS verification. The phone.sourceNumber, plivo.authId and plivo.authToken are configuration from Plivo SMS Service in SMS verification.

8- To build and deploy on Firebase. Type or Copy/Paste bellow command on your terminal and press Enter key.

If you have error with above command. Try with firebase deploy command.

🌟Start Project🌟

After configuring Firebase now we are almost ready to start the project.

In Terminal go to root folder of [react-social-network] project. Type or Copy/Paste bellow command on your terminal and press Enter key.

Enjoy ;)

Please feel free for pull request or any issue!

Any contribution would be greatly appreciated by ❤️.

Track my open source projects on Github/Qolzam.

If you it’s helpful to you and you want me to continue this topic series, let me know by hitting clap 👏 button.

If you see any thing which improve my knowledge and the audience please let me know by your comment. I appreciate your feedback.

Cloud Native Version

We have released another version of React Social Network (Telar Social) based on cloud native at scale. For whom looking for a social media…

• Designed for different purpose, social network, social review, image sharing, video sharing, community blog, discussion or sharing economy network
• Easy to setup and develop.
• Open source.
• Running on public cloud, private cloud or on premises.
• Built base on Domain Driven Design architecture for microservice/cloud functions.
• Running on Kubernetes.
• High performance and at scale.

Related Topics

• Build React Social (1) : Custom Webpack or Create React App
• Telar Press