Lore Of The Rings (Phase 2)
For my phase 2 project I decided to do something with a subject matter near and dear to my heart. Lord Of The Rings, has been my favorite movie trilogy since I was a child and remains to be my favorite movies to this day!
Site Overview
This site is done in React.js and when the phase first began I was a bit iffy on how I felt about React. As time went on I began to enjoy it more and more. By the end of this phase which is now I have found myself in love with this brilliant integration between JavaScript and HTML. I love the component format and being someone who is quite OCD about organizing helps my code look and read very clean!
The site is also routed with ReactRouter and uses hooks like useEffect & useState.
The general concept of the site Lore Of The Rings is a place where the users can view, submit, search, and delete quotes from either the Lord Of The Rings or The Hobbit trilogies.
As well as a did you know section where the users can display a single randomly generated fun fact about anything todo with the Middle-Earth universe including fun facts about the author himself to the actors that played in the movies.
Quote Section and Functionality
In this section of the site there is a search bar & a table displaying: character who said the quote, the actual quote, which movie it was from, an image of the character, and a delete button. Below the table is a form to enable the user to submit a quote of their own and enter in all the information required. Once user submits the quote the data will be persisted and stay on the server unless deleted.
I found this part to be quite enjoyable in the functionality of it there are a total of three fetch requests being made. One GET,POST, and DELETE all serving their unique purpose for the quote side of the server!
The GET request is made to display everything that is in the quotes array of objects inside the db.json and is mapped out to display in each of their own sections in the quotes table!
The POST request is used for the purpose of submitting the add a quote functionality. This will allow users to submit all the information for the quote and have it persist on the server!
The DELETE request is used for deleting a quote by its individual ID and returning the updated mapping. When the DELETE request is made that ID that is being deleted will be removed from the server entirely!
The finally functionality of the quote section belongs to the search bar. Where as users grow and add more and more quotes. Trying to find a specific one will be a task. The search bar allows users to look up the quote by typing in the name of the character who said the quote.
My thoughts: this was a particularly fun time because I was able to integrate LOTR which I love so much with my passion of coding! This passion continues to grow every time I learn something new!
Did You Know Section and Functionality
In this section it is more geared towards using what I did in the phase one project accept that is using a RESTful API that I myself built. I am very proud of this and to be able to take what I did in phase one and expand and build it from scratch!
In this section it utilizes two main fetch requests GET and POST.
With the GET request it gets all of the facts that are on the server from the facts array of objects. Now the difference is that instead of displaying all of them. When the did you know button is clicked it runs through a handleClick function that then randomizes the facts by their ID’s and returns a single fact. This singular fact is displayed in the did you know format!
The POST request is utilized by just entering in the fun fact the user has about the franchise and submitting it. On clicking the submit button the fact will be added to the server and persisted. No facts can be deleted once the fact is on there it is there for good! The user can then cycle through trying to find their fun fact by hitting the get new fact button!
My Final Thoughts On Phase 2
With this phase coming to a close I find myself enjoying this school and the field of software engineering more everyday. Every day begins to solidify that I made the right choice coming to the FlatIron School and that I have found my career. The only real thing I can say is that I just can’t wait to learn more. I have never been this excited to learn! The beauty is that in this field the learning never stops!
So its on to phase 3 with Ruby. I cannot wait to get started!
If you are reading this I hope you have an incredible day! I hope you found some of this interesting! Remember to smile and tell someone you love them!