Welcome to Brains On Brioche (B.O.B), the food web application we built as our final group project of the Makers Academy bootcamp during weeks 11 and 12. We designed and developed a web app where a user can enter some ingredients at their disposal and get access to a wide range of meal recipes that they can prepare using their instructions.
As a team, we thought an app like this would be useful for many different reasons. Food waste is real and it results in a financial burden for everyone. This is where B.O.B comes to the rescue. If frequently used, it can help minimise food waste significantly as it encourages you to use the ingredients at your disposal. From salmon and marmite to pork and peanut butter, we got it covered. For those who want to cook their food themselves, whether they're on a specific diet such as low FODMAP, gluten free or anything in between, B.O.B provides the basis for anyone seeking to make the most of their fridge leftovers and create something that brings restaurant quality food to their dinner table.
We managed to implement into our web app an external API from Spoonacular that contains thousands of recipes from many different cuisines, so the user can find recipes even with ingredients that at first glance may look like they could not be combined. Even users who can actually cook, by using this web app, they can find many alternative options and prepare meals that they didn't even know existed from all around the world, thus having a nice break from their usual meals and adding much more variety to their diet.
We've also implemented another feature of our app that the user can sign up and have their own 'fridge' which contains all the ingredients they have. This way they can enter the ingredients they have in their fridge, without having to interact with the search bar everytime. Their ingredients get saved in our database and make it a lot more convenient for the user as they can log out and come back to their pre-made 'fridge'!
In conclusion, we are extremely happy with our effort in building this app and the features we managed to include. In total, we had a great time, of course with our highs and lows, while working on this and we are very pleased with our final product. We hope the users of our app will find it equally useful and fun to use. We are more than open to hear your opinion and any constructive crisicism that would improve our program even further.
- 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.
- 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 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
