Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Build an Instagram Filters App with Vue, TypeScript and WebAssembly

via Zero To Mastery

Overview

This project-based course will teach you to build an image filter app that brings the experience of applying Instagram filters to the web.
  • Understand best practices for building custom composables within the Vue framework
  • Utilize modern technologies such as WebAssembly (WASM) for image processing and integrating WASM packages into Vite's build process
  • Gain practical experience with the Composition API, HTML5 canvas API for image manipulation, and TypeScript annotations for debugging, enhancing skills in Vue development and TypeScript integration
  • Explore practical usage of the Composition API within Vue.js, enhancing your understanding of Vue.js architecture and state management
  • Develop proficiency in integrating WebAssembly (WASM) into web applications for efficient image processing, expanding your toolkit for building dynamic and interactive web experiences
  • Enhance your ability to debug and maintain Vue.js applications by learning TypeScript annotations and applying best practices for code readability and maintainability

Syllabus

  •   Introduction
    • Project Demo
    • Project FAQ
    • Project Resources
    • Exercise: Meet Your Classmates and Instructor
    • Set Your Learning Streak Goal
  •   Building Your Image Filters App
    • Initializing a New Project
    • What is TypeScript
    • Reviewing the TypeScript Configuration
    • TypeScript Basics
    • Preparing the Template
    • Adding a Google Font
    • Automatically Loading Components
    • Interfaces
    • Drag and Drop Events
    • Storing File Data
    • Filter Buttons
    • Composables
    • File Reader
    • Optional Parameters
    • Grabbing the Canvas Context
    • Drawing an Image on the Canvas
    • Calculating the Aspect Ratio
    • Subscribing to Mutations
    • Enabling Web Assembly in Vite
    • Applying a Filter
    • Downloading an Image
  •   Where To Go From Here?
    • Review This Project!

Taught by

Luis Ramirez Jr

Reviews

Start your review of Build an Instagram Filters App with Vue, TypeScript and WebAssembly

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.