More Frontend Practice

Akil Griffiths
3 min readApr 5, 2021


As I recently put up a portfolio website, I believed it was time to start publishing more apps. When I thought of things I would want to show off, I thought of my poetry site. Then remembered that would be a bit embarrassing. Instead I decided to work on a project I started that have not finished. A project I couldn’t be embarrassed about.

picture of the homepage of the app.

As the picture suggests I am making this app to make that if I ever considering bringing one of those little creatures with me on my journey, that it is a well thought-out decision. My intention isn’t to make it so I don’t want pets(or children), but rather to remind myself that the inclusion of these creatures will require adjustment.

Some Cat Facts

I wanted to show something informative about all the animals, these facts were taken from an api. I usually create my own backend, I wanted to try out using an api to get the facts this time around. Dog lovers forgive me but it has been a lot easier to find the things I need for the cat page of my app. As I’m making sure to make as many reusable components as possible, the dog component will only benefit from this.

A reusable component

With this code displayAnimalFacts, I knew I’d pass in an array of objects, because I like to store data that way and passed data that way down as props. I wanted to make a helper function to put the sentences in the text one line after another. That is how my splitAndDisplayText function on line 4 came to be. I ended up passing down a prop called name which was basically just the name of the array I was passing into the stories component. I did this because before I was using props.cats when invoking DisplayAnimalFacts, and I didn’t think the other components would appreciate that. props[name] made it reusable, but there are probably better ways.

what the stories component produces

On the topic of better ways, I still need to work on my CSS. My split function works well enough, but that was not how I wanted it to be displayed. While I may not be happy about how it came out. I am glad that it is coming along nicely. I still remember that abomination that had to be reluctantly called CSS. As long as I am further away from that everything is going well.