Tasteful Twist allows users to source recipes from a wide range of cuisines from around the world in just a few simple clicks. This has been made possible by integrating data from multiple server-side API requests that have a collective database of cuisines recipes. Users are able to navigate from the home page or navigation bar to their desired cuisine recipes which they would like to browse, such as Italian, Greek and Spanish dishes. Once selected the user will then be directed to that cuisine page where a wide range of recipes with meal macros, ingredients and cooking instructions can be found. Users are also able to save their favourite recipes to a local storage using JavaScript which can be accessed in a row and list formation on the favourites page.
For a successful completion of this project, the team was required to adhere to strict criteria to ensure the application meets the client's standards. This criteria can be found listed below:
- Create a real-world front-end application to address a real-world problem.
- Integrate data from multiple server-side API requests.
- Use Bootstrap for styling.
- Ensure interactivity, accepting and responding to user input.
- Avoid using alerts, confirms, or prompts; use modals instead.
- Ensure responsiveness and a polished UI.
- Implement client-side storage for persistent data.
- Deploy the application to GitHub Pages.
- Adhere to best practices for file structure, naming conventions, class/id naming, indentation, and comments.
As a cooking enthusiast with a desire for global culinary dishes, I want to effortlessly discover and explore recipes from various cuisines worldwide, so that I can broaden my knowledge in different cultures’ cuisines and prepare diverse and delicious meals from around the world. I want to be able to save these recipes and also share my own recipes for other users to explore and try for themselves.
- It is done when the application is developed to solve a practical real-world problem, providing value to users.
- It is done when the application successfully retrieves and integrates data from at least two server-side APIs.
- It is done when the application's styling is implemented using the Bootstrap CSS framework.
- It is done when the application actively engages with users, accepting and responding to their input.
- It is done when the application utilises modal dialogs for user interactions instead of traditional alerts, confirms, or prompts.
- It is done when the application's user interface is visually appealing, polished, and responsive across different devices and screen sizes.
- It is done when the application uses client-side storage (e.g., localStorage) to store and retrieve persistent data.
- It is done when the application is successfully deployed and accessible on GitHub Pages.
9. Adhere to best practices for file structure, naming conventions, class/id naming, indentation, and comments.
- It is done when the codebase follows best practices, including well-organised file structure, consistent naming conventions, proper class/id names, clear indentation, and meaningful comments.
- Cuisine Exploration: Users can browse recipes from various cuisines including Italian, Greek, Spanish, Asian, French, Moroccan, Mexican, and Indian.
- Recipe Details: Each recipe is accompanied by detailed instructions, ingredients lists, and nutritional information.
- User Interaction: Features include user registration, sign-in functionality, recipe saving, and email subscription for updates.
- Responsive Design: The website is fully responsive, ensuring a seamless experience across various devices and screen sizes.
- We would like to add a feature that allows users to create their own profile were they can upload their own recipes in a Discover My Recipes section which other account holders can browse through and attempt to cook themselves.
-
One of the challenges we faced during our research phase were not being able to source the specific APIs required for our original concept, which was providing recipes on different time constraints such as 15, 30 and 60 minutes. We resolved this issue by pivoting to sourcing recipes based on different cuisines.
-
Other challenges we faced where not having enough API calls per day to keep the site from function as it should without purchasing a subscription. We resolved this issue by peers opening multiple accounts and swapping their API keys once current had hit its daily limit.
- Get keys from local storage
- Split and join from a string
- Set items to local storage
- Pathname
- Ternary operator
- Inserting dynamic modal as HTML
- JSON stringify
- JSON parse
- Parse Int
- toFixed()
- Try and catch errors
- Return keyword
- Dark and light mode
- HTML Responsive Footer
- HTML About Us Card Section
- HTML Team Section
- HTML Bootstrap 5 Crash Course
- JavaScript Dark/Light Mode
- Front-end: HTML, CSS, Bootstrap 5, Javascript
- APIs: EmailJS, FoodWithImagesAPI, NutritionAPI
- Additional Libraries and Tools: Font Awesome for icons, Bootstrap
- Mentorship and Guidance: [Jung and TA's]
- Design and Development: [group-7]
- Josh
- Clemens
- Leanne
- Husniye
- Annie
To run this project locally, follow these steps:
- Clone the repository to your local machine.
- Open the
index.htmlfile in a web browser to view the website. - [Include any additional steps if necessary, like setting up a local server or environment variables.]