Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/prakhar-002/cook.io-the-recipe-app

Cook.io 🥡 is a mobile-centric 📱 fully responsive recipe app 🍛 that leverages 🌯 the Edamam API to provide users 🧑🏻‍💻 with a vast array of recipes🍜. Built using only HTML🍧, CSS🍨, and JavaScript🧋, it offers a seamless 🍱 and intuitive interface 🍲 to explore culinary delights🥟on the go.
https://github.com/prakhar-002/cook.io-the-recipe-app

api api-server apis css database food hopscotch html html-css-javascript javascript postman recipe-app recipes recipes-website responsive-web-design

Last synced: about 2 months ago
JSON representation

Cook.io 🥡 is a mobile-centric 📱 fully responsive recipe app 🍛 that leverages 🌯 the Edamam API to provide users 🧑🏻‍💻 with a vast array of recipes🍜. Built using only HTML🍧, CSS🍨, and JavaScript🧋, it offers a seamless 🍱 and intuitive interface 🍲 to explore culinary delights🥟on the go.

Awesome Lists containing this project

README

        

# Cook.io – Your Recipe Companion 🥤🥗🍟

Welcome to **Cook.io**, your go-to recipe app for discovering and exploring a wide variety of delicious dishes! This app utilizes the `Edamam API` to fetch a vast collection of recipes and is designed with a mobile-first approach while being fully responsive for big screens.


➥ Real-Time Recipe 🍔


# Screenshots 🏝️🍹

![image](https://github.com/user-attachments/assets/da1c434d-a2c8-486b-a775-1a85a344bd2d)


# 💻 Tech Stack 🍧🥞🧋

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)


# Features ✨

- 🔍 `Search Recipes` ➤ Instantly search for recipes by `ingredients`, `dish names`, or `dietary` preferences.
- 📖 `Detailed Recipe Information` ➤ Get step-by-step `instructions`, `ingredient lists`, and `nutritional data` for each recipe.
- 🥗 `Health-Conscious` ➤ Filter recipes based on dietary restrictions like `vegan`, `gluten-free`, or `low-carb`.
- 📱 `Mobile-Centric Design` ➤ Optimized for `mobile devices`, offering a seamless browsing experience on the go.
- 🖥️ `Big Screen Support` ➤ Fully responsive for large screens, ensuring a smooth user experience across all devices.


## Deployment 🚀

1. **Clone the repository**, *run this command on your git bash*

`For window 🍥`
```bash
git clone https://github.com/Prakhar-002/Cook.io-The-Recipe-App.git
```

`For Linux and macOS 🍙`
```bash
sudo git clone https://github.com/Prakhar-002/Cook.io-The-Recipe-App.git
```

2. To use you will need an `API key`.

- Sign up for an `API key` and ID at `Edamam API`

- Go to `api.js` and set `APP_ID = "your api"`


## 🚀 About Me

Meet `Prakhar Katiyar` 🙋🏻‍♂️ , An avid learner with a passion for mastering the `MERN (MongoDB, Express.js, React.js, Node.js)` stack 🎯 and diving deep into `Data Structures and Algorithms (DSA)` 🧑🏻‍💻


## Picture Library 📷📖

![image](https://github.com/user-attachments/assets/ef83a11d-9313-4486-9c4e-1fc0fa3aa09f)
![image](https://github.com/user-attachments/assets/0256fd88-9748-4593-bead-4d58fb1feb2b)
![image](https://github.com/user-attachments/assets/37e077b9-13b9-480b-bf6b-00d843bcd444)
![image](https://github.com/user-attachments/assets/b5800213-53b7-4c6f-9d43-b8aa6b8058d6)
![image](https://github.com/user-attachments/assets/db914ce1-e151-4d96-a55a-c4d87d0d66fd)
![image](https://github.com/user-attachments/assets/2f48cfe8-1b9e-4320-b3b7-9dd8de18a7b6)