VIEW LIVE: https://nosh.brandicameron.com/
My first Next.js project — a full featured "Netflix style" recipe app.
- Change the servings and the ingredient amounts automatically recalculate for you.
- Add recipes to your menu for quick switching right from the recipe page.
- When adding recipes, type fractional amounts naturally (e.g. 1/2 tsp vanilla) and the app takes care of the decimal conversion under the hood for servings recalculations.
- Pressing enter after adding ingredient/step automatically adds a new input for the next ingredient/step
- Drag & drop profile pic change, updates on any recipes you've previously added.
- Designed in Figma
- Firebase 9 for Auth, Database, and Image Storage
- First time using Tailwind CSS
- First experience with Framer Motion
- React Icons
- React Dropzone
- Context
- getStaticPaths & getStaticProps
- Converting the recipe title to a proper slug.
- Worked a lot with session storage on the project. (for the splash page and to keep state when user changes the number of servings)
- Adding scroll buttons for mouse users for horizontally scrolling category sections on home page. (appear only when needed)
- Maintaining scroll position on horizontal scroll sections so when user leaves page then returns, the section is still where they left off.
- Ability to allow user to add a new form input on demand (for adding another ingredient or instruction in the add recipe form)
- First time to implement a proper search bar.
- Add more animations & page transitions.
- Add favorites section?
- Add to shopping list feature?
- Integrated timers?
- Meal planning calendar?
Brandi Cameron