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 came the part where we decided to try and do the extra credit of the project guidelines which was hosting our site to make it live. I had already used netlify to host some of my other projects that I built before attending Flatiron School so I was pretty familiar with how to host a javascript application to netlify but I had never done a React application before which had a db.json for a database. Netlify is pretty cool tho where you can just drop what files you want into this box and if everything matches up correctly it will build the application for you and make a live website. Our head instructor gave us a great blog that discussed how to approach hosting an application like ours, so we started reading the blog but got lost pretty quick. Hosting your site and making it live is not taught in the program so we were on our own sort of and had to figure out how to accomplish this task. Our instructor did help us out with how to hide our api key so that we did not share that with git hub which made us safe from no one else being able to use our special api key/ hack any of our info. After trying what the blog told us to do a few times and getting pretty frustrated for many hours I decided to take a little break and eat some food. I really think taking breaks and eating a little food and drinking a lot of water throughout the day defiantly helps keep my brain feed, so that it can function at its maximum capabilities and food just keeps me in a positive mind set. Coming back from a small break I realized that our instructor has taught us so many things and I then had an idea of what we needed to do between what we had been taught and what we read in the blog.
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!
