Welcome to the Smithflix Vue.js challenge!!!
to build and run this application, the following commands are available:
npm install
npm run serve
npm run build
npm run test
npm run lint
npm run test:unit
The goal of this challenge is to make a basic movie rental application.
- Using the Vue CLI or UI create a new application that includes at least:
- Babel or TypeScript
- Vue-Router
- CSS Pre-processor (SCSS)
- Unit Testing (Choose your poison)
- From this project copy/replace the following directories:
/public/src/assets/src/sass/src/data/src/utils
- Import the
/src/sass/styles.scssin the/src/main.js - In
/src/viewscreated the following pages:- Cart.vue
- Dashboard.vue
- Home.vue
- Movie.vue
- In
/src/router.jscreate routes for the new pages (note: the movie route will need to take in an ID parameter)
- In
/src/componentscreate a new component called "MainMenu.vue" and create links to the Home, Dashboard, and Cart pages. - Add the "MainMenu" component to the
/src/App.vuefile. - Update router
linkActiveClassproperty to "active" - Add event to router to update
<body />class to route name.
- In
/src/views/Home.vueadd a witty title and a link to the Dashboard page.
- In
/src/componentscreate a new component called "StarRating.vue" with a property for rating and a computed property to convert the rating to a percent.
- In
/src/componentscreate a new component called "MovieSummary.vue" with a property for movie data using your new "StarRating" component.
- In
/src/componentscreate a new component called "MovieList.vue" with a property for a list of movie data and import the MovieSummary component. - Loop through the list to display a list of movie summaries.
- Add the MovieList component to the Dashboard page.
- In the Dashboard view, import the list of movies, set them to a data property, and bind them to the MovieList component.
- In
/src/componentscreate a new component called "SideNav.vue" - Create a search input box
- Create a drop-down list for the fields you would like to sort by
- Import the list of genres and create a checklist from them and bind them to a data source.
- Add a property called
movieFilterand bind the search box, sort drop-down, and genre check list. - Add the SideNav Component to the Dashboard view.
- Add data properties for
filteredMoviesand amovieFilter. - Bind the movie filter to the SideNav component and the filtered movies to the MovieSummary component
- Filter the movies once the Dashboard component is created.
- Set a watcher to watch for changes in
movieFilterand refilter the list
- Add link to MovieSummary component that links to the Movie view using the movie ID in the URL as a parameter.
- When Movie view is created get movie ID parameter from the router and filter the movie list to get movie.
- Import the StarRating component and add use it to render the user rating.
- Create links from the Genres with a query string parameter with genre ID back to the Dashboard view.
- In the Dashboard view, add a listener to get the genre query string parameter and add it to the filter.