add a little ✨swaad ✨into your life - swaad is a recipe finder that helps you discover a wide variety of recipes from all over the world 🌎
SWAAD is a web application that fetches recipes from an Tasty API, offering users a seamless and responsive platform to discover and explore a variety of dishes.
SWAAD is a web application that offering users a seamless and responsive platform to discover and explore a variety of dishes. The user-friendly interface provides detailed recipe information, search options. Built with React.js, Typescript. SWAAD is your go-to source for culinary inspiration.
Search by Name or Ingredients: Users can search for recipes by entering either the recipe name or specific ingredients, providing a flexible and convenient search experience.
Autocomplete Feature: SWAAD offers autocomplete suggestions as users type, streamlining the search process and ensuring accurate results.
Light and Dark Mode: Enjoy a personalized viewing experience with the option to switch between light and dark modes, enhancing readability and reducing eye strain.
Saved Recent Searches: Users can conveniently access their recent searches, saving time and enabling quick reference to previously explored recipes.
Detailed Recipe Information: Each recipe page provides comprehensive details, including ingredients, nutritional value, preparation time, and step-by-step instructions.
Nutritional Value Display: The nutritional information for each recipe is prominently displayed, allowing users to make informed choices based on their dietary preferences or requirements.
Preparation Time Indication: Recipes include estimated preparation times, giving users a quick overview of the time commitment required for each dish.
Interactive Checklist for Ingredients: Users can mark off ingredients as they gather them, facilitating an organized and efficient cooking process with an interactive checklist.
Responsive Design: The SWAAD app is designed to be responsive, ensuring a seamless and enjoyable user experience across various devices, including desktops, tablets, and mobile phones.
User-Friendly Interface: The intuitive and user-friendly interface makes navigation smooth, allowing users to focus on discovering and exploring new recipes effortlessly.
This section provides instructions on how to use SWAAD project on your local machine.
Search for Recipes:
Explore by Cuisine:
Toggle Light/Dark Mode:
Interactive Checklist for Ingredients:
Saved Previous Searches:
1- Landing page
2- Recipe Page
3- Search Results
4- Search Suggestions
5- Previous Searches
These are the instructions on how to run the SWAAD on your local machine.
Ensure you have the following prerequisites installed on your machine:
Clone the Repository:
git clone https://github.com/chingu-voyages/v46-tier2-team-14.git
Install Dependencies:
npm install
API integration:
Configure the project to use your recipe API by updating the API key in the .env
file. Follow these steps:
Visit the Tasty API website to obtain your API key.
Set API Key in .env
.env.template
contents into a .env
file in the root of your project..env
file and edit the following line:VITE_API_KEY=YOUR_API_KEY_HERE
Replace YOUR_API_KEY_HERE
with the API key you obtained.
Follow these steps to quickly start the project:
Run the Application:
npm run dev
Access the Application:
Open your web browser and go to http://localhost:3000
to access the SWAAD web app.