Iter Fabulas Project

In this project, I wanted to do something else related to travel. One of my favorite aspects of travelling is sharing my own & hearing others’ experiences. So in this app, I decided to create a place where people can share & comment on travel experiences. As for the title, I looked up the latin translation of “travel stories,” and it returned “iter fabulas.” A few searches returned no pre-existing apps with that name, so I went with it.

Two features that I wanted to implement were photo upload, and integrating Twitter single-sign-on. Both involve complexities that I don’t know if I could include in the time I had available without compromising the overall functionality of the app. So both have been placed in a list of “potential nice-to-have features.”

I used Ruby on Rails for the backend, and React/Redux for the frontend. This was my first app using the React framework, and proved to be very difficult for me. There’s a lot of moving parts to it, and it’s been very difficult for me to see how everything flows together. However, now that I’ve gone through this, I think the flow & structure will be less of a hindrance in any subsequent React apps I build. I had a number of failures in this that will serve me in future projects.

The first failure was incomplete design planning. At first, I wanted to create an app that required user login, and I figured that this would be the most difficult aspect, so I plunged ahead and looked up a number of tutorials on setting up a Rails-React app with user authentication. I thought that I would get this knocked-out then figure out the rest of the app. I was able to get Rails to create & validate user accounts, but I ran into a wall when I attempted re-direction. I have a thought that this is related to another difficulty that I’ll explain later. After much (figurative) head-keyboard smashing, I decided to scrap user accounts altogether. I should’ve looked at how the story rendering components & routes would flow before starting to build anything. There are times when you just build and figure it out, but this was not one of them.

My next failure involved routing. The plan was for the main page to have a list of titles, with each one being a link that would take you to another page with all the elements of that story. However, clicking on the link only took me to that route showing a blank page; I had content in the story component saying “story renders here,” but I got nothing. My problem was I defined the route in the component with the list of story titles. Once I moved the route declarations to the App component inside BrowserRouter & Switch (both imported from the react-router-dom library), I was able to see the individual story component just fine. I think this was a contributing factor to the redirection problem I had when working on user logins.

Another failure I had involved increasing likes. I setup a dispatch process in the stories container to add likes to the story, and passed that down through its two childern components & through Link (another function in the react-router-dom library). The number of likes wasn’t increasing when I clicked the button, but it was increasing each time I clicked on the title; after reading through multiple stack overflow questions & Link’s documentation, I learned that you cannot pass a function through Link, only objects. So I setup the dispatch process in the individual story’s component, and I was getting the same behavior. So I scrapped this part of the project as well, as I still had to build the comments portion.

I built-up the comments aspect of the app as its own component tree, and didn’t really come across any impediments. I think that if I followed the same pattern for likes, I would have better luck. It’s going to bother me that I wasn’t able to build the likes portion, but I need time away from this project, or I’m liable to throw my laptop through a cement wall. I think part of my frustration was transferring too much of my knowledge of the “vanilla JavaScript” way of doing things into React, and partly due to this being my first React app. I also find that my thought process fits the back-end, more so than the front-end, so I’m sure that’s a contributing factor in my frustration with this project.

Leave a Reply