let's COOK

let's COOK

A fully function Ionic 3 Firebase app displaying multiple examples of CRUD operations and custom components


Daniel Codrea

Daniel Codrea

Member since 2016


iOS, Android  
4 years ago
3 years ago
ionic 3, firebase, CRUD operation, camera, authentication, slides, search, custom directives, custom components, lazy loading, custom validation,

A fully functional recipes manager mobile application written in Ionic 3 and Angular 4 using Google Firebase as a backend.

Before buying you can test the application in Ionic View using app code 42f6d6f6, or downloading the app from GooglePlay

The application provides fully integrated email and password authentication process, with signup, login and password reset functionalities.

Once, logged in, a user can browse existing recipes, edit personal account info (changing name, email, password, image), create own recipes.

When browsing recipes the user can add to favorites a recipe. All favorite recipes are available inside the “Favorite Recipes” menu entry.

The application has several CRUD operation examples: adding to lists, removing from lists, querying lists.

Besides firebase functionality examples, there is an example on how to build a custom directive. The custom directive is used to generate an avatar for a user that has no image uploaded.

Also, the application uses multiple ionic components, like lists, slides, search-bar, camera, etc.

The app is built using Ionic v3 and Angular 4 and it can be used on Android, iOs, or Windows platforms.

Starting and running the app

After downloading and unpacking the files, simply navigate to the app's folder and "npm install" to get all dependencies. Don't forget to add your desired platform using the "*ionic cordova platform add *" command.

Using your own firebase

After installing all dependencies, and before serving up the app, make sure you ADD YOUR FIREBASE DETAILS inside the ‘app.components.ts’ file. To get your firebaseConfig details, after creating a firebase project and navigating to your Firebase’s Console, open your apps dashboard firebase app dashboardOn your firebase app dashboard just pick Add Firebase to your webapp, and copy the needed details from the popup. firebase config detailsAlso, you have to set the rules for the database in order to work properly with the application settings. Just go to your application Database section and click on the Rules tab. Here, change the existing rules to the following:

{ "rules": { "userProfile": { "$uid": { ".read": "auth != null", ".write": "auth != null" } }, "recipes": { ".read": "auth != null", ".write": "auth != null", ".indexOn": ["name", "category", "userID", "likes"] } } }

firebase database rulesNow you can test your app running ionic serve, or ionic lab, if you want to preview it on multiple platforms.

Issues you may encounter

There is a chance, that when trying to emulate the app on iOS platform you get an error like Cannot read property 'replace' of undefined. To fix this, just navigate to your platforms/ios/cordova folder and run npm install ios-sim. After this, you can go back to your app root and emulate the app on iOS.