Simple Movie Search app with VueJS using Vite build tool. Ui is inspired by current trends.
Any similarity to actual website is purely coincidental.
Routing organized is by Vue Router.
State management is organized by Vuex.
Http requests are done using Axios.
Mock server made using Mock Service Worker.
Linter: ESLint
- Node.js (v14)
- Npm (v7.6)
├── dist # Build
├── docs # Documentation files
├── public # Public assets + mswjs + json data files
└── src # Source files
├── _api
│ ├── mock
│ │ ├── browser.js # mswjs worker setum
│ │ └── handlers.js # mswjs http requests' handlers
│ └── mockServerFilters.js # Mock Api logic
└── index.js # Api methods
├── _services # Helper Service
├── _store # Vuex store, actions, getters, mutations
├── components
│ ├── Common # Reusable components
│ └── Main # Route components
├── App.vue # Entry component
├── config.js # Config
├── main.js # App creation
└── router.js # Router
└── README.md
- Clone the repo
git clone https://github.com/Vilina/movie-search.git movie-search && cd movie-search
. - Install the dependencies in the root directory
npm install
npm run dev
for development
npm run build
for building
npm run serve
for serving built version
npm run lint
for running ESlint
Please build a page that allows for searching and filtering of movies via an API. Below is an example response from the API, but the request format is up to you. Our goal is to understand how you would design the API contract so please explain your decisions thoroughly. You do not need to build a functioning API. Mocked or hardcoded responses are perfectly fine.
For the page's overall look & feel, you can use anything you'd like as a reference. Feel free to be inspired by Netflix, IMDB, or other similar websites.
Requirements:
- Use Vue.js, HTML, and any CSS preprocessor of your choice
- The constructed payload must be visible either through the console or some other explicit rendering
The submission should be sent in a GitHub repo.
We expect this to be a well thought out project, but we also understand you may have other job processes or current work/life responsibilities taking up your time. All we ask is that you deliver something that you’re proud of.
Please do not hesitate to reach out and ask for clarification.
Example Response:
[
{
"id": 163979287265942016,
"title": "An American Tail: Fievel Goes West",
"genre": [
{
"id": 3,
"title": "Comedy"
},
{
"id": 8,
"title": "Western"
}
],
"actors": [
{
"id": 163978496991957504,
"name": "Fievel Mousekewitz"
},
{
"id": 163978647315813376,
"name": "Tanya MouseKewitz"
}
],
"is_series": true,
"release_date": "1991-11-17T00:00:00.000000Z"
},
{
"id": 163982121944357888,
"title": "The Notebook",
"genre": [
{
"id": 2,
"title": "Drama"
},
{
"id": 6,
"title": "Romance"
}
],
"actors": [
{
"id": 163982182073900544,
"name": "Ryan Gosling"
},
{
"id": 163982199253770240,
"name": "Rachel McAdams"
}
],
"is_series": false,
"release_date": "2004-06-25T00:00:00.000000Z"
}
]