DEV Community

Linh Truong Cong Hong
Linh Truong Cong Hong

Posted on

6

How to build a social network app with ReactJS

Image description

I have developed a small social network web app for educational purpose and want to share this with the community. This app is built with ReactJS for frontend, Java Spring Boot for backend and MongoDB as the database.

The app tries to mimic a few functions of Twitter, including:

  • Create post with text and image
  • The number of characters in each post is limited to 200 characters
  • Like, comment and re-post a post
  • View the number of likes, comments and shares of a post
  • Comments are toggle
  • The number of character in each comment is limited to 100 characters
  • Follow, un-follow someone
  • See who are following us and follow them back
  • Check who we are following
  • View all posts of an individual
  • View our own posts
  • List all user accounts in the entire social network (due to the number of users are still small, I did not develop search user function)

Other functions:

  • Due to limited storage space, client app compresses the uploaded image to the maximum of 250px (width or height)
  • User avatar is created by hashing user id and convert that hash code into a hexagonal image
  • Authentication and authorization use JWT
  • Responsive frontend for desktop and mobile devices

Technical stack:

  • Frontend: ReactJS, Redux Toolkit, React Router, React Bootstrap
  • Backend: Java Spring Boot
  • Database: MongoDB

If this project is useful for you , please give me a ⭐ Github star ⭐ for my effort!

Source Code:
https://github.com/linhtch90/psn-social-network-public-source

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
toluwasethomas profile image
Toluwase Thomas

Very nice project!
Can you do a detailed written tutorial on this project?
It will be very helpful.

Collapse
 
linhtch90 profile image
Linh Truong Cong Hong

I would love to do so. However, I am quite busy right now. I will try to write more about coding details in future posts, hopefully.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay