Build a simple Twitter-like Feed using ReactJS

In this story, I will explain how you can build a simple Twitter-like feed using ReactJS. In order to understand this process well, you just need to have basic working knowledge of JavaScript, JSX and ReactJS.

Source: https://www.popbuzz.com/internet/social-media/how-is-twitter-changing/

Disclaimer: I am not an experienced UI developer. I like building web apps as a hobby and I consider myself a beginner in JavaScript and ReactJS. The design process I follow here is something that I came up by myself as a quick and dirty way to prototype stuff. I’d gladly appreciate your feedback if you are an experienced full stack web application developer.

Ever wondered how social media “Feed” worked? As a life-long nerd, I have always wondered how stuff worked on the internet and yesterday I wanted to quickly prototype a social media feed just out of curiosity.

While building any User Interface, it really helps to compare the process to physically sketching and coloring the UI on sheets of papers. It is easier to align our thought process along the lines of physical design process as this is nothing more than designing using different tools, in this case, JavaScript, ReactJS, JSX and CSS.

Step 1: Design 💻

In the physical world, this is all about gathering sheets of paper, sketch pens, glue etc and sketching things out.

Question 1: What is my digital canvas here? I prefer using https://www.sketchapp.com/. Sketch is free to use and it is very intuitive. If you have used Microsoft Paint in the past, Sketch wouldn’t take more than 15minutes to figure things out and get started in order to do basic shapes and colors. So, let’s get started and draw the design of a single tweet.

Question 2: How do I correctly choose the colors? This is easy. I found a chrome extension called, “Eye Dropper”. You can use eye dropper’s dropper tool to get the HEX values of different colors from Twitter’s page. These HEX values can be used in Sketch to give colors to the shapes. The final version looks like this,

Sketch App’s screenshot

Eye dropper chrome extension for extracting colors from webpages

Step 2: Design 2 Code

Our final goal is to build a fully functional web application. So, our logical next step is to translate the design to code, which is usually done using CSS.

Question 3: How do I translate my Sketch design to CSS? Enter Zeplin. Zeplin is again an easy to use application. All you need to do is, install Zeplin and Zeplin plugin for Sketch. Quickly export the selected ArtBoard to Zeplin.

Export design from Sketch to Zeplin

Zeplin automatically translates the designs from your sketch design to CSS.

Exported design on the Zeplin canvas showing the CSS class for the design

Step 3: ReactJS — Build Component library

In order to translate our design to a working application, let’s bootstrap a bare bones React application using “create-react-app”. Install the react app and open up the project in an editor. Follow the steps from the Github repo and fire up the application by running “npm start”. At this point we have a design and we have a live application to work with. Now, let’s integrate them.

• First, let’s strip out whatever is inside App.js and App.css. App.js holds the React root component along with the app’s state and App.css contains the corresponding design.
• Copy all the CSS designs from Zeplin over to App.css.
• At this point, you simply have the designs with no corresponding React components. I generally like to have dumb components that just take data as properties and render them inside a <div></div> tag(mostly).
• In the GIF 👇, you can see how I think about React components for the Tweet container. Every part of the container is a separate component by itself. For instance, the tweet thumbnail is a separate <Image src={props.image}/> component that takes the image source url as an argument and renders it in a HTML <img/> tag. This way, we create a flexible and modular design.

React components of the Tweet container

Snippet of the React component library

• The “className” fields point to the corresponding CSS class in App.css that we copied over from Zeplin. I like to keep the component library inside a new folder under src/ called components/.
• Now, all we need to do is, import these components inside App.js and render them inside render() function of App class.

Step 4: ReactJS — State and data

In this final piece, let’s understand how to think about the application state and feed the feed(😆 seriously no pun intended).

Question 4: How to think about the feed’s state? If you think about it, a feed is nothing but a series of tweets that show up as we keep pulling to refresh the screen. What would be an obvious choice of data structure to store this state? Of course, “Array/List”

State is a dict that has users stored as a list that contains our feed data

Question 5: Where do I get the data to feed my feed? I decided to use randomuser.me which is a simple to use API. And I am going to use the email address of the users as the tweet content. So, lets write a small function in order to pull data from this API.

getUser() function fetches data from randomuser.me and setState() is a React API to set the state.

Question 6: What is our initial state? In this case, I decided to display a single tweet. And to achieve this, let’s call getUser() inside the life cycle function, componentWillMount() (Always gets called when the root component mounts).

Step 5: ReactJS — Pull down to refresh

Question 7: How do I pull down to refresh the feed? One of the advantages of working in a JavaScript environment is npm. We can almost find anything that’s pre-built as a library package to use with our application. So we don’t have to re-invent the wheel for common use cases. In this case, let’s use react-pull-to-refresh package which is simple and easy to use. We already have the getUser() function which can be used as a callback to this component.

Step 6: Ship it 🚀

Demo gif of the final application

That’s it! We have built a simple twitter like feed. But, this is only the tip of the ice-berg. This leads me into thinking about the following interesting questions:

• How do I scale the feed? Maybe, we could move the data to a database?
• What kind of database? And, how do I populate this database? Maybe we could build an Express Server that fills the database with new tweets as they come and the ‘state’ of our application changes as we have new data in the database.

In order to get the answers to these questions, stay tuned for my next story pretty soon… 😎 In the meantime, check out the source code here 👇

https://github.com/kakaly/twitter-feed

I hope you enjoyed reading this story. And, please feel free to post your comments and feedback below. Thanks for your time! 🕐

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >