CF

Build an Image Filters App with Vue, TypeScript and WebAssembly

1h 44m 19s
English
Paid

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!

Additional

https://github.com/ZTMLuisRamirez/vue-image-project

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 22 lessons

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

Related courses

Frequently asked questions

What are the prerequisites for taking this course?
This course assumes a basic understanding of JavaScript and familiarity with the Vue.js framework. An introductory knowledge of TypeScript will be beneficial but not necessary, as the course includes lessons on TypeScript basics and configuration. Familiarity with HTML and CSS is also recommended to help understand the HTML5 canvas API and integrate Google Fonts into the project.
What will I build by the end of this course?
By the end of the course, you will have built 'Vue Filters', an image filter application. This project allows users to apply filters to images, akin to Photoshop, using modern technologies like Vue, TypeScript, and WebAssembly. The application will include features such as drag and drop for uploading images, applying filters via the HTML5 canvas API, and downloading the edited images.
Who is the target audience for this course?
The course is designed for developers who want to expand their skills in modern web technologies such as Vue, TypeScript, and WebAssembly. It is particularly suited for those interested in practical, portfolio-building projects and who are looking to understand the application of the Composition API and custom composables in real-world scenarios.
How does this course compare to other Vue courses?
Unlike many introductory Vue courses that focus on the basics, this course dives into advanced topics like integrating WebAssembly with Vite and using the Composition API effectively. It also emphasizes practical application through the development of a complete image filtering app, making it more suitable for intermediate learners looking to build on their existing knowledge.
What specific tools and platforms are used in this course?
The course utilizes Vue.js for building the front-end application and TypeScript for type-checking. WebAssembly is used to process images efficiently, and Vite is employed for the build process. The HTML5 canvas API is used for drawing and manipulating images, and Google Fonts are integrated to enhance the application's design.
What topics are not covered in this course?
The course does not cover back-end development, server-side rendering, or database integration. It focuses solely on front-end technologies and the development of a client-side image filtering application. Additionally, while TypeScript is used extensively, the course does not provide a full introduction to TypeScript, assuming some prior knowledge.
How much time should I expect to commit to this course?
The course is designed to take approximately 3 hours to complete. This includes time spent watching the instructional videos and working through the hands-on project exercises. However, the actual time commitment may vary depending on your familiarity with the technologies and your pace of learning.