Ever get bogged down trying to find the perfect recipe or lost in a flurry of instructions while cooking? Recipe Pilot helps you cut through the noise, offering a super intuitive way to discover millions of recipes and follow them with a distraction-free "Cook Mode," so you can focus on the joy of creating a delicious meal.
Recipe Pilot is a modern, responsive web application designed to be your ultimate kitchen companion. Built to simplify the cooking process, it features a smart search with autocomplete for effortless recipe discovery, dynamic filtering by diet and cuisine, and a unique "Cook Mode" that guides you step-by-step through instructions. Each recipe comes with detailed nutrition information, making healthy meal planning easier. Whether you're a seasoned chef or just starting your culinary journey, Recipe Pilot makes cooking accessible and enjoyable.
To get Recipe Pilot up and running on your local machine, follow these steps:
-
Clone the Repository:
git clone https://github.com/Searcher06/Recipe-Pilot.git cd Recipe-Pilot -
Install Dependencies: Navigate into the cloned directory and install the necessary Node.js packages.
npm install
-
Set up Environment Variables: This project relies on the Spoonacular API for recipe data. You'll need to obtain an API key from their website. Create a
.envfile in the root of your project and add your API key:VITE_SPOONACULAR_API_KEY=YOUR_SPOONACULAR_API_KEYReplace
YOUR_SPOONACULAR_API_KEYwith your actual key. -
Start the Development Server: Once the dependencies are installed and your API key is set, you can start the development server:
npm run dev
The application will typically be available at
http://localhost:5173(or another port if 5173 is in use).
Recipe Pilot is designed for an intuitive user experience, letting you easily find and follow recipes.
Exploring Recipes: When you land on the homepage, you'll see a dynamic banner, featured quick meals, top trending recipes, and categorized dishes (breakfast, lunch, dinner). You can click on any recipe card to view its detailed information.
Searching for Specific Dishes: Navigate to the "Recipes" page. At the top, you'll find a smart search bar with autocomplete suggestions. Start typing the name of a dish, and Recipe Pilot will suggest recipes as you type. Hit Enter or click the search icon to see your results.
Filtering Your Search: Below the search bar on the "Recipes" page, you'll see filter chips for "Diet" (e.g., Vegan, Keto) and "Cuisine" (e.g., Italian, Mexican). Click on these chips to apply filters and refine your search results instantly. You can combine filters or clear them with a single click.
Recipe Details Page: Once you select a recipe, you'll be taken to its dedicated page, featuring:
- A vibrant hero image.
- Key stats like cooking time, servings, and health score.
- A summary of the dish.
- A detailed Nutrition Panel showing calorie count and macro breakdowns (protein, carbs, fat, fiber) with animated progress bars.
- Comprehensive lists of ingredients.
- Step-by-step cooking instructions.
"Cook Mode" Feature: For a truly immersive cooking experience, click the "Start Cook Mode" button on any recipe's detail page. This activates a full-screen, distraction-free interface that presents one instruction step at a time, complete with ingredient visuals and keyboard navigation (use arrow keys to move between steps).
Theme Toggling: Recipe Pilot includes a light and dark theme. You can toggle between them using the sun/moon icon in the navigation bar.
- Smart Recipe Search: Find recipes quickly with an intelligent autocomplete search bar.
- Dynamic Filters: Refine search results by diet (Vegan, Vegetarian, Gluten-Free, Keto, Paleo) and cuisine type (Italian, Asian, Mexican, American, Indian, French).
- Interactive Recipe Cards: Visually appealing cards displaying recipe titles, images, and quick stats.
- Comprehensive Recipe Details: Access in-depth information including summaries, nutritional facts, ingredient lists, and detailed cooking instructions.
- "Cook Mode": A full-screen, distraction-free interface for following recipes step-by-step, complete with ingredient visuals and keyboard navigation.
- Nutrition Panel: An animated breakdown of calories, protein, carbohydrates, fat, and fiber for each recipe.
- Responsive Design: A seamless user experience across various devices and screen sizes.
- Theme Toggle: Switch between light and dark modes for comfortable viewing.
- Trending and Quick Meal Sections: Discover popular dishes and meals ready in under 10 minutes.
| Technology | Description |
|---|---|
| React | A JavaScript library for building user interfaces. |
| TypeScript | A strongly typed superset of JavaScript that compiles to plain JavaScript, used for enhanced development experience. |
| Vite | A fast development build tool that significantly improves front-end development experience. |
| React Router DOM | Declarative routing for React applications. |
| AOS (Animate On Scroll) | A lightweight JavaScript library to animate elements on scroll. |
| Spoonacular API | Provides access to a vast database of recipes, nutrition, and food-related data. |
| ESLint | A static code analysis tool for identifying problematic patterns found in JavaScript code. |
| CSS | Custom CSS for styling, including responsive design and dark mode implementation. |
We welcome contributions to Recipe Pilot! If you're interested in improving the project, please follow these guidelines:
- Fork the repository: Start by forking the project to your GitHub account.
- Create a new branch: Create a branch for your feature or bug fix:
git checkout -b feature/your-feature-nameorgit checkout -b bugfix/issue-description - Make your changes: Implement your changes and ensure they adhere to the project's coding style.
- Test thoroughly: Before submitting, ensure all tests pass and your changes don't introduce new issues.
- Commit your changes: Write clear and concise commit messages.
- Push to your fork: Push your branch to your forked repository.
- Open a Pull Request: Submit a pull request to the main branch of this repository, describing your changes and their purpose.
This project is open-source and available under the [License Name] License.
- LinkedIn: Your LinkedIn
- X (Twitter): @yourhandle
