Giter VIP home page Giter VIP logo

twitter-spring-reactjs's Introduction

Build Status codecov

Twitter clone

Twitter clone developed using Spring Boot and React.js.
The project is always updated with new features.
See more demo screenshots below.

Home page

Used Technologies:

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

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.

Next Updates

  • Advanced search
  • Queries optimization
  • Front-end testing
  • Front-end refactoring
  • Adaptive layout

Installation

  1. Install maven: link
  2. Install Java: link
  3. Install Postgresql: link
  4. Install Intellij IDEA Ultimate: link
  5. Open pgAdmin and create a new DB (name: twitter and twittertest) in Postgresql: link
  6. Add Lombok plugin to the Intellij IDEA: link
  7. Configure project like: link
  8. Add Postgresql properties to the application.properties file: link
  9. Register new AWS account: link
  10. Create new S3 bucket: link
  11. Change access from private to public in S3 bucket
  12. Add public access policy to S3 bucket (!!!important!!! see: doc, github examle or my example)
  13. Get AWS keys: link and add to the application.properties file: link
  14. Register in gmail
  15. Create google API keys: link
  16. Add google API key to the application.properties file: link
  17. Add gmail account and password to the application.properties file: link
  18. Go to link (important) and change to: “Allow less secure apps: ON”
  19. Install node.js and npm: link
  20. Open terminal in client directory and type: npm install (or yarn install)
  21. Now you can run TwitterApplication (port 8080) and open terminal in client directory and type: npm start
  22. Navigate to http://localhost:3000/home

To enter the application you can register or login:

Login: [email protected]
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

twitter-spring-reactjs's People

Contributors

merikbest avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.