Twitter is a social media application that allows users to create tweets (that supports text, media, polls, etc.), react to tweets, retweet tweets, add comments, get notifications of engagements, and follow other users, to name a few.
Twitter works with the idea of activity feeds for showing timeline tweets and notifications.
Using Stream Feeds and the React Activity Feeds SDK from Stream, we will create a clone of Twitter. We will call this clone Streamer.
This article will be a series of tutorials broken into three parts which you can find at the end of the article or in the sidebar.
Application Demo
Twitter has many features from threads, muting conversations, retweets, reactions, and so much more. We cannot do all of that in this clone. Here is the scope of this clone:
- Sign in to the app using different user accounts
- Create new tweets
- Home page for tweets from users someone follows
- Add reactions (likes and comments) to tweets
- Profile page for users
- Follow/Unfollow users
- Show notifications of likes, comments, and follows
Here's a demo of the finished application:
Prerequisites and What You Will Learn
To understand and follow this tutorial effectively, you should have basic knowledge of React.
There is a lot for you to learn in this tutorial, like:
- Creating a new Stream Application
- Connecting and Authenticating users in your Stream app
- Creating custom hooks for shared functionality
- Using components from the activity feeds SDK to display feeds in the UI
- Customizing the activity feeds SDK by using data from exposed React Context
Let’s Build Our Twitter Clone, Streamer
The three parts of the series (with their links) are:
- Part 1 - Connecting users to Stream Feeds and Creating a tweet
In this part, you will set up a Feeds application on your Stream dashboard, create a React application for the clone, authenticate users with your Feeds app, and also add a create tweet feature. - Part 2 - Creating a Profile Page and following users
Here, you will make a profile page for users and implement the follow functionality so that users can see tweets of other users they follow on their timeline. - Part 3 - Adding Tweet Reactions, Tweet Thread, and Showing Notifications
In this last part, you will add tweet likes and comments features, tweet thread for showing details of a tweet and a notifications page.
At the end, you will have built a Twitter clone, similar to the demo. Find the full source code in the react-twitter-clone repository.
In addition to building the Twitter clone, you will also learn about the concept of activities and feeds and how it applies to keeping users engaged and connected with other users in your application. You will understand how to create relationships between feeds by subscribing one to the other and also how to manage notifications for different actions on activities.
Happy Coding!
