https://github.com/break-stuff/smithflix
A movie rental application for a Vue.js demo.
https://github.com/break-stuff/smithflix
Last synced: about 1 year ago
JSON representation
A movie rental application for a Vue.js demo.
- Host: GitHub
- URL: https://github.com/break-stuff/smithflix
- Owner: break-stuff
- License: mit
- Created: 2018-12-23T19:05:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:44:15.000Z (over 3 years ago)
- Last Synced: 2025-03-29T00:51:16.439Z (about 1 year ago)
- Language: JavaScript
- Size: 3.44 MB
- Stars: 6
- Watchers: 0
- Forks: 5
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Smmithflix Challenge
Welcome to the Smithflix Vue.js challenge!!!
to build and run this application, the following commands are available:
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Run your unit tests
```
npm run test:unit
```
## The Challenge
The goal of this challenge is to make a basic movie rental application.
### Tasks
#### Environment Setup
1. Install editor tools
2. Install browser dev tools
* [Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
* [Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
#### Project Setup
1. 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)
2. From this project copy/replace the following directories:
* `/public`
* `/src/assets`
* `/src/sass`
* `/src/data`
* `/src/utils`
3. Import the `/src/sass/styles.scss` in the `/src/main.js`
4. In `/src/views` created the following pages:
* Cart.vue
* Dashboard.vue
* Home.vue
* Movie.vue
5. In `/src/router.js` create routes for the new pages ***(note: the movie route will need to take in an ID parameter)***
#### Create Main Menu
1. In `/src/components` create a new component called "MainMenu.vue" and create links to the Home, Dashboard, and Cart pages.
2. Add the "MainMenu" component to the `/src/App.vue` file.
3. Update router `linkActiveClass` property to "active"
4. Add event to router to update `