Making every meal possible, enjoyable, and accessible
because everyone deserves a plate that's made just for them.
- Contributors
- Problem Statement
- Overview
- Features
- Tech Stack
- How It Works
- Technical Challenges and Achievements
- Future Improvements
- Getting Started
- Aaqib Patel
- Ryan Ariles
- Stephanie Xue
- Victor Yu
Dietary restrictions are an issue that many people struggle with on a daily basis. It's a frustrating and excluding experience, and Cuisinable aims to solve this issue.
Cuisinable is your personal culinary assistant, empowering individuals with food intolerances to enjoy diverse and delicious cuisines from around the world, safely. With approximately 7% of Canadians self-reporting food allergies, and many more indicating food intolerances, finding recipes that meet specific dietary needs without sacrificing flavor can be a challenge. Cuisinable solves this problem by offering a welcoming, accessible platform where users can discover tailored recipes based on their dietary restrictions. Simply input your food intolerances and cuisine preferences, and Cuisinable generates a variety of recipes tailored to your specific needs.
With a commitment to accessibility and thoughtful design, Cuisinable ensures a seamless experience for users of all abilities. Our friendly mascot, Chef Bearable, greets users on the landing page, setting a warm and approachable tone and guiding them through the recipe generation process.
Cuisinable is there every step of the way to ensure your recipe can be enjoyed by everyone.
This project is a full-stack web application that allows users to generate recipes tailored to their food intolerances and cuisine preferences, guiding them from an initial selection screen to a full library of matching, safe-to-eat dishes. It is built with React, JavaScript, HTML, CSS, and Bootstrap on the frontend, with Vite used as the build tool. The backend is built with Node.js and Express.js and communicates with the Spoonacular API to retrieve recipe data based on the user’s selected cuisine and intolerances, including complete ingredient lists and step-by-step instructions for each result.
The landing page welcomes users with Chef Bearable, the app's mascot, and a "Get Started" button that begins the recipe generation process.
Users begin by selecting any number of food intolerances that apply to them, choosing from a comprehensive set of common allergens and sensitivities. They then choose a single cuisine from a wide range of options spanning multiple continents and culinary traditions. Every recipe generated afterward is filtered against these selections, so users only ever see dishes that are genuinely safe and relevant to them.
|
Food intolerances:
|
Cuisines:
|
Based on the selected intolerances and cuisine, Cuisinable displays a set of recipe cards, each showing a dish's image and title. A "Change Cuisine" button lets users restart the process at any time to search with a new set of preferences.
Clicking a recipe card opens a detailed view of that dish, including its image, a summary description, a full list of ingredients, and step by step preparation instructions. A close icon returns users to the recipe results.
| Layer | Technologies |
|---|---|
| Frontend | React, JavaScript, HTML, CSS, Bootstrap |
| Backend | Express.js, Node.js |
| APIs | Spoonacular API (supplies recipe data filtered by cuisine and intolerances) |
| Build Tool | Vite |
The frontend is built from three main components, a landing page, a selector for choosing intolerances and cuisine, and a meals view for displaying and exploring the generated recipes, all rendered from a single root component that tracks which view is currently active. Selecting intolerances and a cuisine updates state in the root component, and clicking through to see recipes sends a request to the backend with those selections included as query parameters. On the backend, an Express.js server receives that request, builds a query string from the selected cuisine and intolerances, and calls the Spoonacular API to retrieve twelve matching recipes, each with full ingredient and instruction data included. The response is sent back to the frontend and rendered as a grid of recipe cards. Clicking a card opens a full recipe view, stripping any HTML tags from the recipe summary and de-duplicating ingredients pulled from the recipe's instructions before displaying them alongside the full set of preparation steps.
- Connecting the frontend to the backend and establishing seamless communication between the two for smooth functionality
- Learning to filter and retrieve specific data from the Spoonacular API to ensure only allergy and intolerance safe recipes are displayed
- Determining appropriate server ports and navigating Git branches for effective team collaboration
- Prototyping and designing a user friendly interface for an intuitive user experience
Several enhancements are planned to extend the functionality of the application:
- User profiles that allow people to save their dietary preferences and favorite recipes
- An expanded recipe database to support a larger variety of cuisines and dishes
- A search function that enables keyword searches for specific dishes or ingredients
- Animations for a more dynamic and engaging interface
- Options for users to invite friends and collaborate on recipe lists for events like potlucks
Follow the steps below to set up and run the application on your own machine.
Prerequisites
Make sure Node.js and npm are installed before you begin. You can check both by running the commands below, which should each print a version number.
node --version
npm --version1. Clone the repository
This downloads a copy of the project to your computer and moves you into the project folder.
git clone https://github.com/steph-xue/cuisinable.git
cd cuisinable2. Install the dependencies
This installs React, Express, and everything else the project needs to run.
npm install3. Start the development server
This runs both the frontend and backend together on a single local server.
npm run devOnce the server is running, open http://localhost:8000 in your browser to start using the application.