Posts

How to effortlessly create a free social media app using React and Nodejs?

Are you looking for a fast and scalable social media app like facebook? Are you tired of the slowness of the existing platforms for social networking? So here is the solution for you which uses the latest technology stack for your social community. You should be able to create a basic community website in a few minutes. You can build more features as per your requirements by yourself. We assume that you have a little bit of technical knowledge to build your own community website 🙂
 
The React Social Network is an open-source project relying on React. React is a powerful javascript library for building the user interface. In this article, we tried to show some features of react components as a social network. The structure of this project is easy for a developer to create his/her own idea and environment. The app stores its data in Firebase. It uses Redux to manage the internal state of the application. And it uses Material Design and Flex-box layout for the UI, along with React. It supports signed-in users using Google and Twitter sign-in supported via Firebase). So all the data is stored on the user’s behalf based on their social identity

Let’s dive into creating your first social media app

The app has three layers and here is the flow of the application will look like:

  • Our component will trigger an action.
  • This action will do some request on Firebase real-time database.
  • Then data from Firebase will go to our reducer.
  • From reducer to store.
  • And from store component can access the data.


Nothing fancy, but it gets the job done.

1. Configure Social-firebase for firebase

We are using the firebase functions social-firebase as a backend. If you want to install this project then open this link social-firebase.

