difficulty chapter training tags
Chapter 1: Vue.js Essentials

Create a Movie Rating App

Challenge Description

During the next few challenges, your task will be to create a Movie Rating App using Vue.js 3. In this challenge, we’ll start by rendering a list of movies.


  • Define the movies as reactive data.
  • Use the Vue.js template syntax to display the movie information.
  • Render all the movies with a v-for loop.
  • Display the name, description, genres, and image of each movie.
  • Display the movie rating as stars, with a maximum of 5 stars

Other Considerations

  • If you see the data-test attribute anywhere in the boilerplate don’t remove it.
  • TailwindCSS is preinstalled with the default config. It might be helpful for you, if you want to have some styles. (Not obligatory)

? The movie list is provided as boilerplate, but feel free to add your favorite one into the list.

? Don’t peek at the solution until you’ve solved the exercise yourself or exhausted your resources. Challenging yourself will best prepare you for the exam

Example of Finished App

This is an example of what the functionality should look like for the completed exercise. If you’d like to mimic this style, feel free to do so, but it is not required.

Finished app in this challenge


View Github