Welcome to Brains On Brioche (BoB), our final engineering project of the Makers Academy bootcamp. BoB is a web app that keeps track of the contents of a user's pantry and provides them with a range of exciting recipes.
Food waste is a growing problem with a significant carbon footprint. Every kilogram of food that goes in the bin represents over 2.5kg of CO2 emissions in terms of the resources that went into producing it. Furthermore, once that food reaches landfill, it breaks down to produce methane, a greenhouse gas 25 times more potent than CO2. Apart from its impact on the planet, food waste also represents a financial burden. Against the backdrop of growing inflation, energy crises, and a global food crisis, technology represents an important method of ameliorating this situation on a personal level. By allowing a user to keep track of the food in their kitchen, BoB injects variety into mealtime. If frugality is key, a user can set the search to prioritise recipes that require the fewest additional ingredients; if the aim is to use up food, the user can have the search bring back recipes that use up the most ingredients (but which may also result in buying more). In addition to the basic info such as ingredients and instructions, BoB also takes into account special dietary requirements, allowing a user to check whether a meal is gluten-free, low FODMAP etc.
The app uses an external API from Spoonacular to access thousands of recipes from many different cuisines, so the user can find recipes even with ingredients that at first glance might seem completely incompatible. Whether you're the kind of person who struggles to boil an egg, or you're waiting for your michelin star, BoB has something for you. Upon signing up, a user is able to add items to their 'fridge' and save them there (or, in reality, in our cloud-hosted database). They can add and remove items as is required to build an accurate picture of what is at their disposal.
We had a great time building this app, and we hope you will find it equally useful and fun to use. We are more than open to hear your opinions and any constructive crisicism that would improve our program even further.
Due to the high running costs of the Spoonacular API, we have taken a team decision to take down the website. The full live demo of Brains on Brioche can be found on YouTube.
- Axios - promise based HTTP client for the browser and node.js.
- CSS - styling of the webpages.
- Cypress - for end-to-end testing.
- ESLint - for linting of the code.
- Express - web framework for Node.js.
- Jest - for testing of the code.
- MongoDB - for our database needs.
- Mongoose - to model objects in MongoDB.
- Nodemon - to reload the server automatically.
- React - to build user interfaces.
- Redux - to help with consistency across client, server, and native environments and make testing easier.
Before doing anything, please sign up to the Rapid api for spoonacular and subscribe to the test api to be able to make your own authorisation token (this requires submitting your card details - please note that there is an initial small charge, and that there are limits to how many API calls you can make in a day before being charged)
- Fork this repository (optional)
- Clone your fork (or this repo) to your local machine
- Navigate to the project directory in command line/terminal and run
npm install - Navigate to the server folder in a separate terminal using
cd serverand runnpm install - In the same folder (server) create a
auth.jsfile and put in it your authKey/API-Key obtained from Rapid Api's website in the following format:
const authKey = '<YOUR-AUTHKEY-IN-COMMAS>'
export default authKey;
- In another terminal, navigate to the client folder using
cd clientand runnpm install - With two terminals open (one in the server folder and the other in the client folder), run
npm startin both, first in the server then in the client - This starts the server connection (app to database, app to the API) and automatically opens the website to
localhost:3000 - Create an account (if you want to store your fridge contents for later use) and start typing in the ingredients you want recipes for, one at a time please
- Click on the recipe you find most intriguing and maybe even adjust the search to show more adventurous recipes!
- To install Cypress enter the
npm install cypress --save-devcommand. - To open Cypress enter
npx cypress open.
- If you run into any problems when using
npm installto install dependencies, the following commands can be used to overcome the setbacks in case the node modules do not install properly:
npm config set legacy-peer-deps true
npm install --save --legacy-peer-deps
We used a Trello board to keep track of the features we want to implement. We organised tickets amongst the team and moved the tickets accordingly to demonstrate at what stage that feature's at (To do/In progress/In review etc.).
- Standups every morning at 10:00
- Retro at 5:30 every evening
- Pair programming throughout the whole project
- Use of mobbing to ensure every member understands the code and eliminate blockers
- Regular check-ins with team members to make sure nobody was left behind
- Trello board for distributing work and staying on track
As a user,
So that I can create a meal from the items in my fridge,
I would like to be able to search for recipes by typing in my ingredients to a search bar.
As a user,
So that I can make a complete meal,
I want to see recipes which only contain the ingredients I have entered.
As a user,
So that I can cook a recipe that I've searched for,
I would like to see the steps of the recipe.
As a user,
So that I can have all the ingredients I need for the recipe,
I would like to see a list of the ingredients I am missing.
As a user,
So that I don't have to enter ingredients everytime,
I would like to have a fridge that saves all my available ingredients.
As a user,
So that I can save all of my progress,
I want to be able to create an account and store my ingredients.
As a user,
So that no one can access my ingredients,
I'd like to be able to sign out.
As a user,
So that I know what the company is about,
I'd like to access more information about the company in an about us section.
As a user,
So that I can contact the company with feedback,
I'd like to see a contact us page with the company's details.
Search bar on the home page 🍽
- User can see a search bar 🔎
- User can type an ingredient one by one 🧀
- User gets recipes given back with their selected ingredients 🍝
- Sign up with invalid input
- Ingredients don't get saved if the user is not signed up/signed in
- Clicking on a certain recipe, it shows only the recipe's information (ingredients, measurements and instructions)
- When a user arrives, they can't see the log out button
- When the user signs in, they can only see the log out button, not create account or sign in options
- User can filter recipes to show only the ones from a specific diet (lactose free, vegan, gluten free, low FODMAP etc.)
- User can pick a random recipe that has all their ingredients and they have to make it
- Instigate a forum section so users can share ideas, comment on recipes and build a Brains On Brioche community!
- User can only sign up once with a specific email address