Steps are:

  1. You can get the project by using the following two ways:
    • Go to the link social-firebase and then select  “clone or download” the project downloaded to the downloads
    • You may get a clone of the project from the terminal command like
  2. Now you have to create a project on firebase. To create the project on firebase you can go to the link for the guidance enabling the cloud firestore and follow the following instructions
    • Open the Firebase console.
    • Click “Add Project“.
    • The “Add Project” window opens.
    • The start screen of the Firebase console opens.
    • The “Enter app details” screen opens.
    • Continue the configuration by following the on-screen instruction.
    • Now the app is created.
  3. Now the app is created on the firebase, then there is a need to map your cloned app with the firebase app:
    • Go to firebase project
    • Select the project setting
    • Select service accounts refer to the image “Select Service Account”
    • Go to admin SDK configuration snippet refer to the image “Generate Private Key”
    • And then select “Generate New Private Key” refer to the image “Generate Private Key”
    • The generated key has been saved to your system downloads, you can use the code in the project which you downloaded on the system.

      Select Service Account

      Generate Private Key

  4. For new projects developer should create a new file  serviceAccountKey.json, Open your downloaded project on your system and follow the following instructions:
    • Using terminal go to your project folder
    • Then go to functions directory using the command: cd functions
    • Then go to src directory using the command: cd src
    • Then create a directory config using the command: mkdir config
    • Then go to the directory config using the command: cd config
    • Now create a file serviceAccountKey.json using the command: touch serviceAccountKey.json
    • Open the file serviceAccountKey.json and paste the code which your generated private key code in the file and save the file.
  5. Also, you should create a new file name secureKey.json at the path functions/src/config/secureKey.json. This file including two fields. Private key (privateKey) to create the token and Public key (publicKey) for token validation. You can generate on your own (Safe/Recommended) or use the following example (Unsafe/Not Recommended).
    • Using terminal go to your project folder
    • Go to functions directory using the command: cd functions
    • Then go to src directory using the command: cd src
    • Then go to config directory using the command: cd config
    • Create a file with name secureKey.json using the command:  touchsecureKey.json
    • Open the filesecureKey.json and copy the above code and paste the code which your generated private key code in the file and save the file.
  6. Now you have to register your app for web App on the firebase, please follow the following instructions:
    • Go to firebase console
    • Select your project
    • Select the project setting
    • Go at  general
    • Select the web app icon just after the add app button refer to the image “Select Webapp”
    • Register your app with app nickname, checked the firebase hosting box then  click on register app refer to the image  “Register app”
    • Press next refer to image “Select Next”
    • Press again next refer to image “Select Again Next”
    • Then press on select console refer to image “Select Console”

      Select Webapp

      Register app

      Select Next

      Select Again Next

      Select Console

  7. To get the database URL, please follow the following steps:
    • Go to firebase console
    • Then select your project
    • Go to project setting
    • Select configure at firebase SDK snippet.
    • Copy the database URL refers to the image “Get Database URL”
  8. Now return to your system project and add the copied code in the file serviceAccountKey.json by the following steps:
    • Go to the project folder
    • Then got to the file functions/src/config/serviceAccountKey.json
    • Open the file in the atom editor and paste the copied code refer to the image “Get DataBase URL” and save.

      Get Database URL

  9. Now get the project id from the firebase app refer to the image “Project Id” copy the code.
    • Open your project in Atom Text editor and move to the “.firebaserc”  which exists inside the main project directory folder and paste the project Id here and save.

      Project Id

  10. Now to implement algolia console search register your app on algolia, follow the following steps:
    • Go to the link algolia console
    • Register your app
    • Fill the app name and remaining details
  11. To get the keys of algolia for the project, please  follow the steps
    •  Go to Algolia Console
    • Select your project
    • Select the API keys
    • Copy the application id refers to the image “Algolia Application Id”

      Algolia Application Id

    • Then copy the  algolia Admin id refers to the image “Algolia Admin Id”

      Algolia Admin Id

    • Then copy the  algolia Search Key refer to the image “Algolia Search key”

      Algolia Search key

  12. Now using of ReCaptcha in your app, need to register app at recaptcha, follow the following steps:
    • Open the link create App at Recaptcha
    • Fill the app name at level input box refer to the image  “Create Recaptcha 1”
    • Select the ReCaptcha type to refer to the image  “Create Recaptcha 1”
    • Enter the domain for dev server use localhost refers to the image  “Create Recaptcha 1”
    • Then accept the services refer to the image  “Create Recaptcha 2”
    • Press the submit button refers to the image  “Create Recaptcha 2”
    • Now ReCaptcha for an app created

      Create Recaptcha 1

      Create Recaptcha 2

  13. Now you need Recaptcha secret key to put in your project, therefore go to recaptcha and select your register app and get the following key
    • ReCaptcha.secretkey:

      Recaptcha SecretKey key

  14. There is a need to update the package.json file in your project, do the following steps:
    • Go to the terminal and reach the project directory
    • Then go to functions directory using the command: cd functions
    • Open the file package.json
    • Search the key “set:config”
    • Update the key with updated value as you get the above like firebase, algolia, Recaptcha refer to the below code
  15.  Set the runtime value in the project file “.runtimeconfig.json” steps are:
    • Come back to your project directory and
    • Use the command “ls -as” to show the dot extensions files
    • Open the file “.runtimeconfig.json” the file
    • Fille the values you from the above like as given below:
  16. Now in your project remove the hardcoded value for database URL in the file index.ts the steps are:
    • Via terminal go to the project directory
    • Then go to functions directory using the command: cd functions
    • Then go to index.ts file using the command: cd src/data/index.ts
    • Move to the “admin.initializeApp” method
    • Set “databaseURL: serviceAccount.database_url”
  17. Now if you want to build and deploy the functions at the firebase then you may face the problem and project will partially deploy at the server end. There may be limited functions deployed, via terminal an error message display and says you may deploy these functions:
    •   npm run set:config
    • npm run deploy
    • After sometimes an error message displayed with limited functions display
    • You copy the command from the terminal and deploy again.
  18. For full functions deployment on firebase, make sure that you have linked your app to a billing account if not then please linked the app to billing account like as:
    •  Go to Firebase cloud
    • Login with the same Google account as you have already use the account for a firebase app registration
    • Follow step 1 and step2 instructions for your billing account creation

      Create Billing Account

      Step 1

      Step 2.1

      Step 2.2

    • You got an opt from your bank and after submitting 1 rupee has been deducted from your account

      OTP

    • Follow the steps to get your all firebase to create the app at firebase cloud refer to the below image:
    • After that choose the project from the list and enable fir billing like the below image:
    • Now link your app to the billing account

      Linked App with Billing

    • After linking list of your app linked to billing account shows:

      Clouds App

  19. Also, there is a need to initialize the authentication, storage, database and hosting at firebase steps are:
    • Go to firebase project at the console
    • The left menu shows authentication, storage, database, hosting, and functions
    • Select authentication and enable for email/password
    • Select storage and enable to click at get started
    • Select the database and enable to click at get started
    • Select hosting and enable to click at get started
  20. Now you have done all setups:
    • Go to terminal
    • Go to your project directory
    • Go to functions directory using the command: cd functions
    • Setting the config data using the command: npm run set:config
    • Then terminal shows the message functions have been updated
    • Now deploy the project at the firebase using the command: npm run deploy

2. React-Social-Network Steps to configure the app:

