Create a small web application that works online and offline

Hi, I need a small web application for storing cooking recipes,that works online and offline.

Here you have a quick recap of the requirements of the projects:

- basic bootstrap template (I will use it on ipad tablet), no graphic needed

- login page (no registration or recover my password, just login), set cookie expire to 2055; login comes from Firebase (so you have to use Firebase APIs to complete this task); I've already created an authorized user in firebase

- form to add / edit a recipe - list of stored recipes, with buttons for editing one recipe or show a recipe

- show a recipe (no editing), with the possibility to change the number of servings (doing this, it will trigger an action that calculates the right quantities of the ingredients, showing updated values in the page)

- the pages will work even offline (using html5 appCache)

- pages will show a little alert online / offline on top of the page (I've already done this script, you can find it in attachment)

I would like to store the recipes in Firebase (I already have an account, shared with you) and locally (html5 localStorage, webSql, indexedDB, or whatever technology you prefer); you should take care of syncing data as soon as I'm back online (no complex situations of multiple accesses from several devices, I'll use the app only from my tablet, so you should push data to Firebase; if I don't have any data on tablet, you'll get recipes from Firebase).

Here you can find the fields I need in the form:

- recipe name (text)

- servings (number)

- ingredients (I can have many ingredients, so please create a button that allows me to add and remove ingredient rows dinamically) (field types: name is string, quantity is number, measure unit is a dropdown)

- description (textarea with tinymce)

In attachment you can see the data structure I want for the recipe; recipes must be stores under the user node, so in the future I can add new users, and each one can see and edit only they recipes.

I've attached even the script that checks if we are online or offline.

Desired behaviour:

On the top right position of each page there is a little <div> showing if I'm online or offline

First page of the app is the login page.

After login I can see the page with the list of recipes; for each recipe I have two buttons: edit recipe, show recipe; at the top of this page I've the 'add new recipe' button.

Clicking add new recipe button I'll see the empty form; the form has a 'save' button.

Clicking edit recipe button I'll see the form with all fields filled with correct data; the form has a 'save' button.

Clicking show recipe I'll see the recipe; the only editable field will be the 'servings': changing the number of servings then all ingredients quantity will change accordingly.

As told on freelancers website, I want to store recipes on Firebase and in local storage / indexeddb / another html5 technology that works well on all browsers; so, when I push 'save' button I save it locally; as soon as I'm online the recipes will be pushed online to Firebase (adding the new ones, and updating the existing ones).

I'll use this web application from my ipad tablet, with major browsers.

Please tell me if you need any clarification.

Thanks a lot.

Best regards.

Talking about firebase, please implement a security rule like this one:
https://www.firebase.com/docs/security/guide/user-security.html

So store my recipes under my user, so if in the future I'll add a user, each user can see / edit only his own recipes

AJAX AngularJS HTML5 JavaScript jQuery / Prototype

Project ID: #10091789

About the project