Highlights from my React/Redux + Rails API Final Project

Serven Maraghi
Apr 28 · 5 min read

After completing my final project for Flatiron School’s Immersive program, I’d like to take a moment to look back and reflect on some of the more interesting features. Highlighting these key aspects will allow me to discuss some of the challenges I faced and share the wealth of knowledge that I came to learn as well.

Before I dive deep into the code, you might want to know a little bit about my app which is built with a React/Redux frontend with a Rails API backend. NewsFlash (my app’s name), is a lightweight, news aggregator that allows users to browse the latest current events by topic. Users can react to articles with likes and dislikes and contribute to the most popular and controversial topics of the day.

Now to the code!

The API

Early on, I decided that I not only wanted to create my own API using Rails but that I also wanted to make use of a third party API as well. I felt that being able to work with real data would help me scale the functionality of my app and challenge me to stay true to the separation of concerns mantra. So how does one stay true to this mantra?

The backend API will make calls to the third-party API and the frontend will then make calls to the backend API to retrieve that data.

I made the decision to use the NewsAPI which requires developers to have a unique key. I stored my unique key in a secret credentials file that ships with Rails because we all know it’s a rough day when you push your API key to Github.

In order for my Rails API to communicate with the NewsAPI, I need to make a web request which requires some values including the API endpoint, my API key and the query parameter. I set these values to Ruby constants:

URL1 = "https://newsapi.org/v2/top-headlines?country=us&category="URL2 = "&pageSize=21&apiKey="KEY = Rails.application.credentials.apikeys[:news_api_key]

Next I build out a helper method which will assist in making the web request by utilizing the OpenURI library which ships with Ruby by default.

def fetch(url)
req = open(url)
body = req.read
render json: body
end

Finally, I call on fetch within the main method (called get_articles) which makes the web request to the NewsAPI. This method retrieves articles based on a category parameter.

def get_articles()
fetch(URL1 + params[:category] + URL2 + KEY)
end

Now that our backend code is setup, we can make calls from our frontend to retrieve the Articles data the NewsAPI has provided us.

The Like/Dislike Function

The most challenging piece of NewsFlash was building out its like and dislike function. What seems like simple functionality was made much more difficult by the complexity of needing to persist like and dislike data to the backend. The data returned from the API needs to be saved to the Rails backend with like and dislike attributes added. However, doing this for every single article would not be scalable. The solution I decided on was to create the articles in the backend only once they received a like or dislike. Although this resolved the concerns of scalability, it led to problems elsewhere. Primarily, a dilemma occurred where the frontend needed to be aware of whether or not the article already existed in the backend.

My resolution to this conundrum was a dynamic post request and a Ruby method capable of handling both situations:

function saveArticleData(article, user_act){
fetch(URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json', Accept: 'application/json'
},
body: JSON.stringify({
article,
user_act: user_act
})
})
}

This post request contains the article data necessary to find the article if it exists or to create a new one if it does not. An additional parameter of user_act is passed in to tell the backend whether likes or dislikes need to be updated. This is decided by whether the like or dislike button has been clicked.

This data is routed to a unique create method:

def create
@article = Article.find_or_create_by(title: params[:article]
[:title]) do |article|
article.author = params[:article][:author]
article.description = params[:article][:description]
article.url = params[:article][:url]
article.image = params[:article][:urlToImage]
article.date = params[:article][:publishedAt]
article.likes = 0
article.dislikes = 0
end

Create uses Ruby’s crafty find_or_create_by method to search the database for an article by its title. If it is found @article is set to that instance, but if not, a new article is created. Within the do block, attributes are able to be assigned simultaneously. All article attributes, excluding the likes and dislikes, come from the NewsAPI. Likes and dislikes are created in the backend in order to track user actions to these articles, and are set to a default of zero.

After the article has been found or created, I update the likes:

def update_likes
if params[:user_act] == 'like'
@article.likes += 1
elsif params[:user_act] == 'dislike'
@article.dislikes += 1
end
@article.save
end

Now the article persists in the backend with the proper amount of likes and dislikes!

Semantic-UI:

I chose to do the styling for NewsFlash with the Semantic-UI-React Framework. I really enjoyed working with Semantic and made use of a variety of their modules including cards, items, menus and modals. In this section I will discuss one I found particularly interesting, the semantic-modal.

Modals can help you build a beautiful UI but require some meticulous setup. The setup for my semantic modal was laid out over two components. One component maintained the start of the modal’s construction as well as the trigger to open it, and the second component maintained the modal’s content.

The trigger code:

<Modal trigger={ <Button inverted color='blue'> React </Button> } >  
<ArticleModal article={props.article}/>
</Modal>

The trigger prop changes the modal’s inherent open prop from false to true. What this means is clicking on the button will cause the modal’s contents to be displayed.

The modal’s content can be configured to display as much or as little complexity as required. I chose to use an iframe tag to embed the article’s source website within NewsFlash, thus rendering the fully composed article:

The Semantic-UI framework offers developers the tools to design their web-apps without a uniform style. It allows creativity and grounds for free expression through malleable components like these modals.

NewsFlash provided me with challenges and opportunities to grow as a developer. I learned something new and interesting each day and it would probably take me a million medium articles to explain all that I have come to grasp in this period of time. For now, I hope you enjoyed these highlights.

Happy Coding!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade