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

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

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