Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/skyv26/recipe-page-frontend-only

Recipe Page App from a Frontend Mentor challenge, showcasing recipe details like ingredients, instructions, and nutrition. Using React and Tailwind CSS, I created reusable components and dynamic rendering to enhance functionality and user experience.
https://github.com/skyv26/recipe-page-frontend-only

antd antdesign css3 dropdownlist front-end-development frontend react react-hooks reactjs recipe-app recipes responsive-design swipeable tailwindcss

Last synced: 8 days ago
JSON representation

Recipe Page App from a Frontend Mentor challenge, showcasing recipe details like ingredients, instructions, and nutrition. Using React and Tailwind CSS, I created reusable components and dynamic rendering to enhance functionality and user experience.

Awesome Lists containing this project

README 

        



# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run Linters](#run-tests)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)



# 🍲 Recipe Page 



> The app displays a detailed recipe, including preparation time, ingredients, step-by-step instructions, and nutritional information. It features a responsive design, ensuring usability across devices. I implemented reusable components, dynamic rendering, and styled the interface using Tailwind CSS for a clean and modern look. This project allowed me to sharpen my skills in React, state management, and handling structured data, enhancing both functionality and user experience.



## 🛠 Built With 



### Tech Stack 



> Recipe Page App is frontend project



Front-end

  



### Key Features 



> The app allows users to swipe left or right to change the recipe.



(back to top)



## 🚀 Live Demo 



> Link to your deployed project.



- [Recipe Page Live Link](https://skyv26.github.io/Recipe-Page-Frontend-Only/)



(back to top)



## 💻 Getting Started 



> In order to start with this project do as follows :



To get a local copy up and running, follow these steps.



### Prerequisites



In order to run this project you need:



`yarn install`



### Setup



Clone this repository to your desired folder:



`git clone https://github.com/skyv26/Recipe-Page-Frontend-Only.git`



then



`cd Recipe-Page-Frontend-Only`



### Install



Install this project with:



`yarn install Or npm i`



### Usage



`yarn dev or npm run dev`



(back to top)



## 👥 Authors 



> Mention all of the collaborators of this project.



👨‍💻 **Aakash Verma**



- GitHub: [@skyv26](https://github.com/skyv26)

- Twitter: [@vrma_aakash](https://twitter.com/vrma_aakash)

- LinkedIn: [skyv2022](https://linkedin.com/in/skyv2022)



(back to top)



## 🔭 Future Features 



> N/A



(back to top)



## 🤝 Contributing 



Contributions, issues, and feature requests are welcome!



Feel free to check the [issues page](../../issues/).



(back to top)



## ⭐️ Show your support 



> Write a message to encourage readers to support your project



If you like this project then please give a ⭐️ and also share your feedback using github_issues.



(back to top)



## 🙏 Acknowledgments 



- ❤️ [Ant Design](https://ant.design/)

- ❤️ [TailwindCSS](https://tailwindcss.com/docs)



(back to top)



## 📝 License 



This project is [MIT](./LICENSE) licensed.



(back to top)