Using Ionic Framework VueJS, Firebase & Vuex Store For Image Diary App

Aaron Saunders
0 ratings

Learn To Build Mobile Apps With Ionic Framework VueJS and Capacitor 

Early Access - Using Ionic Framework VueJS, Firebase & Vuex Store For Image Diary App


Mobile application to deploy on IOS and Android that allows a user to log in, create an account take a photo, add comments, metadata to the specific photo and share the photo and thoughts through social media. This app is of no real purpose other than to demonstrate the use of common patterns in building solutions with Ionic Framework and VueJS

You Will Learn To Use Firebase, Vuex, and Ionic Component with VueJS

  • Take a Photo with Capacitor Camera Plugin
  • Manage Application state using Vuex
  • Using Namespaces in Vuex
  • Making API Calls Through Vuex
  • Using Actions, Mutations, and Getters in Vuex
  • Account Creation and Account Login Using Firebase
  • Store Data In Firebase Collections
  • Saving Images In Firebase Collection
  • Emitting Events In VueJS
  • Creating Custom Components
  • Managing Public and Private Routes in Application
  • Working with UI Patterns, Tabs, List and Detail Page
  • Building A User Profile Page with Profile Image
  • Form Validation


LESSONS

Getting Started

0.1 Read Me


Creating Authentication Flow with Vuex and Firebase

1.1 Create Application And Vuex Store With Firebase Authentication

1.2 Integrate Authentication into App Using Vuex Store

1.3 Create Custom Components for UserInfo and To Login A User


Taking Pictures With Capacitor Camera Plugin

2.1 Adding Capacitor Camera Plugin

2.2 Take Photo And Render In Preview Modal

2.3 New Modal Component Showing Image And Emitting Events

2.4 Get Modal Input For Uploading With Image


Adding Data to Firestore Collection and Cloud Storage Using Vuex

3.1 Setting Up The Vuex Store For Saving Image Posts

3.2 Saving Image Post Data to the Firebase Collection

3.3 Saving Images to Firebase Cloud Storage

3.4 Testing Integration Of Image Posts & Images Into Store


Updated User Interface To Show Image Posts

4.1 Refactor Vuex Store, Add Support For User Posts

4.2 Rendering The ImagePosts in the Home Component


Working Routes And Protected Routes

5.1 Create Login Page

5.2 Create Sign Up Page

5.3.1 Update Firebase API And Vuex Store To Support Sign Up

5.3.2 Integrate New Firebase API Calls Into Vuex Store

5.3.3 Integrate Vuex Store Changes and Test 

5.4 Update Router To Support New Routes


Remaining Lessons To Be Completed

Creating User Profile Page
6.1 Adding Tabs To Interface
6.2 Create View Mode of Profile Page
6.3 Create Edit Mode of Profile Page
6.4 Add Profile Photo Functionality To Profile Page

Final Capacitor Build Confirmation
7.1 IOS
7.2 Android


Preview Videos Of Project Available Here

https://www.youtube.com/playlist?list=PL2PY2-9rsgl1NS3E77BkVxGUnSGlKvNnm


  • Working with Firebase and Vue3 Vuex for state management authentication, data storage and image upload and more...

  • Format
    4.5 hours HD Video
  • Lessons
    26
  • Office Hours Available
  • Working with Firebase and Vue3 Vuex for state management authentication, data storage and image upload and more...
  • Format4.5 hours HD Video
  • Lessons26
  • Office Hours Available
Powered by

Checkout

Using Ionic Framework VueJS, Firebase & Vuex Store For Image Diary App

Enter your info to complete your purchase of Base Price

Card

or pay with
You'll be charged US$24.99.