Firebase v2 Social Network

Firebase v2 Social Network

Multi-Purpose Firebase Social Network with Firebase Authentication

$0.00

Noodlio

Noodlio

Member since 2014

Details

Version:
2.1
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
3 years ago
Category:
Starters
Tags:
firebase, social login, social, google, facebook, twitter, auth, authentication, timeline, post, feed, ngcordova, sign up,

** Firebase V3 - This version is currently not compatible with Firebase v3. Feel free to try out the Advanced Edition instead (supports Firebase v3) **

You might be also interested in Ionic Shop - Advanced Edition, which includes additional features such as inventory management, ratings, comments, attributes, and more. Have a look here

All you need to start your own Social Network today

Watch the demo video

This starter is a multi-purpose solution for creating your own Social Network today. It consists of the main functionalities that any social network has: follow or unfollow users, add posts, view timelines and manage your profile settings. It also comes with pre-configured sass settings, allowing you to change the look of the starter with ease. For example, replace the variable $positive to your prefered color and the color yellow will immediately be replaced by your choice. The back-end consumes the Firebase in a noSQL setting for fast processing.

An overview of the functionalities:

  • Sign up and sign in with E-mail and Password
  • Recover a forgotten password
  • Edit your E-mail and Password
  • Sign in with Twitter, Google or Facebook (social authentication)
  • View and manage timelines
  • Add or manage posts
  • Add images to posts
  • Follow or unfollow users
  • Search by username
  • Manage your profile settings (details, profile picture, etc.)
  • Change your profile picture (import from your phone albums or take a new picture)

ionic-plugin-keyboard

For Ionic developers, it might be worth mentioning that this starter also showcases the use of ionic-plugin-keyboard, which allows you to place the keyboard below a footer. Handy for when you want to create a view with posts (see image).

Complete Setup Services for Non-Developers

If you are not a developer but would still like to use this package, then we also offer a Quick-Start Service. One of our developers will setup this package for you and guide you through the process. We also offer personal customizations (i.e. design and functionalities). If you are interested, feel free to reach out to noodlio@seipel-ibisevic.com.

Getting started

To start editing this code, make sure that NodeJS is installed in your workspace. Then run the following npm commands to install cordova and ionic globally:

npm install -g cordova ionic

Once the installation is complete, unzip the content of this package to the appropriate folder. ngCordova and other necessary plugins are included in the files.

If you are deploying this starter with Phonegap Build, make sure that you add the following cordova plugins in the config.xml file:

cordova-plugin-camera cordova-plugin-inappbrowser ionic-plugin-keyboard

Firebase Authentication Setup

To setup the back-end, please ollow these steps:

  1. Create an account on firebase.com
  2. Then create a new app and open the dashboard.
  3. On your left, go to Login & Auth
  4. Go to Email & Password and press on Enable Email & Password Authentication
  5. Go to Facebook and paste your app ids. You can obtain them by following these instructions.
  6. Go to Google and paste your app ids. You can obtain them by following these instructions.
  7. Go to Twitter and paste your app ids. You can obtain them by following these instructions.

Steps 5 to 7 are optional. It is only if you wish to enable Social Authentication.

The final step is to point the app to the appropriate Firebase back-end. Open the file www/js/app.js and replace the variable FBURL with the appropriate url of your app (when you open your app dashboard, it's the url in the browser; something like: <your-app-name>.firebaseio.com)

Firebase Security Rules

  1. Copy the content of the file /config/security-rules.txt
  2. Head over to your app dashboard
  3. On the left, press on Security and Rules
  4. Paste and replace the content

Try before you buy

Download Ionic View (view.ionic.io), sign in, and enter the following app id: 56307b83