Skip to content

The ultimate recipe app is finally here! Yummy Recipes can help you out with either your favourite recipes or your loved shopping list. Built with HTML, CSS, Typescript and Angular 9.

Notifications You must be signed in to change notification settings

sgtbrunner/yummy-recipes

Repository files navigation

Contributors Forks Stargazers Issues LinkedIn


Logo

Yummy Recipes

The ultimate recipe app is finally here!
Explore the docs »

View Demo · Report Bug / Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. Contact
  7. Acknowledgements

About The Project

Yummy Recipes

The ultimate recipe app is finally here! Yummy Recipes can help you out with either your favourite recipes or your loved shopping list.

This project was originally built as a pratical exercise to learning Angular 2+, Typescript, Bootstrap and Firebase Realtime Database API integration.

Built With

Yummy Recipes was built with the following technologies:

Brunner-HTML Brunner-CSS Brunner-Js Brunner-Ts Brunner-Angular Brunner-Firebase Brunner-Bootstrap

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Have npm installed in your machine.

  • npm
    npm install npm@latest -g

Have a Firebase Realtime Database set up and running. Click here to create it if you don't have one already.

Installation

On terminal

  1. Clone the repo

    git clone https://github.com/sgtbrunner/yummy-recipes
  2. Navigate to project folder

    cd yummy-recipes
  3. Install NPM packages

    npm install
  4. Replace DATABASE_URL and RECIPES_TABLE constants in the src/app/shared/constants/app-constants.ts file with your own Database URL and Recipe Table file name respectively

  5. Create files environment.ts and environment.prod.ts in src/environments folder. In both files, place the following code:

    export const environment = {
       production: ( false if environment.ts and true if file is environment.prod.ts),
       API_KEY: '',
       MASTER_USER_ID: ''
    };
    
  6. Fill in API_KEY and MASTER_USER_ID with your own API KEY (from your Firebase Realtime Database) and ADMIN USER ID (the user you have setup on Firebase as the main user) respectively.

    PS: The ADMIN USER is the user whose added recipes will show up as the default recipes every time the app is loaded.

Usage

Run the following commands on terminal within the project folder

  1. Starting the app

    npm start

    If you browser doesn't open automatically, open it and navigate to

    http://localhost:4200/

    You can create an account to get access to your customized space...

    screenshot1

    ...add customized recipes... screenshot3

    ... edit or delete existing ones... screenshot2

    ... send your recipes to a shopping list... screenshot4

    ... and view/edit your shopping list before heading to the shop! screenshot5

  2. Linting the app

    npm run lint
  3. Building the app

    npm run build

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Contact

Guilherme Brunner - guilherme.brunner@gmail.com

Project Link: https://github.com/sgtbrunner/yummy-recipes

Acknowledgements

About

The ultimate recipe app is finally here! Yummy Recipes can help you out with either your favourite recipes or your loved shopping list. Built with HTML, CSS, Typescript and Angular 9.

Topics

Resources

Stars

Watchers

Forks