Skip to content
Front end for the Groovy Movie App
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
grunt
lib
spec
.editorconfig
.eslintrc.json
.gitignore
.jscsrc
.jshintignore
.jshintrc
.remarkrc
.sass-lint.yml
.scss-lint.yml
CONTRIBUTING.md
Gruntfile.js
LICENSE
README.md
STYLE.md
favicon.ico
forms.md
index.html
index.js
package-lock.json
package.json
study.md

README.md

Groovie Movie is an app to share movie favorites and rating among friends. Unlike other rating systems, Groovie Movie uses ratings from people you know and whose opinions you trust.

The first release of this app allows users to input their movies and ratings. This was completed in a 1 week sprint as part of a project for General Assembly.

Future releases will 1) allow logged in users see their friend's ratings and 2) query TMDb's API to get movie info.

The app can be found deployed here: https://3point14guy.github.io/browser-groovy-movie/

At this stage of deployment, users can manage their own movie list.

User stories: https://user-images.githubusercontent.com/28842407/28465330-57c44efc-6df6-11e7-832a-35bc62930037.png

Wire frame: https://user-images.githubusercontent.com/28842407/28465344-628b82b0-6df6-11e7-98c6-7caec5b32bf8.jpg

This project was started with the SQL database being built first and can be found at: https://github.com/3point14guy/rails-api-groovy-movie

The front end of the project was started with the HTML and I used bootstrap to build up a series of modals that trigger sending my api calls via AJAX. I tested the authentication calls first and then moved on to testing the calls for the SQL database I created. I used handlebars to help return the information from my GET request and loved the fact that I could generate buttons there for handling my update and delete requests. It was easy to tie the id for my SQL table rows to these buttons, but getting modals to submit from these handlebars generated buttons was trickier.

The first hurdle was the event listeners, which I had to repostition into the function for my successful GET request in the ui.js file. However, calling the update and delete functions from my events.js file was creating a circular reference. Moving these functions to the ui file was a work around, but it was messy and it seemed that there should be a more elegant solution. I was also running into two additional hurdles here, the most important being that subsequent get requests would not accurately reflect the changes I was making with my PATCH and DELETE requests.

In the interest of meeting my deadline for a minimum viable product, I abandoned using the buttons generated by handlebars for time being. This turned out to be a good call, because of course, there were more bugs to come.

With this being my second major coding project, things were less frantic and progress was steady, albeit slow. I made sure to deploy 18 hrs before deadline to make sure I had time to work on any bugs that I didn't catch in testing. The front end of this project deployed smoothly and I spent the last few hours before deadline trying to improve the UX and format of the site.

Things still to work on:

  • Run the GET request after every PATCH or DELETE so the updated list of movies displays automatically.
  • Get the rating form field to accept a float. Rudimentary bootstrap search only showed support for a non-decimal number. This does not seem right and I must not have searched correctly.
  • Delete by movie name instead or row id.
  • Over all look of site needs a ton of work. Need to delve into bootstrap more and using custom colors on buttons and using invisible and hidden.

*There are two APIs to connect to take this app to the next level: TMDb, the movie database and Facebook. TMDb has over 10,000 movies and Facebook would allow easier login and a way to share lists and ratings with friends...the whole point of the app!

You can’t perform that action at this time.