Live environment: mijn-kookboek.nl
Your personal cookbook! Create an account and start adding your recipes or explore new recipes. Automatically create shopping lists with the required ingredients and make grocery shopping easier than ever.
Check out the demo account:
- Username: demo
- Password: demo
Note: This project is still work in progress and not all features work as intended yet.
This project contains the ehadless front-end for my recipe shopping list web-app. Front-end, back-end and design is done by me.
- Back-end project: https://github.com/Eelkedejong/recipe-data
App.jsx is the entry point for the entire app where global systems are initialized. Authentication.jsx is the authentication layer that blocks the app untill the user signed in. When the user is signed in, the layout.jsx is used to load the different sections of the application.
pages contains all component that are pages defined as routes. These are the top-level component for each page.
Components contains both re-usable components and components that are used as building blocks for indiviual pages.
- The ui folder contains small ui components used all over the website.
- The components folder contains elements used across different pages, like the aside, header and navigation.
- The subfolder recipe and shopping list contain components that are used as building blocks for their respective
Contains all utility functions used on a global level.
Contains the (global) styling for the application. See the Theming section for more info.
Contains the Redux store.
- React is the framework the application is build in.
- Vite is used as the base development server and compiler.
- React Query in combination with fetch is used to get data from the back-end and store data on the front-end for a smooth user experience.
- React Redux is used to store user data and user interaction with filters and search inputs, as well as creating shopping lists.
- Cloudinary is isued for handling user images.
- React i18m is used for translations.
A custom utility class system, in combination with modular component styling is used for styling and layout building. A few gobal styling rules are defined in the defaults.scss and app.scss files.
- Proper error handling, both for user error messages as well as system error logging. Mostly when dealing with API calls.
- Lot's of bugfixes and overal quality improvements on the front-end UX.
- Better shopping list UX, especially for grocery shopping.
- Shopping list functionality for public recipes.
- Automated menu generation.
- AI recipe suggestions.
All recipe banner images are under the free license of Usplash. Most photo's come from https://unsplash.com/@brookelark
Development is currently still done by me. For the project to function locally, the project needs a VITE_API_KEY variable in the root .env file.
Eelke de Jong - [email protected] - eelke.me
Project Link: https://github.com/Eelkedejong/recipe-shopping-list