Don't want to get left behind? Learn to build with A.I. now 🤖
Back to courses

Build an Instagram Filters App with Vue, TypeScript and WebAssembly

In this project-based course This project-based course will teach you to build an image filter app that brings the experience of applying Instagram filters to the web.

2 Days

Average time students take to complete this course.

instructor
Taught by: Luis Ramirez Jr
Last updated: April 2024

Overview

Learn the intricacies of modern, full-fledged web development by building a modern (and fun!) Instagram filter app. Under the hood you'll leverage Vue, TypeScript and WebAssembly to create a modern application that utilizes best practices, gain valuable experience building custom composables and with the Composition API, and have a project that will wow employers!

What you'll learn

  • 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

Why Is This Vue Project Awesome?

Because it's the perfect opportunity for you to advance your skills as a Vue Developer!

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 this 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 we see junior Vue Developers doing incorrectly with all the time!

Wait... What's a Project?

One of the most common things we hear from students is: "I want to build more projects!"

We love hearing that, because building projects is really the best way to learn. And unique, challenging projects can really make your portfolio stand out for potential employers.

But also...it just feel so good when you actually build something real!

That's why we've created ZTM Projects. A collection of comprehensive portfolio and practice projects that you can use to advance your knowledge, learn new skills, build your portfolio, and sometimes even just have fun!

What Else Should I Know?

By becoming a ZTM member you'll not only get access to all our courses, bytes, and projects.

But you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Most importantly, you'll be learning from an industry professional (Luis) that has actual real-world experience using Vue to build projects. He teaches you the exact strategies and techniques he uses in his role.

Finally, as with all ZTM courses, this course is a living thing. It will be constantly updated as the landscape changes so you can use it as your go-to resource for building Vue projects now and throughout your career.

Join 1,000s of Zero To Mastery graduates that have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

And you have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start building this Vue project today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Join Zero To Mastery Now

Course curriculum

Here's an overview of what you'll learn in this Vue project.

Introduction

5 lectures

Project Demo1:30

PREVIEW

Project FAQ

PREVIEW

Project Resources

BEGIN

Exercise: Meet Your Classmates and Instructor

BEGIN

Set Your Learning Streak Goal

BEGIN

Building Your Image Filters App

21 lectures

Initializing a New Project 2:43

BEGIN

What is TypeScript3:10

BEGIN

Reviewing the TypeScript Configuration5:15

BEGIN

TypeScript Basics6:21

BEGIN

Preparing the Template4:09

BEGIN

Adding a Google Font3:43

BEGIN

Automatically Loading Components4:21

BEGIN

Interfaces6:57

BEGIN

Drag and Drop Events7:15

BEGIN

Storing File Data4:49

BEGIN

Filter Buttons6:37

BEGIN

Composables2:20

BEGIN

File Reader3:09

BEGIN

Optional Parameters6:40

BEGIN

Grabbing the Canvas Context6:08

BEGIN

Drawing an Image on the Canvas5:00

BEGIN

Calculating the Aspect Ratio5:50

BEGIN

Subscribing to Mutations3:15

BEGIN

Enabling Web Assembly in Vite4:22

BEGIN

Applying a Filter6:04

BEGIN

Downloading an Image4:20

BEGIN

Where To Go From Here?

1 lectures

Review This Project!

BEGIN

Meet your instructor

Your instructor (Luis) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Luis Ramirez Jr

Hi, I'm Luis Ramirez Jr!

Luis uses his 10+ years of experience in web application development to teach and guide new students to learn to code, get hired and become successful Software Engineers.

SEE MY BIO & COURSES

Luis Ramirez Jr

Frontend Developer

Frequently asked questions

Are there any prerequisites for this course?

Required:

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.

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Are there subtitles?

Yes! We have high quality subtitles in 11 different languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

MOST POPULAR

Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.