In Part 3 of the series, we take a deep dive into the Vue.js frontend of the photo slideshow application. This includes creating three main views: the TV slideshow, the photo upload page, and the login page.
We start by discussing the client-side routing for each of these views and how it is used to navigate between them. We also explain how the app handles login, with proper redirects to the originally requested page using the Vue Router's redirect functionality.
Next, we delve into handling Vue.js states, to make a multi-stage image upload view. This includes how to track the progress of the upload, display error messages, and show loading indicators.
We also discuss using Axios to post the photos to the API and how to handle various responses such as success or error messages.
Finally, we discuss how to make a simple but effective photo slideshow of the shared photos for display on a big-screen TV. This includes using Vue.js directives, creating a carousel and handling the sliding animation of the photos.
Throughout the video, we provide practical examples and demonstrations to help viewers understand how the front end works and how the various components interact with each other. By the end of Part 3, viewers should have a solid understanding of the Vue.js frontend and how it handles client-side routing, login, image upload, and creating a slideshow.
Watch the whole series: • Creating a FULL-STACK ...
Git repo: github.com/askcloudarchitech/...
Ask Cloud Architech website: askcloudarchitech.com
Chapters:
Intro - 0:00
Demo - 0:22
Vuejs project file structure - 1:13
Setting up client-side routing - 2:38
Photo upload frontend view - 3:15
Login frontend view - 8:51
Photo slideshow frontend view - 12:05
How the login works - 17:04