/kissthecook

Primary LanguageJavaScript

Kiss The Cook

A place for all the recipes you love to cook.

About the project

Kiss The Cook is a web application where you can create your own e-cookbook; a place to store your favourite, personalised recipes, and access them anywhere online.
This project was inspired by my own desire for a purpose-built application that could store and organise the many different recipes that I had collected over the years. A key requirement of the application was the ability to easily add and edit recipes (especially in the midst of kitchen chaos), as they are tried and tested.
This first build focuses on the initial key functions to add, edit, browse, view, and delete recipes. One of the main challenges of this build was achieving the multi-part functionality for the ingredients input, with self-generating components on multiple levels.
Further builds will add functionality to create highly editable collections of recipes (cookbooks), as well as several search capabilities, and ultimately memebers-only fucntionality for a truly personalised and secure application.

Getting started

Run the following scripts in the directory to start the app and try it out:

npm install

Installs all project dependencies.

npm install -g json-server

Installs JSON Server globally on your machine.

npm run database

Launches the JSON server, with a mock database provided.
Open http://localhost:4000 to view it in your browser.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Credits

This project was bootstrapped with Create React App.
A great example of the full functionality I hope to achieve on later builds can be explored at https://myfoodbook.com.au/, which is a big inspiration for future layout and performance objectives.

Special thanks to twitchel for building the data schema (and being lead cheerleader, interum psycologist, project manager, and lead UX/UI designer) for this project.