[ZerotoMastery] Build an Image Filters App with Vue, TypeScript and WebAssembly
This portfolio project involves building an image filter application that brings the experience of applying Photoshop filters to the web. Plus you’ll learn the best practices for building custom composables, a common issue for junior Vue Developers.
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!
WHAT ARE THE PREREQUISITES?
Required
– Intermediate knowledge of Vue. Don’t have that? Take the Complete Vue Developer course now!
Recommended
– Knowledge of WebAssembly and TypeScript is recommended, but not required as this project will get you up to speed on them. But if you still want to learn those in-depth first, you can take our courses on WebAssembly and TypeScript.
WHAT TOOLS WILL BE USED?
Composition API, Vue, Vite, WebAssembly, and TypeScript.
Released 7/2023
Size: 277 MB
https://academy.zerotomastery.io/courses/2090711/lectures/48010982.