Kitchen-Canvas is a dynamic and interactive web application built using React.js, designed to simplify and enhance the way users manage their recipes, ingredients, and kitchen activities. The app features a responsive user interface and leverages CSV files for data retrieval, ensuring a seamless and efficient experience for the user.
- A modern and responsive UI built with HTML, CSS, and React.js.
- Intuitive design to navigate, search, and filter recipes effortlessly.
- Recipes and ingredient data are dynamically retrieved from CSV files.
- Ensures flexibility in adding or updating data without complex database management.
- Runs on Visual Studio Code (VS Code), providing a robust development environment.
- Cross-platform compatibility ensures the app performs seamlessly on all devices.
- Users can input ingredients, dietary restrictions, and cuisine preferences.
- Recipes are dynamically fetched from a CSV dataset using PapaParse, ensuring flexibility and easy updates.
- Engaging animations using Lottie for loading, suggesting recipes, and handling "no data" scenarios enhance the user experience.
- Recipes are filtered based on ingredients, dietary preferences (e.g., vegetarian, vegan), and cuisine types (e.g., Indian, Italian).
- Flexible ingredient matching ensures robust search results.
- Fully responsive interface optimized for both desktop and mobile devices, ensuring accessibility for all users.
- Hover effects, fade-in/out animations, and visually appealing components provide a professional and engaging UI.
- Footer visibility adapts dynamically to user scrolling for an uncluttered experience.
- A section showcasing popular dishes with vibrant images and links to detailed recipes or videos.
- Real-time error messages guide users, ensuring clarity and usability when inputs are invalid or data is unavailable.
- Recipes are retrieved from a CSV file, simplifying updates and eliminating the need for a complex database.
- Frontend: React.js, HTML5, CSS3
- Data Source: CSV file integration for dynamic data handling
- Development Environment: Visual Studio Code (VS Code)
Follow these steps to run the project on your local system:
Ensure you have the following installed:
- Node.js (version 14 or higher)
- npm (comes with Node.js) or yarn
- Visual Studio Code (VS Code)
- Clone the Repository:
git clone https://github.com/manideepak12/Kitchen-Canvas.git cd Kitchen-Canvas
2.Install Dependencies:
npm install3.Add CSV Data: --Place your CSV file containing recipes and ingredient data in the specified folder. --Ensure the file format and structure align with the app’s requirements.
4.Start the Development Server:
npm start5.View the Application: Open http://localhost:3000 in your browser.
📚 Future Enhancements -Advanced Search and Filters: Add advanced search capabilities for recipes and ingredients. -Real-time Data Sync: Integrate with cloud storage for live updates. -AI-Powered Recipe Suggestions: Leverage machine learning to recommend recipes based on user preferences.
👨💻 About Myself Hi! I’m Manideepak Reddy Bodigam, a passionate Tech Enthusiastic and a 3rd-year B.Tech student specializing in Artificial Intelligence and Machine Learning at MRITS, Hyderabad, India. I enjoy building web applications that solve real-world problems with clean design and efficient performance.
- Name: Manideepak Reddy Bodigam
- LinkedIn: Manideepak Reddy Bodigam
- Location: Hyderabad, Telangana, India
- Languages: Telugu, Tamil, English
-
Focused on CSV Integration: Added specific details about how the app uses CSV files for dynamic data handling.
-
Emphasized Technologies: Highlighted React.js, HTML, CSS, and VS Code usage.
-
Developer Profile: Presented your details in a professional and engaging format.
-
Future Enhancements: Suggested improvements to add value for future development.
🌟 “KITCHEN-CANVAS: A PLAYGROUND FOR YOUR IMAGINATION!” 🌟