merikbest / 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
MIT License
329 stars 109 forks source link
fullstack java javascript jwt material-ui material-ui-react microservice postgresql reactjs redux-saga s3-bucket social-network spring spring-boot spring-cloud twitter twitter-clone typescript websocket

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:

Features

Work in progress

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