MovieList Vue.js

MovieList using Vue.js and TMDB API

Status: Finished

About • Features • Layout • How it works • Tech Stack • Author

About

To continue my studies in Vue.js, I chose to revisit and enhance a project that I initially developed when I started studying Next.js. This project is a website that consumes the TMDB API to display currently popular movies, also providing the functionality to search for movies by name.

Here is the link to the initial version of this project during my Next.js learning phase: MovieList.

---

Concepts to study during the project

• Data fetching
• Further study on routing
• Learn a bit about the different Vue APIs: Options API and Composition API
• Dynamic routing
• radix-vue - Vue.js port of Radix UI
• Pinia - state management tool

---

Features

• See popular movies on moment
• Search movies by title
• See movies info

---

Layout

Homepage

Search component

Filtered movies

Movie page

---

How it works

Pre-requisites

Before you begin, you will need to have the following tools installed on your machine: Git, Node.js and the pnpm package manager.

In addition, it is good to have an editor to work with the code like VSCode.

# Clone this repository
$ git clone https://github.com/Artur-Poffo/MovieList-Vuejs.git

# Access the project folder cmd/terminal
$ cd MovieList-Vuejs

# install the dependencies
$ pnpm i

# Run the application in development mode
$ pnpm dev

# The server will start at port: 5173 - go to http://localhost:5173

---

Tech Stack

The following tools were used in the construction of the project:

• Vue.js
• Typescript
• Pinia (State management)
• vue-router
• heroicons/vue (Icons lib)
• radix-vue (Radix UI port for Vue)
• vue3-star-ratings (Lib for star rating component)

See the file package.json

---

Author

• Artur Poffo - Developer

---