Starter360: Ionic 2 & Firebase Social Media Template

Use this starter kit to develop your own social media app in Ionic 2 and Firebase

  • Starter360 Features:
  • User Authentication
  • Unique Usernames
  • Profile Pictures
  • Create Posts
  • Swipe to Like/Dislike Posts
  • Comment on Posts
  • Notifications
  • "Time Ago" from Posts
  • Users Delete their own Posts
  • Follow & UnFollow Users
  • Search for Users
  • Starter360 Pages:
  • Home
  • Notifications
  • Profile
  • Create Post
  • Search Page
  • Login
  • Reset Password
  • Signup
  • Post Page
  • Settings
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap

Getting Started

Step 1. Download the Starter Kit

Go to Ionc Marketplace to purchase the Template
BUY NOW

Step 2. Create a New App

In order to use the starter-kit, first start up a new app in the Ionic CLI (it doesn't matter which Ionic Template we use because we are replacing the SRC files):

    
        ionic start AppName --v2
    

Step 3. Replace SRC Folder

After you purchased the Template on Ionic Marketplace, take the downloaded SRC files and replace them with the files in your New App that you just created in Ionic CLI.

Step 4. Connect Your Firebase Account

Open your command prompt and change directory to your App, and run the command below to install firebase:

A. Create a Firebase Project

Next you'll have to go to Firebase to set up the backend of your app. Just create a project by giving it a name:

B. Get Firebase Project Details

After you created your Project on Firebase it will open up it's Dashboard. Click on 'Add Firebase to your Web App' and Copy and paste the snippet below:

C. Import & Intialize Firebase to your Ionic App

Install AngularFire2 Package from command prompt:

    
        npm install angularfire2@2.0.0-beta.6 --save
    

Import & Intialize AngularFire2:

With the code you just copied from Firebase, it's time to initialize it in your Ionic 2 App by going to src/app/app.module.ts and importing it from Firebase:

    
    import { NgModule, ErrorHandler } from '@angular/core';
    import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    
    // Import AngularFire2 Module
    import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
    
    // AngularFire2 Settings (REPLACE THESE SETTINGS from Firebase)
    export const firebaseConfig = {
        apiKey: "YOUR_FIREBASE_API_KEY",
        authDomain: "example.firebaseapp.com",
        databaseURL: "https://example.firebaseio.com",
        storageBucket: "",
        messagingSenderId: ""
    };

    const myFirebaseAuthConfig = {
        provider: AuthProviders.Password,
        method: AuthMethods.Password
    }

    ...
    //Don't forget to Import AngularFire here
    imports: [
        IonicModule.forRoot(MyApp),
        AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig)
    ],
    

Step 5. Install Plugins

Still on your command prompt in your App directory, install the cordova plugins needed for app:

    
        cordova plugin add cordova-plugin-camera
    

You're all Set! Now Run your App

    
        ionic serve
    

Cheers, Happy Coding!

Subscribe to Newsletter for Upcoming Ionic 2 & Firebase App Posts.