DEV Community

Cover image for Build a social network app with ReactJS, Spring Boot and MongoDB
Linh Truong Cong Hong
Linh Truong Cong Hong

Posted on

 

Build a social network app with ReactJS, Spring Boot and MongoDB

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

Live Demo:
https://psn-social-network.herokuapp.com/#/

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React