A delightful React application for discovering and sharing your favorite recipes! This project provides a user-friendly interface to browse, search, and view detailed information about various recipes. It leverages React, React Router DOM for navigation, and Tailwind CSS for styling.
🔴 Live Demo: CookingArt.netlify.app
- Browse Recipes: Explore a wide variety of recipes with visually appealing displays.
- Detailed Recipe Views: Access comprehensive information about each recipe, including ingredients, instructions, and nutritional information.
- Client-Side Routing: Seamless navigation between different pages using React Router DOM.
- Responsive Design: Enjoy a consistent experience across various devices, thanks to Tailwind CSS.
- Modular Structure: Well-organized codebase with reusable components for easy maintenance and scalability.
| Category | Technology | Description |
|---|---|---|
| Frontend | React | JavaScript library for building user interfaces. |
| React Router DOM | Library for handling client-side routing and navigation. | |
| Lucide React | React component library for icons. | |
| Styling | Tailwind CSS | Utility-first CSS framework for rapid UI development. |
| Build Tool | Vite | Fast and lightweight build tool and development server. |
| Linting | ESLint | Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. |
| Other | npm/Yarn | Package manager for installing and managing project dependencies. |
Follow these steps to get the project up and running on your local machine.
- Node.js (version 18 or higher)
- npm or Yarn package manager
-
Clone the repository:
git clone https://github.com/rizwanwebdev/cooking-art cd react-recipe -
Install dependencies:
npm install # or yarn install
-
Start the development server:
npm run dev # or yarn dev -
Open your browser and navigate to
http://localhost:5173(or the port Vite assigns).
react-recipe/
├── src/
│ ├── assets/
│ │ ├── pages/
│ │ │ ├── About.jsx # About Page Component
│ │ │ ├── Contact.jsx # Contact Page Component
│ │ │ ├── Home.jsx # Home Page Component
│ │ │ ├── Recipes.jsx # Recipes Page Component
│ │ │ └── RecipeDetails.jsx # Recipe Details Page Component
│ ├── App.jsx # Main Application Component
│ ├── main.jsx # Entry point for the React application
│ ├── index.css # Global CSS stylesheet
├── vite.config.js # Vite configuration file
├── package.json # Project metadata and dependencies
├── README.md # Project documentation
├── .gitignore # Specifies intentionally untracked files that Git should ignore
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them with descriptive messages.
- Push your changes to your fork.
- Submit a pull request to the main repository.
This project is licensed under the MIT License.
If you have any questions or suggestions, feel free to contact me at [email protected].
Thank you for checking out this project! I hope you find it helpful and enjoyable.