Welcome to
"TasteBook"

Discover and save mouthwatering recipes with ease! Taste Hub lets you explore, search, and bookmark food and drink recipes effortlessly. From quick bites to gourmet meals, find inspiration and keep your favorites all in one place.

  • axios
  • core-js
  • gasp
  • lenis
  • mvc
  • swiper
  • tailwindcss
  • vanilla-javascript
  • vite
  • yup
Created at:
Last update:

TasteBook

Welcome to TasteBook, your ultimate culinary companion! This web application allows users to explore, search, and bookmark a vast collection of food and drink recipes. Whether you're a seasoned chef or a curious food enthusiast, TasteBook has something delicious for everyone!

Live Demo

Check out the live version of TasteBook here.

Features

  • Search Recipes: Easily find your favorite dishes with our intuitive search functionality.
  • Bookmark Your Favorites: Save recipes for later and create your personalized recipe collection.
  • Explore Articles: Discover fascinating facts and histories about various foods and drinks.
  • Responsive Design: Enjoy a seamless experience on all devices, from desktops to smartphones.

Tech Stack

TasteBook is built using modern web technologies:

  • Vanilla JavaScript: For all the interactive features.
  • Vite: A fast build tool that enhances development experience.
  • Tailwind CSS: For beautiful, responsive designs using utility classes.
  • HTML5 & CSS3: The backbone of our layout and styling.
  • MVC Architecture: To keep our code organized and maintainable.
  • Facade Pattern: Simplifying interactions between components.
  • Publisher-Subscriber Pattern: For efficient event handling and communication.

Dependencies

  • Development Dependencies:

    • autoprefixer: "^10.4.20" - Adds vendor prefixes to CSS rules.
    • postcss: "^8.4.41" - Tool for transforming CSS with JavaScript plugins.
    • prettier-plugin-tailwindcss: "^0.6.6" - Prettier plugin for sorting Tailwind CSS classes.
    • tailwindcss: "^3.4.9" - Utility-first CSS framework for building designs.
    • vite: "^5.4.0" - Next-generation front-end tool for faster development.

  • Dependencies:

    • axios: "^1.7.4" - Promise-based HTTP client for the browser and Node.js.
    • core-js: "^3.38.1" - Modular standard library for JavaScript.
    • gsap: "^3.12.5" - High-performance animation library for the web.
    • lenis: "^1.1.9" - Smooth scrolling library.
    • regenerator-runtime: "^0.14.1" - Runtime for using generator functions.
    • swiper: "^11.1.10" - Modern mobile touch slider.
    • yup: "^1.4.0" - JavaScript schema builder for value parsing and validation.

API References

TasteBook utilizes the following APIs to fetch delicious recipes and drink information:

  1. Forkify API - A robust API for searching and retrieving food recipes.
  2. TheCocktailDB - A comprehensive API for accessing cocktail recipes and drink details.

Installation

To run the project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/callmedeci/TasteBook.git
cd tastebook
  1. Install the dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:3000 to see TasteBook in action!

Contributing

We welcome contributions to make TasteBook even better! Here�s how you can help:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Commit your changes and push to your branch.
  4. Open a pull request to discuss your changes.

License

This project is licensed under the GNU General Public License v3.0.

Acknowledgements

  • Tailwind CSS for the amazing styling framework.
  • Vite for super-fast development.
  • All contributors and food enthusiasts for making this project possible!