KitchenVault 🍲👩‍🍳

Welcome to KitchenVault – your go-to app for discovering, saving, and sharing recipes!

This project features a powerful recipe finder with a user-friendly interface.

Designed with modern web technologies and Sass for enhanced styling. 🎨✨

Project Overview :

KitchenVault is a recipe finder app that allows users to explore, save, and share recipes with ease. The app offers a sleek interface and robust search functionality, making it a valuable tool for home cooks and food enthusiasts.

Key Technologies

• HTML: Provides the structure of the webpage.
• CSS: Advanced styling techniques applied for a polished look.
• Sass: Used for efficient CSS management with the 7-1 file architecture.
• JavaScript MVC: Implements the Model-View-Controller pattern for clean and organized code.
• GSAP: Adds smooth and high-performance animations to enhance user experience.

Known Issues

⚠️ CSS/Sass Focus:

While the application is fully functional with various JavaScript features, there are areas where the CSS/Sass implementation might still need attention:

• Styling Consistency: Some elements may not be styled consistently across all devices.
• Responsive Design: There may be additional tweaks needed to ensure the design is fully responsive.

These aspects are noted because the primary focus of this project was on implementing JavaScript functionalities and integrating third-party libraries while ensuring adherence to the MVC architecture. The Sass preprocessor was used for styling, and further refinements to the CSS/Sass implementation will be addressed in future updates.

Installation

To set up CodeNest on your local machine, follow these steps:

1. Clone the Repository :

git clone https://github.com/amzilox/Kitchen-Vault

cd Kitchen-Vault

2. Install Dependencies :

Ensure you have Node.js installed. Then, install the required npm packages:

npm install

3. Run the Development Server :

Use the following command to start the development server and watch for changes:

npm run start

This command will simultaneously:

• Watch for changes in Sass files and compile them to CSS.
• Initialize Parcel for bundling JavaScript files.
• Start a live server to serve your application with real-time updates.

4. Build the Project:

To compile and build the CSS for production, use:

npm run build

This command will:

• Compile Sass files and apply vendor prefixes.
• Minify the CSS for better performance.
• Bundle and optimize JavaScript files using Parcel, with the output placed in the ./dist directory.

Package.json Highlights

Here are some key packages used in this project :

• node-sass : Compiles Sass into CSS.
• autoprefixer : Adds vendor prefixes to CSS rules.
• parcel: A zero-configuration web application bundler that compiles and bundles JavaScript, CSS, and other assets.
• postcss-cli : CLI tool for PostCSS, used for processing CSS.
• npm-run-all : A CLI tool to run multiple npm-scripts in parallel or sequential.
• gsap: GreenSock Animation Platform for creating high-performance animations with a simple API.
• core-js: Provides polyfills for modern JavaScript features to ensure compatibility with older environments.
• fraction.js: A library for working with fractions in JavaScript.
• scrollmagic: JavaScript library for handling scroll interactions and animations.
• scrollmagic-plugin-gsap: Plugin for integrating GSAP animations with ScrollMagic for scroll-based animations.

Credits

A special thanks to Jonas Schmedtmann for his invaluable guidance and resources on using Sass and CSS architecture. 🙏🌟

Features

• 🔍 Advanced Search: Quickly search over 1,000,000 recipes.
• 📝 Dynamic Listings: View and paginate through recipe results.
• 💾 Local Storage: Bookmark and save your favorite recipes.
• 🌟 Interactive Details: Access detailed recipe information.
• 📦 API Integration: Fetch recipes from an external API.
• 🎨 GSAP Animations: Enjoy smooth, dynamic animations.
• 📲 Responsive Design: Optimized for both mobile and desktop.
• 🛠️ MVC Architecture: Clean and organized code structure.
• ✨ Sass Styling: Advanced and maintainable CSS.

Disclaimer

⚠️Learning Purposes Only

This project is created for educational purposes to showcase skills in HTML, CSS, Sass, and advanced JavaScript. It demonstrates the implementation of logical functionalities such as search queries, pagination, recipe bookmarking, local storage management, and API integration. This project is not intended for commercial use. Feel free to explore the code and contact me with any questions or for further details.