/twitter-spring-reactjs

:bird: Twitter Clone with Microservice Architecture using Java 17, Spring Boot, Spring Cloud, PostgreSQL, S3 bucket, JWT, TypeScript, React.js, Redux-Saga, Material-UI

Primary LanguageTypeScriptMIT LicenseMIT

Twitter clone

Twitter clone developed with a microservice approach using the Spring Framework and React.js.
The project is always updated with new features.
See more demo screenshots below.

Home page

Used Technologies:

  • Back-end: Java 17, Spring (Boot, Cloud, Data, Security), JPA / Hibernate, PostgreSQL, JUnit, Mockito
  • Front-end: TypeScript, React.js, Redux-Saga, Material-UI, Jest, Enzyme
  • Security: JWT
  • AWS S3 bucket
  • Docker

Features

  • Authentication with JWT and Email validation. Password change.
  • Users can Add tweets, Like, Retweet, Reply, Quote tweets, Schedule tweets.
  • Users can Delete tweets, Send tweet via Direct Message, Add tweet to Bookmarks.
  • Users can Create Lists, Edit Lists, Add other users to Lists, Follow List, Pin Lists.
  • Users get notifications when someone subscribed, retweet or liked tweet.
  • Users can add Images to tweet, Create Poll and vote, Post tweets with link preview, Posts tweets with YouTube video link.
  • Websocket online chats.
  • Private user profile and lists.
  • Account Settings.
  • Users can subscribe to each other.
  • User can edit profile.
  • User can block and mute other users.
  • Users can customize site color scheme and color background.
  • Users can search tweets by hashtags and search other users and users tweets.
  • All images downloads on Amazon S3 bucket.

Work in progress

  • Advanced search
  • User mentions
  • Tweet thread
  • Front-end refactoring
  • Back-end refactoring
  • Adaptive layout

Installation

  1. Install maven: link
  2. Install Java: link
  3. Install Postgresql: link
  4. Install Intellij IDEA Ultimate: link
  5. Install Docker and Docker Desktop
  6. Add Lombok plugin to the Intellij IDEA: link
  7. Make sure Java 17 is selected: link
  8. Build the project with Maven: link
  9. In the docker-compose file link run 4 services: postgres, pgadmin, zipkin, rabbitmq link
  10. Open http://localhost:5050/browser/ and create DBs: user, tweet, chat, lists, notification, tag, topic
  11. Sign up for a new AWS account: link
  12. Create a new AWS S3 bucket: link
  13. Change access from private to public in the AWS S3 bucket
  14. Add a public access policy to the AWS S3 bucket (!!!important!!! see: doc, github examle or my example)
  15. Get AWS keys: link and add to the application.properties file: link
  16. In the image-service.yml config file add bucket, access-key, secret-key properties
  17. Sign up for gmail
  18. Create google API keys: link
  19. Add google API key to the tweet-service.yml config file
  20. Add gmail account and password to the email-service.yml config file
  21. Go to link (important) and change to: “Allow less secure apps: ON”
  22. Install node.js and npm: link
  23. Open terminal in frontend directory and type: npm install (or yarn install)
  24. Run services in this order:
    • eureka-server
    • config-server
    • api-gateway
    • user-service
    • and then all other services in any order link
  25. Open terminal in frontend directory and type: npm start or run via package.json
  26. Navigate to http://localhost:3000/home

To enter the application you can register or login:

Login: user2016@gmail.com
Password: qwerty123

Screenshots

Add tweet

AddTweet


Add Poll

AddTPoll


Reply tweet

Reply


Tweet image modal

TweetImageModal


Notifications

Notifications


Full Notifications

FullNotifications


Search

Search


Search Videos

SearchVideos


Full tweet

FullTweet


Liked by Modal window

LikedByModalWindow


Following and Followers

FollowingAndFollowers


Trends

Trends


Bookmarks

Bookmarks


Chat

Chat


Lists

Lists


Full List

FullList


Suggested Lists

SuggestedLists


Settings

Settings


Customization

Customization


Dark theme profile

Customization