My First Live Website As A Flatiron Student
Welcome to a little story about my experience with hosting my first live website. I was currently in phase 2 of Flatiron School for software engineering and it was project week. My cohort is pretty small 6 in total so every start of the third week we get paired up with a partner to build out a project with everything we have learned so far. My partner was Joe Milius and I really enjoyed working on this project with him, and we had a lot of fun building out each feature and styling it all. After discussing ideas about what we wanted to build/what we thought we might be able to achieve in around 4 days we came up with the idea to build a movie watchlist application which we ended up naming Movie Lounge.
To get started we used create-react-app to set up the boiler plate for our React application. We started building out our components and the routes for those components. We were/are fairly new to using React router but figured we would give it a shot. We got our routes set up pretty quick and then moved on to building out our first feature on the homepage. We used the useState hook to make a get request to themoviedb.org api. Then we set our query state to an empty string and then we setQuery to e.target.value which allowed us to search for any movie from the database as we typed into the search bar onChange. When the movies matching letters typed in the search bar it pops up the image of the movie, its title, and the release date. Each movie is then displayed in a list that you can scroll down through. We then had a results state which was an empty array that every time you click on a movie it was added to our movie state which created a movie card. That then persisted to our db.json file and the movie was now in the watchlist.
I then asked myself and Joe what he would like to use regular css or try to use a library and we decided on trying to use material ui. At first understanding material ui and how it works was a little tricky, but after a while we were able to figure out how to start styling things. Then we added some style to the nav bar and the buttons in the nav bar. Put a linear gradient background for both pages, we then noticed every time a movie was added to the watchlist they were just being added one by one to the right. Then put some inline style to what was returned in our watchlist so that they would display in a grid type format. We also imported material ui styles so that we could build out our own styles and use those wherever we wanted. Kinda like setting up the styles for a styled button and then using that styled button to use wherever you want.
Next once we got a little styling in we decided we should add some more features. Joe thought it would be a good idea to have each movie rate-able, so we gave each movie card a thumbs up and a thumbs down button. Every time you click on the thumbs up button it turns green and every time you click the thumbs down button it turns red. We came across some difficulties when building out this feature with some issues of both of them being clicked at the same time, not updating the database properly and then the actual color changing when they were clicked. But after taking a step back and thinking about what we were actual doing we solved all the issues with the buttons rather quickly.
Continuing on we decided each movie should be able to be removed from the watchlist in case it was accidentally added, or you just didn’t want it in the watchlist anymore. We started out by building the remove button, and making sure each card was generated with a remove button. Then came some styling of the button with some hover effects, color change, sizing, and shadow. It defiantly took a good effort to style out all the buttons so they were equal and looked nice underneath each card and semi responsive when the size of the website changes. Then we made sure that each time that remove button was clicked that movie card was instantly removed from the client side and the database. After that everything was working as expected and then we did a little cleaning up some code and adding some soft edges to things, that made items easy to look at and was easier on the eyes.
Next things started running pretty smooth, we made a new repo on github that was just our db.json file so that all that repo knew about was the db.json. Then I started an account on heroku and linked that repo to my heroku account thru github. Now heroku had access to that repo and was hosting this database live. We could now set up our fetches to fetch from our heroku database. Then on another repo we had all our React files and gave that repo to netlify. On netlify we then gave it access to that github repo so that every time we push new code up to github both netlify and heroku rebuild our application from those repos. This made it really nice when we were testing out new features and could just push new code then go to the site and refresh and see the rebuilt product. One challenge that I figured out kinda quick is netlify did not have our hidden api key from the moviedb.org because we put it in a variable in a .env file and put that .env file in our gitignore file so that our github repo did not have our key. There is a spot in your netlify account for projects where you can provide certain things for certain applications. We gave netlify that key for that specific application and now our site was working just as expected.
Above Is a little screen shot I took of the home page so that you are able to see what it kind of looks like. The url link above is our live site. You can search for movies, add them to a watchlist, like or dislike the movie after you watch it, and of course delete it if you do not want it in the watchlist. I really had a lot of fun working on this project, being able to discuss problems that popped up during build with a partner, and just overall styling is something I really enjoy doing to make things look nice and unique. If you made it this far through my blog and are interested in seeing the real thing please go to the link above and play around! Thank you all very much for taking time out of your day to read my little story about my first live site during my time as a student at Flatiron School.
P.S. Flatiron School Rocks!