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:

Try to go to the film page and then to refresh that page. It will not work.

Here is the solution for that problem -

Did you delete your app from netlify?

No, just changed url - https://vuemovielibrary.netlify.app

It works now.
There are still the next questions:

  1. When run locally I see “Your favorites” link, but it is not displayed at the vuemovielibrary site. The same with Back to movies link
  2. When you display movie list you do not check whether it’s movies are in Favorites already. There is always “Add to favorites button”
  3. At the Top rated movie page the first movie is displayed two times
  4. Why do you display only those few movies in the list?
    There are a lot of them. Api gives you only first page.
    You need to add a paginator.

Hi,

  1. Solved.
  2. That’s something I didn’t manage to solve, as you can see the button label is changed once you click 'add to wishlist but it don’t persist the state after refresh. Do you have any idea?
  3. Right, that’s the response I get from api.
  4. The plan is to do that, absolutley.

Also 2 was solved.