🍽️ Recipe App

This project is a React-based web application that allows users to discover and explore a wide variety of recipes. It features a dynamic user interface with search functionality, category-based browsing, and detailed recipe views. The application integrates with a recipe API to fetch and display recipe data, providing a seamless and engaging user experience.

🚀 Key Features

• Recipe Search: 🔍 Users can search for recipes by name using a dynamic search bar.
• Category Browsing: 📂 Browse recipes by category with visually appealing category cards.
• Detailed Recipe Views: 📖 View detailed information for each recipe, including ingredients, instructions, and nutritional information.
• Responsive Design: 📱 The application is fully responsive and works seamlessly on different screen sizes.
• Loading States: ⏳ Implemented shimmer UI to provide a smooth user experience during data loading.
• Dynamic Routing: 🛣️ Uses React Router for seamless navigation between different sections of the application.
• Floating Emojis: ✨ Added floating emoji animations to enhance the user interface.

📸 Working

Desktop.Wroking.mov

Mobile.Working.MP4

🛠️ Tech Stack

Category	Technology	Description
Frontend	React	JavaScript library for building user interfaces
	React Router DOM	For handling navigation and routing within the application
	Tailwind CSS	CSS framework for styling the application
	Framer Motion	For creating animations and transitions
	React Icons	For using icons in the application
Build Tool	Vite	Build tool for bundling and serving the application
API	Recipe API	External API for fetching recipe data
Other	JavaScript (ES6+)	Programming language used for the application logic
	HTML5	Markup language for structuring the web pages
	CSS3	Style sheet language for designing the web pages

📦 Getting Started

Follow these instructions to get the project up and running on your local machine.

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <repository_url>
cd <repository_directory>

2. Install the dependencies:

npm install
# or
yarn install

Running Locally

1. Start the development server:

npm run dev
# or
yarn dev

2. Open your browser and navigate to http://localhost:5173 (or the port specified by Vite).

📂 Project Structure

recipe-sharing-app/
├── src/
│   ├── Componets/
│   │   ├── Cards.jsx
│   │   ├── CategorySearch.jsx
│   │   ├── FeaturedRecipes.jsx
│   │   ├── Footer.jsx
│   │   ├── HeroSection.jsx
│   │   ├── MainSearch.jsx
│   │   ├── MainSection.jsx
│   │   ├── Navbar.jsx
│   │   ├── RecipeByCat.jsx
│   │   ├── RecipeDetails.jsx
│   │   ├── ShimmerUI.jsx
│   ├── Utils/
│   │   ├── constants.js
│   ├── Assets/
│   │   ├── chef.png
│   │   ├── logo2.png
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
├── vite.config.js
├── package.json
├── README.md

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive messages.
4. Push your changes to your fork.
5. Submit a pull request.

💖 Thanks

Thank you for checking out this project! I hope you find it useful and enjoyable.

This is written by readme.ai.