- 📚 Table of Contents
- 📖 Description
- 📖 Features
- Screenshots & Demo
- 📺 Demo
- 📖 Technologies Used
- 📄 Installation Guide
- 📁 File Structure (/src)
- 📑 License
- © Credits
- 🧑🤝🧑 Contributors
Movieace is a web application that allows users to search for movies, TV shows actors. Users can also watch trailers, and stream their favorite movies and TV shows.
- Search for movies, TV shows, and actors
- Watch trailers
- View movie and TV show details
- Stream movies and TV shows using the Movies7
- View actor details
The home page displays the most popular, top rated, and upcoming movies and TV shows.
The movies page displays the most popular movies and TV shows. Users can also search for movies and filter by genre.
The search page allows users to search for movies, TV shows, and actors.
The movie details page displays the movie's details, cast, and trailers. Users can also stream the movie using the Movies7 app.
output.mp4
- Clone the repository
git clone https://github.com/hendurhance/movieace.git- Install dependencies
npm install- Copy the
.env.examplefile and rename it to.env
cp .env.example .env- Add your TMDB API & TMDB SECRET key to the
.envfile
...
VITE_API_KEY=api_key
...
VITE_API_ACCESS_TOKEN=api_access_token- Run the development server
npm run dev- Open http://localhost:5173 with your browser to see the result.
.
├── App.vue
├── assets
│ ├── img
│ │ ├── empty-actor-state.png
│ │ └── empty-movie-state.png
│ ├── styles
│ │ ├── _background_hero.scss
│ │ └── _masthead.scss
│ └── vue.svg
├── calculation
│ └── vote-to-rating.ts
├── components
│ ├── ModalRoot.vue
│ ├── TrailerModal.vue
│ ├── base
│ │ ├── BaseFooter.vue
│ │ ├── BaseHeader.vue
│ │ └── BaseModal.vue
│ ├── layout
│ │ ├── ActorItem.vue
│ │ ├── CastItem.vue
│ │ ├── EpisodeDialog.vue
│ │ ├── FeaturedMovie.vue
│ │ ├── GenreLists.vue
│ │ └── MovieItem.vue
│ └── svg
│ ├── logo
│ │ └── movieace.vue
│ ├── outline
│ │ ├── arrow-left.vue
│ │ ├── arrow-right.vue
│ │ ├── clock.vue
│ │ ├── menu.vue
│ │ ├── search.vue
│ │ └── tag.vue
│ └── solid
│ ├── popularity.vue
│ └── star.vue
├── composables
│ ├── useActor.ts
│ ├── useAxios.ts
│ ├── useGenre.ts
│ ├── useGenresList.ts
│ ├── useHighlights.ts
│ ├── useModal.ts
│ ├── useMovies.ts
│ ├── useSearch.ts
│ └── useTvShows.ts
├── containers
│ ├── CastWrapper.vue
│ ├── EmptyState.vue
│ ├── Hero.vue
│ ├── KnownFor.vue
│ ├── MoviePicture.vue
│ ├── RatingStar.vue
│ ├── SearchResults.vue
│ ├── SearchWrapper.vue
│ └── SimilarMovie.vue
├── lodash.debounce.d.ts
├── main.ts
├── pages
│ ├── Actor.vue
│ ├── Actors.vue
│ ├── Index.vue
│ ├── Movie.vue
│ ├── Movies.vue
│ ├── NotFound.vue
│ ├── Search.vue
│ ├── TVShow.vue
│ └── TVShows.vue
├── routes
│ └── index.ts
├── style.scss
├── utils
│ ├── button-layout.ts
│ ├── footer-links.ts
│ ├── swiper-options.ts
│ ├── useMoveSlide.ts
│ └── useWebImage.ts
└── vite-env.d.ts- Components: The folder contains all the components used in the application. Base components are components that are used throughout the application. Layout components are components that are used in the layout of the application. SVG components are components that are used to display SVG icons.
- Composables: The folder contains all the composables used in the application. Composables are functions that are used to perform a specific task mostly related to fetching data.
- Containers: The folder contains all the containers used in the application. Containers are components that are used to display data.
- Routes: The folder contains all the routes used in the application.
- Pages: The folder contains all the pages used in the application. Every route has a corresponding page.
- Utils: The folder contains all the utility functions used in performing a specific task.
- Calculation: The folder contains all the functions used in performing a specific calculation. e.g. converting vote average to rating.