Under the watchful eye of Mother Nature, I'm tending to this seedling of a project. While I pour my creative juices into revamping both the project and the README, I've decided to keep the soon-to-be old README content accessible. So go ahead, unfold the virtual parchment and indulge your curiosity if you feel like it!
Let me take a look...
(This is an ongoing Project, so bugs and feature changes are expected)
A markdown-based recipe application (some syntax inspired by Cooklang) that tries to tone-down recipe management to the absolute essential by being focused on text files, allowing for all the modern interactivity we're used to and other advanced features, while making use of a clean and pleasant user interface (I hope!) to manage your personal recipe database. Some highlights from this management approach are:
- Markdown is portable, platform independent and future proof;
- The text-based recognition syntax is easy to get a handle of so the base file is kept as human-readable as possible;
- Note-down a recipe anywhere! Just open any text editor, anywhere, note it using the syntax and import it to the application at a later date;
- The recipe information can be saved as a file and managed locally, avoiding databases (as of now the application still uses the
localStorage
);
The project makes use of HTML, SCSS and JavaScript using the MVC architecture. The used bundler is Vite.
Updated as development progresses
- Ingredients extraction
- Quantities extraction
- Units extraction
- Cookware extraction
- Basic Steps recognition
- Basic Rendering on Preview Mode
- Preview/Edit Mode Switching
- Save recipe to
localStorage
and render the bookmark - Render bookmark
- Restrict similar recipe titles and recognise changes made to an already existing recipe
- Re-render saved changes
- Implement a 'Neumorphic' application design [ONGOING]
- Implement a Metadata block recognition (servings, recipe type, preparation time, cooking time, nutritional information, image links, more?)
- If metadata block has multiple images associate a gallery to the recipe
- Time recognition and extraction
- Servings conversion feature
- 'Cook Along' feature
- Syntax highlighting to distinguish between plain text and
- Ingredients
- Cookware
- Input time
- Checkable ingredients list and steps
- Implement two viewing options for ingredients
- Show ingredients' quantity and units on hover
- Show ingredients' quantity and units on the step text by default. Hovering shows modal with recipes containing the same ingredient
- 'Search and show recipes by ingredient' when clicking an ingredient
- Handle database locally instead of using the
localStorage
Updated as development progresses
- To enter an ingredient use
@ingredient
for a single worded ingredient or@long ingredient_
for multiple words ingredients.
EXAMPLE: Slice an @apple and use @soft butter_ to cook.
- To enter a unit-less quantity for that ingredient use
@ingredient_(Num)
or@long ingredient_(Num)
EXAMPLE: Slice @apple_(6) and use @soft butter_(1) to cook.
- To enter a quantity with units associated to it use
@ingredient_(Num&Unit)
or@long ingredient_(Num&Unit)
EXAMPLE: Slice @apple_(500&grams) and use @soft butter_(150&grams) to cook.
- To identify any cookware use
#cookware
or#long cookware_
EXAMPLE: Slice @apple_(500&grams) and use @soft butter_(150&grams). Cook it on and #oven using an #iron skillet_
- Each
\n
(line break) is considered a step. Simply press 'ENTER' to go to a new line and add a new step.
EXAMPLE:
Slice @apple_(500&grams) and use @soft butter_(150&grams). (STEP 1)
Cook it on and #oven using an #iron skillet_ STEP 2)
Live view by clicking the badge:
You can also clone the project and open it in localhost 😄
Before cloning/forking this project, make sure you have the following tools installed:
- Fork the project
- Clone the project
- Follow the instructions in the console
- Navigate to the project directory
cd markdown-recipe-app
- Install the dependencies
npm install
- Run the project
npm run dev
MIT
This is the previous version of the README. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...