Community Library

rcho100 — Mon, 05 Oct 2020 03:52:37 +0000

For my fourth project, I had to build a single page application(SPA) with a Javascript front-end and a Rails backend. For this project, I decided to build a simple library web application that an extracurricular literature club can use to facilitate the members of the club in borrowing books.

There were some big differences with how I built this project compared to the previous projects I built with just Rails. The obvious difference was the fact that, instead of using Rails to build out the frontend and backend, I was using Rails as just an api backend and using HTML, CSS, and Javascript to build my frontend. This big change made me see how I can use fetch requests to send and receive information to the backend. By using get fetch, post fetch and patch fetch for my app, I was able those fetch requests to asynchronously fire off the code I wrote, sending and receiving information to and from the backend.

The other big difference was the ability to dynamically change the DOM to make the page interactive and display information based on events. I found myself frequently using .querySelector to find and grab specific elements and I also learned the magic of using event listeners to elements to make things dynamic. In my journey of using event listeners, I was even able to use event delegation to trigger events on elements that were not there in the beginning but were dynamically added by my code and a user’s input.

All in all I really enjoyed building this single page application. Using Rails as just an api was definitely similar but also different, and using vanilla Javascript to be responsible for the frontend was something I really enjoyed learning about and also implementing.

Movie Central App

rcho100 — Mon, 28 Sep 2020 03:40:23 +0000

For my fifth project at the Flatiron School, I made a web application using the very popular JavaScript framework React & also the handy framework Redux. Growing up I was never really into watching movies and I became somewhat known to not keep up with all the popular movies and as someone who didn’t watch movies that are considered “classic movies”. Hoping to increase my knowledge of movie references and be more in the know, I wanted to create an app that will be helpful to me and to others in seeing what movies were currently popular and also the movies that are rated very highly.

To create this project I used React & Redux for the frontend of my application and Ruby on Rails as an api for the backend of my application. With React I was able to build components that I can reuse at will to build out the client side. With the help of Redux and redux thunk, I was able to asynchronously send fetch requests to the Rails api I built.

I decided that this application will allow users to browse through popular movies and top rated movies. I also inculded the option of adding a specific movie to a watchlist specific to every user, but this function is only open to users who register and is logged in to their account. I made this decision with the notion that while logging into and account to save movies to a watchlist is a great feature, I did not want an authentication wall to block people from browsing through movies.

I also used The Movie Database API as an external api to get the info I wanted on all the movies. I made the choice to make the get requests from the rails api I built and then send the necessary info to the front end of my application when a GET request would come in from the user. Although there was the possibility of just building out the frontend and letting it communicate with the TMDB API directly, I felt that it would be better to have the info centralized in my Rails API as was also using it as a way to persist user account information including the movies that a user saves into their watchlist.

With all of the HTML requests being made from the frontend, I used Redux to have a central store to organize state better in my React frontend. I still made use of passing in props but the redux store definitely helped in organizing state as I built this application.

All in all, I was able to experience first-hand the power of React & also Redux. It is no wonder why React is so popular today, and I am looking forward to making a React application in the future using Hooks to experience another way to control state.

DEV Community: rcho100

Community Library

Movie Central App