RecipeKeeper

RecipeKeeper is an application designed for storing and organizing your favorite recipes. Whether you're a seasoned chef or just getting started in the kitchen, RecipeKeeper provides a convenient platform to keep track of all your culinary creations, favorite recipes, tips, and tricks. With RecipeKeeper, you can easily input, store, and access your recipes anytime.

Say goodbye to the chaos of scattered recipes and hello to the seamless organization of RecipeKeeper. Happy cooking!

What You'll Find

RecipeKeeper offers a user-friendly interface designed to simplify your recipe management experience. Here's what you can expect to find:

1. Main Page Overview:

• Browse all your recipe cards at a glance.
• Utilize search and filter options to find specific recipes by name and ingredients, or to exclude certain recipe categories or allergens.
• Manage your recipes by adding new ones or deleting existing ones.

Main browse page:

Search by filtering and food categories:

2. Recipe Details:

• Double-click on a recipe card to open it and view its details.
• Each recipe includes a description, relevant categories, allergens, ingredients and instructions whose text can be formatted by the user as desired.

Recipe page, inside view:

3. Editing Capabilities:

• Edit existing recipes to make updates or improvements.
• Create new recipes from scratch with ease.

Edit view of a new recipe and of an existing one:

With RecipeKeeper, organizing and managing your recipes has never been easier!

Technical Overview

RecipeKeeper is a web application developed with Angular. Recipes are stored in JSON format at the path /server/recipeDB/recipeDB.json and are managed by a simple local Node.js server.

The server handles standard CRUD operations for recipe data and serves as the backend for the application. All server-side code and data can be found in the server/ folder located within the project directory. The server is configured to listen on port 3000. This setup enables seamless communication between the frontend Angular application and the backend server.

Images uploaded by the user are stored locally withing the server directory, at the path /server/recipeDB/images/. Upon upload, images are copied to this designated folder within the local server. This ensures that images are readily accessible to the application.

Get started!

This application offers flexibility in how you choose to use it. You can access it as a web application through any modern web browser (it has been fully tested on Safari), or you can enjoy the convenience of a desktop application with Electron.

Depending on your preference, follow the build instructions provided below to get started.

Web App

To obtain a build as a web application, follow these steps:

1. Open a terminal on project root.
2. Run the following command: npm run start
3. Your Angular application will be compiled and served, and you can access it in your web browser at http://localhost:4200.
4. A server handling requests and responses to your data will be started as well, and will run on http://localhost:3000.

---

Desktop Application (Electron)

To run the project as a desktop application using Electron, you have a few options, listed below. At each run a server handling requests and responses to your data will be started as well, and will run on http://localhost:3000.

a) Build and Run

To build and run the desktop application in one step, follow these instructions:

1. Open a terminal on project root.
2. Run the following command: npm run electron-build-run

The build produced can be found in the dist directory.

b) Build Only

1. Open a terminal on project root.
2. Run the following command to create a build: npm run electron-build-only
3. Once the build is complete, you'll find the packaged application in the dist directory.

c) Launch only

You can launch the Electron application using one of the following methods:

• Double Click: Find the RecipeKeeper.command file in the dist directory and double-click on it. (Note: this method has been tested on MacOS only)
• Terminal: Open a terminal on project root and run npm run electron-run.

---

Credits:

Full list of icons attributions.