React App’s Requirements & Functional Specification

This term at school, we have a new project: create a Single Page Application using React.

WHAT’S REACT?

React is a JavaScript library for building user interfaces using small, isolated and reusable pieces of code called components.

I have actually previously written an article introducing React and JSX here.

To find out more about React: https://reactjs.org/

CHOOSING AN API

This app project requires the use of an API of our choice in order to get data and display it (pretty much like our Spotify Battle project).

At first, I had chosen to use the Goodreads API, since I love books. I requested my key, then got started on it. I created my Header, Container and Footer, but after doing some research, I realised that using that API might actually be quite tricky.

First of all, the response was in XML format, which isn’t easily parsed from what I could gather (not for a beginner like me anyway!) and second of all, GoodReads API doesn’t enable Cross-origin resource sharing (CORS) headers. From trying to understand what that meant, I understood that looking for another API might be a better solution!!

Original design for Goodreads, which I ended up keeping and adapting for my current app:

After asking myself “What else do I love, apart from books?”, I decided to go for a food API.

I chose Edamam simply because it’s free to use, and the documentation seemed to be quite good. That being said, it’s definitely not the greatest API and I wouldn’t really recommend it. There isn’t much data you can pull out of it, and even though I chose one that should give you recipes, it only gives the url of the website where the recipe is. Not ideal, but sure look!

Once I settled on a food API, and after having had a look at what kind of data I can get, I decided to create an app that gives you simple recipes only: the way to do that is to limit the number of ingredients to 5. With so little being used, how hard can those recipes be? The inspiration actually came from an email I got from Edamam, giving tips on using “hidden features” for this API:

I also decided to limit the number of results to 30 (I chose this amount with the infinite scroll idea in mind).

Here’s what my fetch looks like with those options:

USER PERSONAS

• Rebecca is a mother of 3, she works part-time, but being a mom in itself really is a full-time job. Therefore, she doesn’t really have time to cook, and complicated meals are definitely not an option. What she would really enjoy is spending more time with her family and less time in the kitchen.

She’s quite frustrated by all the recipes she finds that are meant to be easy but always demand lots of obscure ingredients.

This app would be perfect for her, as very little ingredients are used and most recipes are very easy.

• Oisin is a 19-year-old student. He is constantly broke and has never felt the need to cook in his entire life until he had to leave his parents home/food behind to go away study.

Now that he lives alone and can barely fry an egg, he needs to learn how to feed himself. He wants simple and cheap recipes. 5 ingredients are as much as he can manage, so this app is perfect for him.

• John is a widower. His whole life, his wife has been cooking for him, but now that he finds himself alone, it is time to learn. He cannot keep on paying someone to cook for him and doesn’t want to be a burden on his kids, so he’s decided: this year, he’s learning how to cook. As they say, better late than never.

So to start slowly, quick and easy recipes is what he needs: 5 ingredients is perfect for him. Since last year he taught himself how to use the internet, he’ll be able to manage this app perfectly.

HOW DOES THIS APP SOLVE OUR USERS’ FRUSTRATIONS?

By limiting the recipes’ number of ingredients to 5, our app offers easy, cheap and quick meals that will solve the frustrations of Rebecca, Oisin and John. They’ll have more time and money to spend doing what they love and less time stressing in the kitchen. And who knows, some may discover a passion for cooking and start trying out more complicated recipes from the websites they are visiting thanks to the app.

APP DESIGN

I decided to go for a simple look, using very few colours. The header and footer are both a dark shade of green, very earthy, while the container is a lighter, creamy colour. The titles and paragraphs use the same colours and offer a good contrast. Clicking on an image shows the full list of ingredients (made obvious by the fact that upon hovering on an image, the mouse turns into a little hand, inviting you to click on it).

I used Font Awesome for the heart in the header.

In the footer, I am giving Edamam attribution for the data used, using their logo, as is required in their T&Cs.

Now if you’ll excuse me, I’ll go make one of those delicious-looking chocolate cakes!