HomeCoursesBuilding a WhatsApp Clone with Vue.js and AWS Amplify

Intermediate

Building a WhatsApp Clone with Vue.js and AWS Amplify

Become an AWS pro by building a WhatsApp clone with Vue.js and AWS Amplify. Developed by AWS Solution Certified Architects. Get hands-on with no setup, no cleanup, no hassle.

Join 2.7 million developers at

Overview

Content

Reviews

Vue.js is a popular JavaScript framework for front-end development. It is lightweight, has a dynamic ecosystem, and is expected to grow further as more developers adopt it. This course uses a hands-on project—a WhatsApp clone—to cover important concepts of front-end development using Vue.js. The project also uses AWS Amplify to manage and configure various AWS products to develop the application’s backend and to deploy the final product. The course starts by introducing us to core Vue.js concepts like lifecycle hooks, routing, and state management. It then gives us a step-by-step guide to create a WhatsApp GUI. You’ll integrate the application with AWS Amplify before adding the WhatsApp functionality to the project. By the end of the course, you’ll have a better understanding of the Vue.js framework. You’ll also get hands-on experience using AWS Amplify to manage various AWS products and services, including AWS Cognito, AWS S3, and AWS DynamoDB, to develop and deploy a Vue.js web application.

Vue.js is a popular JavaScript framework for front-end development. It is lightweight, has a dynamic ecosystem, and is expected ...Show More

WHAT YOU'LL LEARN

Hands-on experience with configuring resources and deploying applications on AWS using AWS Amplify

Familiarity with routing, state management, and lifecycle hooks in Vue.js

The ability to model a GraphQL database using AWS Amplify

Working knowledge of various AWS products

Hands-on experience with configuring resources and deploying applications on AWS using AWS Amplify

Content

28 Lessons4 Quizzes

Getting Started

1 Lessons

Get familiar with building a WhatsApp clone using Vue.js, AWS Amplify, and essential cloud tools.

Introduction to the Course

Introduction

6 Lessons

Look at vue.js framework basics, app structuring, lifecycle hooks, routing, and Vuex state management.

Getting Started with Vue.js

Structuring the Vue.js Application

Vue.js Lifecycle Hooks

Routing in Vue.js

State Management with Vuex

Quiz: Introduction

Building WhatsApp Clone

6 Lessons

Work your way through building a WhatsApp clone with Vue.js and AWS Amplify.

Adding Tailwind CSS to Vue.js

Error 404 Component

The Login, Signup, Password Help, and Reset Password Components

Creating the Home Component

Adding Vue Navigation Guard

Quiz: Building WhatsApp Clone

Getting Started with AWS Amplify

6 Lessons

Grasp the fundamentals of AWS Amplify setup for authentication, storage, and backend services.

Introduction to AWS Amplify

Configuring AWS Credentials

Adding Authentication with AWS Cognito

Adding AWS S3

Adding GraphQL API and DynamoDB

Quiz: Getting Started with AWS Amplify

Adding Functionality to The Application

6 Lessons

Take a closer look at enhancing a WhatsApp clone with authentication, messaging, image upload, and real-time features.

Integrating User Authentication and Protecting Routes

Adding Logic to Messages and Working with Subscriptions

Adding Upload of Images To S3

Adding Last Seen and User Typing Features to the Application

Testing Application and Continuous Delivery Pipeline

Quiz: Adding Functionality to the Application

Conclusion

1 Lessons

Focus on your new skills in Vue.js and AWS Amplify for future projects.

Wrapping Up

Appendix

2 Lessons

Master the steps to creating an AWS account and deploying applications using AWS Amplify.

Creating an AWS Account

Deploying Application to AWS Amplify

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Kevin Odongo

Developed by MAANG Engineers

Every Educative lesson is designed by a team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

Vue - The Road to Enterprise

Gain insights into advanced practices for Vue. Discover migration techniques to Vue 3, project configuration, API layer creation, performance optimization, security, and testing best practices.

40 h

intermediate

Course

Modern CSS with Tailwind

Gain insights into industry best practices for designing web pages with Tailwind CSS. Explore typography, box models, and master layouts using flexbox and grids effectively.

26 h

intermediate

Course

Learn the A to Z of Amazon Web Services (AWS)

This course provides the best Amazon Web Services (AWS) tutorial for beginners to learn about AWS cloud services.

3 h

beginner

Course

Jump Start with Vue 3

Gain insights into Vue 3’s enhanced reactivity and Composition API. Explore fundamental concepts, components, routing, and TypeScript integration to craft scalable, maintainable web applications.

16 h

beginner

Course

Vue - The Road to Enterprise

intermediate

40 hour

Course

Modern CSS with Tailwind

intermediate

26 hour

Course

Learn the A to Z of Amazon Web Services (AWS)