/cookbook

Web app for CRUD recipes, with a fullscreen recipe version to use while cooking or in the supermarket. Users can also create and save grocery lists according to the selected recipes.

Primary LanguageJavaScript

CookBook Web App

Create and save your or your family's recipes, and share them with the world!

CookBook is a web application where users can create/read/update/delete recipes and check/save others, with a fullscreen recipe version to use while cooking or in the supermarket. Also, users can create and save grocery lists.

Technologies and third-party services used:

  • API/Server: NodeJS, ExpressJS
  • Auth: JWT, PassportJS
  • Assets manager: Cloudinary
  • Databases: MongoDB Atlas, Mongoose
  • FrontEnd: NextJS, React
  • CSS: Bootstrap, CSS Modules, Downshift library

Mockups: Link

Screenshots:

Index and Login pages:

index-page login-page

Search recipes and Recipe View:

search-feature recipe-post

Cooking Mode (Fullscreen view) and User Menu:

cook-mode user-menu

Save Grocery Lists and User Dashboard (Recipes, Favorites and Shopping Lists with contextual search):

save-lists user-dashboard

Create Recipes. Step One and Step Two:

create-step-1 create-step-2

Live Demo: Link

Known bugs:

What to improve in the future?

  • Auth strategies and cookies implementation.
  • Implement update/maintain states for shopping lists.
  • Implement reset password flow.
  • UI and UX
  • Routing and feedback messages for the users.
  • Testing

About me:

LinkedIn | Github

October, 2021.