Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/heytulsiprasad/foodies

A food recipes app to show your favorite recipes according to categories, areas and recipe name. Made with React. 😋
https://github.com/heytulsiprasad/foodies

context-api dark-theme javascript material-ui mealdb-api react reactjs recipe recipe-app rest-api tailwindcss

Last synced: about 2 months ago
JSON representation

A food recipes app to show your favorite recipes according to categories, areas and recipe name. Made with React. 😋

Awesome Lists containing this project

README 

        






  

    Foodies Logo

  



  
To eat or not to eat, is the question. 🍕



# Foodies — Delicious Recipes App



No more waiting to get the right choice of recipe and spending lots of time searching Youtube on the right video to show how to make it.

It's all here now.

**Foodies** is the home of more than _thousands_ of recipes that are listed on basis of various regions and categories, which

you can take advantage of to find THE one you're looking for, almost instantaneously. Give this a ⭐ if you liked!



[![Cover Page of Foodies](https://i.imgur.com/RTfPTxW.png)](https://foodies-sandy.now.sh/)



The power of your favourite recipes, now with jaw-dropping UI and themes that you just can't stop looking at. All at the cost of nothing.



Visit [Foodies](https://foodies-sandy.now.sh/), today!



[![Recipe List of Ingredients](https://i.imgur.com/fhLL56V.png)](https://foodies-sandy.now.sh/)



## 🏭 Contribute



This is one of my side projects which I made to learn the following:



- React (Fundamentals)

- Context API (For state management)

- Tailwind CSS (An utility first CSS Framework)

- Material UI (A set of pre-made react components)

- And many little _reacty_ things...



So, if you're into any of those or want to go into in future, **this project is dedicated to you.** Give this a ⭐ if you liked!

Go ahead and rip this project apart to learn tidbits of each of the things I mentioned above. I'll make sure to comment as much as possible

to make you get started, ASAP. But still, if you have even silliest of questions or suggestions, do create an issue here or tweet me [@heytulsiprasad](https://twitter.com/heytulsiprasad), so that it can help everybody.



[![Grid showing search results](https://i.imgur.com/5UTaVlZ.png)](https://foodies-sandy.now.sh/)

[![Embeded video from Youtube](https://i.imgur.com/FzD8d70.png)](https://foodies-sandy.now.sh/)



## 🎉 Getting Started



Make sure you fork it, to make your copy of the repo.



`git clone https://github.com/heytulsiprasad/foodies.git`



Now it's damn easy.



**Install the dependencies (using `npm` or `yarn`**



- Using `npm`: `npm install`

- Using `yarn`: `yarn`



**Starting project locally**



`npm run start` or `yarn start`



**Extra information**



- You can run `start` command just to run the react project and see how it works.

- You have to run `dev` command if you want to fiddle with the **tailwind classnames** as it needs to be processed (or watched).



## :ledger: Related posts by me



- [Adding Tailwind into React project in under a minute](https://dev.to/heytulsiprasad/adding-tailwind-into-react-project-in-under-a-minute-41jp)



## 🌈 Thanks a thousand



And of course, this couldn't have been possible without the great _free to use_ API called, **MealDB**. You can give that a look on [here](https://www.themealdb.com/api.php).

Their service has been amazing throughout and you can use their API to create your own projects too!



## 🔥 Now, go set the world on fire



Now that's for all. Give me a follow on Twitter, [@heytulsiprasad](https://twitter.com/heytulsiprasad) if you're into this kind of stuff.

I am constantly spreading out tips and tricks as well as written articles for the developer community. I'll be glad to share them with you 💙