legendary-recipe
An Angular application that allow the users to manage their recipe and shopping list.
demo: https://lengendaryrecipe.web.app
Technology
Project Description
As a cooking lover, I always want to manage my recipe like BigOven. I want to start from a small step. So I used the opportunity of learning Angular to create this simple recipe book application. So far, I can log in and manage and view my recipe. Whenever I decide which recipe to make on that day, I refer to the ingredients from my recipe and add them to the shopping list tab as my grocery list!
Overview
- The current homepage of the application is the authenticate tab and a login page.
- User can sign up for a new account or sign in with an exisiting account.
- After logged in the the system, user can fetch the exisiting recipe from the database.
- User can modify, add, get, and delete the recipe.
- User can add ingredients to the shopping list on the recipe page.
- User can modify, add, and delete ingredients on the shopping list on the shopping list page.
- User can navigate to view ingredient in shopping list.
- User will redirect to recipe page with auto-login feature if the token is not expires.
- User can logout the system manually or auto-logout when the token expires.
- For the recipe information, user can add a name, image, description, and ingredients (optional) for the recipe.
Security
- The unauthorized user is restricted to URL access. It will redirect the unauthorized user to the login page.
Use case 1 - Create an account or Login with an exisiting accont
Use the sample account for testing or Create a new account
id: test@hotmail.com
pass: 332211
To Create a new account
- Enter a valid email
- Enter a password that its length must greater than 6
- Click > Sign up
Use case 2 - Login and retrieve the recipe
- Enter your Email and Password then clicks > Login.
- After login, you will redirect to the recipe page. The recipe page is empty.
- On the top right, click > Manage > Fetch Data
- After fetching the data, you will see the recipes.
Use case 3 - Add a new recipe
- On the recipe page, click > New Recipe
- On the right, Enter the following fields: name, image URL, and description. Ingredient is optional.
- Once you are done, click > Save.
- The new recipe will show up on the list.
Use case 4 - To save your recipe to the database
Pre: Use case 3
- On the top right, click > Manage > Save Data
Use case 5 - To delete your recipe and update the database
- Select a recipe from your list.
- Click > Manage Recipe > Delete recipe
- On the top right, click > Manage > Save Data
Use case 6 - To edit your recipe and update the database
- Select a recipe from your list.
- Click > Manage Recipe > Edit recipe
- On the top right, click > Manage > Save Data
Use case 7 - To add ingredient to the shopping list via selected recipe
- Select a recipe from your list.
- Click > Manage Recipe > To Shopping List
Use case 8 - To view your shopping list
- Click > Shopping List tab
Use case 9 - To add ingredient on your shopping list at Shopping List tab
- Enter the name field and amount field
- Click > Add
Use case 10 - To edit ingredient on your shopping list at Shopping List tab
- Select the ingredient from the list
- Edit the name field and/or amount field
- Click > Update
Use case 11 - To delete ingredient on your shopping list at Shopping List tab
- Select the ingredient from the list
- Click > Delete
For reuse the code
Pre: Be Familiar with angular CLI and FireBase
- npm install
- Please include your fireBaseAPIKey in project > src > environments > environments.ts & environment.prod.ts
- Please replace your firebase realtime database Http request in src > app > auth > auth.service.ts