https://github.com/codetun/movies-rating
🎬 Vue Movie App 🌟: A Vue.js 3 project showcasing movies with ratings ⭐, genres 🏷️, and hover effects ✨. Features responsive design 📱, Heroicons, and highlights for in-theater movies 🎥. Stylish UI 🎨 with scoped CS
https://github.com/codetun/movies-rating
html nodejs tailwindcss typescript vuejs
Last synced: about 2 months ago
JSON representation
🎬 Vue Movie App 🌟: A Vue.js 3 project showcasing movies with ratings ⭐, genres 🏷️, and hover effects ✨. Features responsive design 📱, Heroicons, and highlights for in-theater movies 🎥. Stylish UI 🎨 with scoped CS
- Host: GitHub
- URL: https://github.com/codetun/movies-rating
- Owner: codeTun
- Created: 2024-06-29T23:27:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-29T23:31:25.000Z (almost 2 years ago)
- Last Synced: 2025-03-29T17:18:47.617Z (about 1 year ago)
- Topics: html, nodejs, tailwindcss, typescript, vuejs
- Language: Vue
- Homepage:
- Size: 1.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
difficulty: 1
chapter: "Chapter 1: Vue.js Essentials"
training: true
tags: vue
---
# Create a Movie Rating App
# Challenge Description
Your task is to create a Movie Rating App using Vue.js 3.
During this challenge, we’ll code out the following features:
- Rendering a list of movies.
## Requirements
- 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
>