Welcome to Sliced, an app to parse and manipulate recipes.
This repo contains the Sliced web app. The TypeScript algorithm used for the parsing and scaling functionality data resides in its own repo and can be installed independedntly from the npm registry with npm i recipe-slicer.
For example, Sally wants to make cookies. The recipe calls for 1/2 cup butter, but she only has 1/3 cup. Sally can copy and paste her recipe in Sliced, and the app will convert the text into a list of ingredients that can be scaled. Before scaling, Sally knows she doesn't want to scale down the amount of chocolate chips, so she presses the lock icon on the right to
unlockand preserve the current amount. Then she clicks on "1/2" on the butter ingredient and enters "1/3". This will scale the entire recipe to the new:original ratio. After scaling, she wants to increase the amount of vanilla extract, so she unlocks the ingredient and changes the amount without effecting the ratio of rest of the recipe.
- React
- Next.js
- CSS3 Modules
The Sliced codebase resides in the /client folder even though there is no backend because the original version had a Node/Express/Postgres api that allowed user creation and recipe persistence. This was dropped to give more attention to the Slicer algorithm and user interactions.
View the original client and server, created in 2020 for Thinkful's Software Engineering Immersion program.
Contains components specifically made for the Sliced UI. All components are imported into Recipe.js, which is displayed in pages/index.js.
Contains all reusable UI elements that are not specifically tied to the Sliced UI
A button component that turns into an input component onClick
Contains the functionality of the Slicer, along with other utilities
The reducer used to interact with the Sliced UI and the Slicer algorithm
Contains the base styles, imported into /pages/_app.js
Contains CSS modules, named after the highest-level component that uses them