My new vue app

Hi guys,

I just finished to work on some movie simple app. It will be great to get some notes and feedback from you.

https://friendly-pare-443591.netlify.app/
https://github.com/orby32/vue-movie-3

Thanks a lot.

** Please not refer to css / responsive issues.

Difficult to critique without any direction - are you asking for a code review? Feedback on the design? The proposition? I can add a few thoughts on the latter 2 points:
Overall, looks good which I think is nice to hear! I think it has some interesting functionality: search is fast, but not sure it is searching a full dataset (not many titles found), image sizing a little on the large size (on 13" macbook pro), obviously needs a user account to persist favourites across devices. Be great if for a selected movie, indicating where it could be streamed from (for free and for a charge) or purchased from. Just a few thoughts that may be helpful.

The secret apiKey the movie service gave you is visible to everyone who cares to see it.

1 Like

@Michael81 I noticed my application has the same issue, is there a way to eliminate this issue?

Thank you!

I googled this problem and it seems that it cannot be done without server side.
This article gives more details such as:

As a rule of thumb, never include credentials in client side JavaScript

1 Like

Yea that makes sense then @Michael81, thanks for the clarification.

Good start on a Vue app. I am reviewing the application, not the code.
The Good:

  1. I like the search. It is quick.
  2. I like the breakdown below the movie banner.
  3. The general layout is clean and flows well.
  4. Switching from TOP RATED, POPULAR, UPCOMING is a nice experience. The search maintains the filter, which I like.

Here a few usability things that I noticed.

  1. The add to favorites button is directly below the movie poster, but not visually tied to it. I would put a border outline around the poster and button to make it clear which one the button is for. You are already doing something similar with the cast members.
  2. The button and link are to save a favorite, but when you go to the favorites link the button now indicates it is a wishlist. Keep it consistent.
  3. I click to a movie to see more details, you should provide a button to add it to favorites from that page. And tell me if it is in my favorites.
  4. When I click on a movie, I get details. I can then click on the large movie banner at the top it appears to do nothing, looks like you want it to take the user back home, but that did not work for me, I tried it in firefox and chrome. This also causes another error, when I then click on a cast member, it takes me to the person details, but when I use the back to all cast I am taken to the home page of the app, not the movie. If I click on a cast member as the first click on the page it works just fine. Again, steps to recreate: Click on movie, Click on large movie banner at the top of the page, Click on Cast member, Click back to all Cast.
  5. There seems to be a mix of buttons, links, colors to do things. Make it consistent. For instance, adding to the favorites is a button, removing from the wishlist is not. Clicking on a cast member is a blue link.
  6. From a text over image perspective, there is a problem, with dark banner movies the text is OK, but click on The Gentleman or Irresistible. Those banners have a lot of white in them, so the white text does not work. You might want to use a Scrim.
  7. Movie times do not always display correctly. It looks like the leading zero is missing in minutes. Look at Wasp Network. 2:8h is the running time.
  8. The Looking for another movie link goes to a search page that does nothing.

Potential feature enhancements:

  1. Make another favorite list for actors. It could even be the same list, it would be an interesting design challenge.
  2. Show the movie credits on the Actor page
  3. Allow users to create accounts so they can actually save their favorites.

Thank you for the extensive reply.
:slight_smile: