eleferrets / flixster

This is the CodePath Flixster application that shows the latest movies playing in theaters. You can search for specific movies and click on each movie item to get specific movie details.

Week 1 Assignment: Flixster

Submitted by: Brian Balthazar

Estimated time spent: 13 hours spent in total Deployed Application (optional): Flixster Deployed Site

Application Features

REQUIRED FEATURES

• User can view a list of current movies from The Movie Database API as a grid view.
• For each movie displayed, user can see the following details: Title, Poster Image, Votes.
• User can load more current movies by clicking a button at the bottom of the list. The page should not refresh; movies should simply be added to the bottom.
• Allow users to search for movies and display them in a grid view. Users should be able to clear results and view previous current movies displayed.
• Website accounts for basic HTML/CSS accessibility features.
• Website should be responsive.

STRETCH FEATURES

• Deploy website using GitHub Pages.
• Allow user to view more details about a movie within a popup.
• Improve the user experience through CSS & animation.
• Allow movie video trailers to be played using embedded YouTube
• Implement anything else that you can get done to improve the app functionality!

Walkthough GIF

Reflection

• Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?

I felt all the topics in the labs, especially the third lab, prepared me to complete the basic goals of the assignment. The giphy party lab was the skeleton I needed to make external api calls, and allowed me to use that for this assignment. Adding the popup took me some time to complete because I needed to think about where each piece will go, and hooking everything up to make sure they worked took some time as well.

• If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.

I would have added animations and improved on formatting if I had more time. Next, I would have focused more on accessibility and speed for my site to load. I also wanted to make sure it was compatible with as many browsers as possible since not a lot of versions support css grid. I really liked my approach with hiding certain divs based on if the user was searching or just wanted to look at the current movies, however this hurts accessibility as screen readers might have trouble reading them, so I would have changed that as well.

• Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?

Everything went incredibly well except for the popup working in time. I saw a nice image carousel that might be cool to implement next time.

Open-source libraries used

• NA

Shout out

I would like to shout out all the TAs and the members of my group as they were very helpful giving me feedback and getting my labs to work, which ended up saving me time on my weekly assignment. Thank you so much for all of your help!

flixster's Issues

Project Feedback!

Congratulations on completing all of the required features of the Flixster assignment! The skills you were able to incorporate into this assignment will serve as an important foundation as you continue to build increasingly complex projects over the course of the SITE program. Please note that if you wish to continue improving upon this project, you are welcome to re-submit your project at any time so you and we have the updated links in our records. Please note, however, that re-submitting your project will not cause it to be re-graded.

One of the most important learning parts of these projects is the optional user stories. If you were able to complete all of these stories, congratulations! If you were not able to complete the optional user stories, we recommend continuing to build those out in your own time to deepen your understanding of this topic. As a recommended work plan, we encourage you to complete the projects each week with required stories early and then spend time at the end of the week working on the optional extension stories.

If you have any particular questions about the assignment in general or on any of the feedback, post on the discussion forum or email us at [email protected].