Skip to content

Latest commit

 

History

History
128 lines (86 loc) · 4.74 KB

README.md

File metadata and controls

128 lines (86 loc) · 4.74 KB

Kitchen-Canvas

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.

🛠️ Project Highlights

🔹 Dynamic User Interface

  • A modern and responsive UI built with HTML, CSS, and React.js.
  • Intuitive design to navigate, search, and filter recipes effortlessly.

🔹 Data Integration with CSV Files

  • Recipes and ingredient data are dynamically retrieved from CSV files.
  • Ensures flexibility in adding or updating data without complex database management.

🔹 Easy Access and Usability

  • Runs on Visual Studio Code (VS Code), providing a robust development environment.
  • Cross-platform compatibility ensures the app performs seamlessly on all devices.

🌟 Features

1.1 Dynamic Recipe Suggestions

  • Users can input ingredients, dietary restrictions, and cuisine preferences.
  • Recipes are dynamically fetched from a CSV dataset using PapaParse, ensuring flexibility and easy updates.

1.2 Interactive Loading Animations

  • Engaging animations using Lottie for loading, suggesting recipes, and handling "no data" scenarios enhance the user experience.

1.3 Advanced Filtering and Matching

  • 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.

1.4 Responsive Design with React.js

  • Fully responsive interface optimized for both desktop and mobile devices, ensuring accessibility for all users.

1.5 Custom Styling and Effects

  • Hover effects, fade-in/out animations, and visually appealing components provide a professional and engaging UI.

1.6 Scroll-Optimized Footer

  • Footer visibility adapts dynamically to user scrolling for an uncluttered experience.

1.7 Integration of Famous Dishes

  • A section showcasing popular dishes with vibrant images and links to detailed recipes or videos.

1.8 Error Handling

  • Real-time error messages guide users, ensuring clarity and usability when inputs are invalid or data is unavailable.

1.9 Ease of Data Management

  • Recipes are retrieved from a CSV file, simplifying updates and eliminating the need for a complex database.

🖥️ Technologies Used

  • Frontend: React.js, HTML5, CSS3
  • Data Source: CSV file integration for dynamic data handling
  • Development Environment: Visual Studio Code (VS Code)

🚀 Getting Started

Follow these steps to run the project on your local system:

Prerequisites

Ensure you have the following installed:

  • Node.js (version 14 or higher)
  • npm (comes with Node.js) or yarn
  • Visual Studio Code (VS Code)

Installation and Setup

  1. Clone the Repository: 
    git clone https://github.com/manideepak12/Kitchen-Canvas.git
cd Kitchen-Canvas

2.Install Dependencies:

npm install

3.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 start

5.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.

📇 Personal Details

  • Name: Manideepak Reddy Bodigam
  • LinkedIn: Manideepak Reddy Bodigam
  • Location: Hyderabad, Telangana, India
  • Languages: Telugu, Tamil, English

Highlights of This Version:

  1. Focused on CSV Integration: Added specific details about how the app uses CSV files for dynamic data handling.

  2. Emphasized Technologies: Highlighted React.js, HTML, CSS, and VS Code usage.

  3. Developer Profile: Presented your details in a professional and engaging format.

  4. Future Enhancements: Suggested improvements to add value for future development.

    🌟 “KITCHEN-CANVAS: A PLAYGROUND FOR YOUR IMAGINATION!” 🌟