ReactJS, NextJS, Express
API News Feed Component
The IdeaI was scrolling through the New York Times website, and discovered this storytelling component they have done called “Bursts”. Bursts are a card style, swipeable addition to an article that allows the writer to break from more longform paragraphs of text, using a format that mimics swiping through a social media post. I have recently began working mainly in React, and I wanted to figure out a way to create a component like this. I also wanted to find a way for this card to act as a sort of all-in-one feed, allowing the user to swipe between getting their news, to checking their social media feeds.
The IssueI knew that I needed to create a responsive component, and I was having an issue using the NYT component on my desktop computer, because it was only swipeable, not clickable.
From the post comments I could see that other users were not loving their experience of the Burst component on their desktop devices. One user asked them not to push this format on desktop users, another user commenting on how this is attune to the modern users short attention span (for better or worse).
As mentioned earlier, I wanted to use React to build this component. As I later found out when beginning to pull in my API calls, it would function well to run a local server using Express that my frontend could then access to feed into my component. This also allowed me to mimic a sort of production environment, and rather than store my API calls within my component, port them over to my backend.
I wanted my component to solve these issues, and be accessible on any device at any viewport size. While the NYT generally shoots for sleek and minimal design, I believe that is actually doing them more harm than good in this case, alienating users on certain devices. I myself opened up that article on a tablet to try the swiping feature, but we can’t expect our day-to-day user to do the same.
My Tech Stack:
ReactJS, NextJS, NodeJS, Express
Issues along the wayI have used the NYT API before, which I got up and running pretty early, that was pretty straightforward. After a few minutes of researching the properties I could implement from news stories, and a little bit of date and text formatting, I had something that functions well.
However I had never before used a social media companies API. I was between Twitter (X) and Reddit, deciding to go with the latter, implementing a second feed that allows users to click between their NYT front page feed, and their Reddit popular stories feed. Reddit’s API has a slightly more convoluted approach to the properties they set up, so after some tinkering I decided on the happy medium of including the post title, author, subreddit origin, image (if available, as Reddit posts can often be only text based), upvote score, number of comments, and a link to read the full post on Reddit. With some flexbox magic I was able to differentiate the styling between a NYT post and a Reddit post, mimic something similar stylistically to each companies UI. This would ideally be a second way for our user to keep track along the way, in case they forget whether they are reading from the news or from Reddit.
The Final ProductHere is where I have landed, I have a minimal React card component, that pulls stories from the NYT top stories and the Reddit popular posts feed, using their respective API’s. I have added navigation arrows that allow the user to swipe between stories on desktop devices, the card is responsive and on mobile and tablet devices the card is swipeable as well. I added a top navigation, that allows the user to quickly and easily click between their news feed or their Reddit feed. I kept the navigation dots at the bottom, so the user can keep track of where they are in their feed of posts.
This component could be popped into a webpage or dashboard or resized to be a right or left rail feed alongside your content.
Additions and ImprovementsI would like to make additional tabs so that the user could also have access to Twitter, a sports feed, maybe even a tab that isn’t an API call, like a notepad or a to-do list. I would also like to explore hosting, which would require me reconfiguring my server, probably setting up a different backend to be hosted.
I am also worried about NSFW content on Reddit, and have already had a couple occurrences where a story might be too risque for an everyday news feed. I could either create a censor that conditionally checks for NSFW posts from Reddit (which I believe NSFW or not-NSFW is an API property), the user could then click to view, or scroll past. Or I could find a way to exclude NSFW posts altogether with a conditional check.
Overall I am satisfied with the results, and would like to try popping this component into a larger project, hosting the component on a webpage, and exploring more how to best delineate the load on the user/server side.