Educative – Learn Vue.js from Scratch: Building Testing a Movie App

IntroductionPreview

Join our Discord Server

Presentation of Vue.js

Declarative rendering and first directive : v-bind

More directives: v-if & v-on

Handling user input with v-model

Loops with v-for

Components: props & custom eventsPreview

Building a to-do app: exercise

Building a to-do app: solution

Summary

Setup with Vue CLI

Explaining the different files

What is this .vue file?

Thinking about the app

Summary

Definition of an API

Grabbing the API Key

Storing the API Key

Creating the Search componentPreview

Getting results from OMDb

Logging our results

Using async/await instead of promises

Catching search event & Vue developer tools

Summary

Unit testing and Test Driven DevelopmentPreview

Structure of a test file & matchersPreview

Testing a stack with TDD: part 1

Testing a stack with TDD: part 2

Mocking functions and packages

Vue Test Utils

Testing our Search component: part 1

Testing the Search component: part 2

Testing the app component

Summary

Building our movies listPreview

Adding the movie list item

Implementing the more button

Unknown images & computed properties

No results found: exercise

No results found: solution

Summary

Finding the design

Normalizing CSS and adding SCSS

Search and errors

CSS Grid & movie listPreview

Building a beautiful & simple movie card

Implementing responsive design

Summary

Now

Contribute to Open Source

Congratulations