Demo of the finished project
This is a hands-on course where most of learning happens through working on the case-study project, Vue.js Cinema, which is a movie session times app.
In this video, we're going to take a look at the project in its complete state so you get a sense of what you'll have accomplished by the end.
Looking at the main interface, on the left here, we have our selection of movies including the title, rating, and session times.
Filters
On the right, we have checkboxes that we can use to filter the selection of movies shown based on the user's preference.
For example if we were to click "After 6 pm", we'd filter the movie list to only show those which have session time after 6 pm.
Same goes for the genre filter. For example, we might only want to see the documentaries or animations.
Day selector
Another feature we have is the "day selector" at the top. This also acts as a filter, only showing movies with session times on the selected day.
Pages
As I mentioned, this app utilizes Vue Router, allowing us to have multiple views in the app without having to reload it from the srver.
To see how we leverage that, when we click on the title or the image of a particular movie you'll see the "detail" view.
Notice that the URL changes as we navigate to this new page, but the view updates instantaneously. That's a benefit of Vue Router that we'll be exploring as the course progresses.
Tooltips
The final feature we'll look at it is the "tooltips" feature. If we hover over any session time you can see the number of seats available for that session in a special type of UI widget that we'll be implementing from scratch.
So that's an overview of the case-study app.
In the next video, we'll be introduced to Vue CLI, a key development tool in the Vue.js ecosystem that we'll be utilizing to build Vue.js Cinema.
Click to load comments...