Steps are:

  1. Go to GitHub and choose project React-Social-Network. We shall be using the latest version v0.7.0 as it has more features than the master branch.
  2. Get the clone from “https://github.com/red-gold/react-social-network.git”
  3. Go to the project folder.
  4. Git fetch && git checkout v0.7.0
  5. Install yarn and yarn start
  6. Then it will warn you The following changes are being made to your tsconfig.json file:
  7. As your project has been already created on a firebase in the previous section you did all for firebase :
    • Go to the firebase project
    • Select your project
    • Copy the project id refers to the image “Project Id” copy the code.
  8. Using terminal move to your project folder open the file “.firebaserc” and set the default app name same as your project id as you register your app on firebase like:
  9. To get the firebase config data, please follow the following steps:
    • Go to firebase console
    • Then select your project
    • Go to project setting
    • Select configure at firebase SDK snippet.
    • Copy the firebase config refer to the image “firebase config Data”

      firebase config Data

  10. Now update the file in your project at path src/config/environment.dev file and the steps are:
    • Using the terminal go to your project folder
    • Then go to config directory using cd src/config
    • Open the file environment.dev
    • Update the code at the firebase key which you copied like:
  11. Get the site key from Recaptcha as we have already registered the app  there follow the steps:
    • Go to the same app you create on Google Recaptcha
    • Select the app
    • Select Recaptcha type
    • Copy the siteKey refer to the image “Recaptcha siteKey”

      Recaptcha siteKey

  12. Now add the “recaptcha” key in the file in your project at path “src/config/environment.dev.ts” and also at the “src/config/environment.prod.ts” file and the steps are:
    • Using the terminal move to src/config
    • Open file environment.dev
    • Inside the file move to just below the firebase key
    • Add the key “recaptcha” having a siteKey information as you have already copied above like:
  13. Also, get the algolia data from the app registered at algolia for algoia search support follow the steps to get data:
    • Go  to the link Algolia Console
    • Select the project
    • Select API key from the left menu
    • Copy the Application id refers to the image “Algolia Application Id”

      Algolia Application Id

    • Copy the search private key refer to the image “Algolia Search key”

      Algolia Search key

  14. Now update the file at path src/config/environmet.dev.ts with above-copied data as:
    • Using terminal move to src/config
    • Open the file environment.dev.ts file
    • Inside file go to algolia key and update with copied keys like:
  15. Now again update the file src/config/environmet.dev.ts at  setting  key like as:
    • Using the terminal move to src/config
    • Open the file environmet.dev.ts
    • Go to firebase key, it contains “authDomain” as a key
    • Copy the value of “authDomain” key
    • Now move to the key “setting” inside the same file
    • Then at the bottom end of the body, you find a key “api”
    • You have to update the key with a value like :
  16. Now to remove the hardcoded value for the Recaptcha site key update the file RecaptchaComponent.tsx at path src/component/recaptcha/RecaptchaComponent.tsx follow the steps:
    • Using terminal move to src/component/recaptcha
    •  Open the file RecaptchaComponent.tsx
    • Import the config at the bottom and move to render method and use the following code
    • Use the import statement at the top of the file or header position
  17. To implement the CORS in the project need to install the cors to the project steps are:
    • Using the terminal move to your project directory
    • Install the cors using the command: yarn add cors
    • Then open the server.js file and add the following code with including your app-related credentials
  18. Update the file “.runtimeconfig.json” inside your project like:
  19. To start the project on localhost run the command:
    • Run the app using the command: yarn start
  20. Also, after updating the file environment.prod.ts at the path src/config/environment.prod.ts like environment.dev.ts
  21. To deploy the app on firebase use the command:
    • Deploy the app at firebase using the command: yarn run deploy:firebase
    • After complete deploy, it will serve you a URL to test the app using the command: serve -s build
  22. finally, you get the login page. Now you have to go signup page and fill the required data and click to signup steps are:
    • Go to the signup page
    • Fill the required data
    • Press the signup button
    • After successful registration, it will redirect you to enter code page
    • Now a verification code has been sent to you via email or sms.
    • Please check the verification code at your email or phone number.
    • Copy the code and paste in the code page in your app, congratulations you have logged now

Conclusion

In this article, you would know how to create a social media app with react-redux and firebase. Create a UI in the React component. Redux manages the states and properties and the data is stored in the firebase. After reading this article, you will know that how can you run serverless social media app. Feel free to ask any query, glad to hear from you.

References

Suggestions for further reading