Skip to main content

Build an Image Filters App with Vue, TypeScript and WebAssembly

1h 44m 19s
English
Paid

Course description

WHAT IS THIS PROJECT?

With this project you'll build "Vue Filters", an image filter application built with Vue that allows you to bring the experience of applying Photoshop filters to the web. By the end, you'll learn the best practices for building custom composables.

WHY IS THIS PROJECT AWESOME?

This is a portfolio project. It requires about 3 hours to build.

Don't be fooled by the project size - a lot of modern technologies are utilized here in order to build a modern image application. Under the hood, you'll leverage WebAssembly to process images and integrate a WASM package into Vite's build process. Plus thjs project will give you the opportunity to use the Composition API in a practical scenario.

During the building process we'll take the time to discuss the HTML5 canvas API for drawing, manipulating, and downloading images.

TypeScript is also going to be a major player in this project. Learning how to correctly annotate variables is going to help us debug the application. Lastly, you'll learn the best practices for building custom composables - something I see junior Vue Developers doing incorrectly with all the time!

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 22 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Project Demo

All Course Lessons (22)

#Lesson TitleDurationAccess
1
Project Demo Demo
01:31
2
Initializing a New Project
02:44
3
What is TypeScript
03:11
4
Reviewing the TypeScript Configuration
05:16
5
TypeScript Basics
06:22
6
Preparing the Template
04:10
7
Adding a Google Font
03:44
8
Automatically Loading Components
04:22
9
Interfaces
06:58
10
Drag and Drop Events
07:16
11
Storing File Data
04:50
12
Filter Buttons
06:38
13
Composables
02:21
14
File Reader
03:10
15
Optional Parameters
06:41
16
Grabbing the Canvas Context
06:09
17
Drawing an Image on the Canvas
05:00
18
Calculating the Aspect Ratio
05:51
19
Subscribing to Mutations
03:16
20
Enabling Web Assembly in Vite
04:23
21
Applying a Filter
06:05
22
Downloading an Image
04:21

Unlock unlimited learning

Get instant access to all 21 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React & TypeScript Mastery

React & TypeScript Mastery

Sources: Beto Moedano
React & TypeScript Mastery is a hands-on course that will guide you step by step from the basics to an advanced level in developing modern applications on...
24 hours 15 minutes 54 seconds
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Sources: Nomad Coders
We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
22 hours 41 minutes 56 seconds
TypeScript Simplified

TypeScript Simplified

Sources: webdevsimplified.com
Everything you need to learn TypeScript and build any project you can dream of in 47 easy to digest videos which amount to just under 5 hours of video content. Every single vide...
10 hours 23 minutes 56 seconds
Vue.js Master Class 2024 Edition

Vue.js Master Class 2024 Edition

Sources: vueschool.io
Learn by building a real-world application from scratch! This comprehensive course by Vue School teaches you Vue.js, best practices, modern JavaScript, and exci
11 hours 55 minutes 11 seconds
Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

Sources: udemy
If you’re already familiar with Vue 2 & The Options API, then this course will teach you everything you need to know to switch over to (and get started with) Vu
9 hours 10 minutes 13 seconds