{"id":15387999,"url":"https://github.com/break-stuff/smithflix","last_synced_at":"2025-04-15T20:21:07.278Z","repository":{"id":39561607,"uuid":"162917015","full_name":"break-stuff/smithflix","owner":"break-stuff","description":"A movie rental application for a Vue.js demo.","archived":false,"fork":false,"pushed_at":"2023-01-03T15:44:15.000Z","size":3608,"stargazers_count":6,"open_issues_count":24,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-29T00:51:16.439Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/break-stuff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-23T19:05:25.000Z","updated_at":"2019-08-01T14:47:43.000Z","dependencies_parsed_at":"2023-02-01T07:15:55.753Z","dependency_job_id":null,"html_url":"https://github.com/break-stuff/smithflix","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fsmithflix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fsmithflix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fsmithflix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/break-stuff%2Fsmithflix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/break-stuff","download_url":"https://codeload.github.com/break-stuff/smithflix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249145942,"owners_count":21220063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T14:55:14.751Z","updated_at":"2025-04-15T20:21:07.253Z","avatar_url":"https://github.com/break-stuff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smmithflix Challenge\nWelcome to the Smithflix Vue.js challenge!!!\n\nto build and run this application, the following commands are available:\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Run your tests\n```\nnpm run test\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Run your unit tests\n```\nnpm run test:unit\n```\n\n## The Challenge\n\nThe goal of this challenge is to make a basic movie rental application.\n\n\n### Tasks\n\n#### Environment Setup\n\n1. Install editor tools\n2. Install browser dev tools\n    * [Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)\n    * [Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)\n\n#### Project Setup\n\n1. Using the Vue CLI or UI create a new application that includes at least:\n    * Babel or TypeScript\n    * Vue-Router\n    * CSS Pre-processor (SCSS)\n    * Unit Testing (Choose your poison)\n2. From this project copy/replace the following directories:\n    * `/public`\n    * `/src/assets`\n    * `/src/sass`\n    * `/src/data`\n    * `/src/utils`\n3. Import the `/src/sass/styles.scss` in the `/src/main.js`\n4. In `/src/views` created the following pages:\n    * Cart.vue\n    * Dashboard.vue\n    * Home.vue\n    * Movie.vue\n5. In `/src/router.js` create routes for the new pages ***(note: the movie route will need to take in an ID parameter)***\n\n#### Create Main Menu\n\n1. In `/src/components` create a new component called \"MainMenu.vue\" and create links to the Home, Dashboard, and Cart pages.\n2. Add the \"MainMenu\" component to the `/src/App.vue` file.\n3. Update router `linkActiveClass` property to \"active\"\n4. Add event to router to update `\u003cbody /\u003e` class to route name.\n\n#### Home Page\n\n1. In `/src/views/Home.vue` add a witty title and a link to the Dashboard page.\n\n#### Star Rating\n\n1. In `/src/components` create a new component called \"StarRating.vue\" with a property for rating and a computed property to convert the rating to a percent.\n\n#### Movie Summary\n\n1. In `/src/components` create a new component called \"MovieSummary.vue\" with a property for movie data using your new \"StarRating\" component.\n\n#### Movie List\n\n1. In `/src/components` create a new component called \"MovieList.vue\" with a property for a list of movie data and import the MovieSummary component.\n2. Loop through the list to display a list of movie summaries.\n3. Add the MovieList component to the Dashboard page.\n4. In the Dashboard view, import the list of movies, set them to a data property, and bind them to the MovieList component.\n\n#### Side Nav\n\n1. In `/src/components` create a new component called \"SideNav.vue\"\n2. Create a search input box\n3. Create a drop-down list for the fields you would like to sort by\n4. Import the list of genres and create a checklist from them and bind them to a data source.\n5. Add a property called `movieFilter` and bind the search box, sort drop-down, and genre check list.\n6. Add the SideNav Component to the Dashboard view.\n\n#### Dashboard View\n\n1. Add data properties for `filteredMovies` and a `movieFilter`.\n2. Bind the movie filter to the SideNav component and the filtered movies to the MovieSummary component\n3. Filter the movies once the Dashboard component is created.\n4. Set a watcher to watch for changes in `movieFilter` and refilter the list\n\n#### Movie View\n\n1. Add link to MovieSummary component that links to the Movie view using the movie ID in the URL as a parameter.\n2. When Movie view is created get movie ID parameter from the router and filter the movie list to get movie.\n3. Import the StarRating component and add use it to render the user rating.\n4. Create links from the Genres with a query string parameter with genre ID back to the Dashboard view.\n5. In the Dashboard view, add a listener to get the genre query string parameter and add it to the filter.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fsmithflix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbreak-stuff%2Fsmithflix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreak-stuff%2Fsmithflix/lists"}