This is an app that I built in response to a final project prompt that was given by a JavaScript course called The Modern JavaScript Bootcamp.
The app can be accessed via this link: Recipe App Netlify link.
The tech stack of the app includes following technologies:
- HTML
- CSS
- TypeScript
- Browser APIs (Local Storage)
- Vite (for TS compilation & bundling)
Initially, I implemented this project using JavaScript as the programming language, Webpack & Babel for bundling & transpilation. After I discovered the build tool Vite and learned TypeScript, I ported this project to use those technologies instead.
The project prompt included the following requirements:
- There should be a home page where users can see all recipes.
- In the home page:
- Users should be able to filter recipes by text.
- Users should be able to add a new recipe.
- Users should be able to navigate to a recipe's details by clicking on it.
- There should be a recipe details page where users can see & edit details of a recipe.
- Changes should be saved to Local Storage instantly, without requiring a save button.
- Users should be able to add/remove ingredients to/from a recipe.
- Users should be able to delete a recipe.
In addition to these project requirements, I added a feature to filter recipes that have missing ingredients.