TOIT Training

Intermediate

Build a Gallery with Vue and Firebase Storage

Overview
Curriculum

 

Creating a gallery with Vue.js and Firebase Storage harnesses the reactivity of Vue and the scalable storage solution provided by Firebase. Vue.js, known for its intuitive API and component-based architecture, facilitates the development of dynamic user interfaces. Firebase Storage, on the other hand, offers a secure and robust backend for storing and serving user-generated content such as images and videos.

When these two technologies are combined, developers can create a gallery application where images are uploaded to Firebase Storage, and their metadata is managed in real-time. Vue’s reactive data-binding ensures that any changes in the storage – like new images being added or existing ones removed – are immediately reflected in the UI. This integration simplifies the handling of asynchronous operations, such as fetching images or uploading new ones, and allows for real-time updates across all client devices. The resulting gallery application is not only fast and responsive but also scalable, thanks to Firebase’s cloud infrastructure.

Curriculum

  • 3 Sections
  • 16 Lessons
  • 2h Duration
Expand All
 Getting Started
5 Lessons
  1. Introduction & Setup
  2. Firebase Setup
  3. Global Styles & Title Component
  4. Styling the File Upload Input
  5. Handling File Changes
Firebase Composables
7 Lessons
  1. Firebase Storage Composable
  2. Uploading Files
  3. Calculating Upload Progress
  4. Making the Progress Bar
  5. Adding Firestore Documents
  6. Firestore Composable
  7. Unsubscribing from Firestore
Completing the UI
4 Lessons
  1. Making the Image Grid
  2. Image Transitions
  3. Making a Modal
  4. Modal Transition

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Buy for group

Build a Gallery with Vue and Firebase Storage
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)