VUE simple Food recipe Web App with API

A lightweight and user-friendly food recipe web application built using Vue.js. This project fetches recipe data from an API, providing users with an intuitive way to browse, search, and view detailed recipes. Designed with modern aesthetics, the app leverages Tailwind CSS and shadcn for responsive and visually appealing UI components.

This was my first time using vue and create this simple project as a practice. I use the design from random free figma UI website design the source from : https://www.figma.com/design/qi8OysEXeFbC0qKnI3AqjY/food-Recipe-Website-Ui-Kit-(Community)?node-id=1-57&node-type=canvas&t=kWKsClofZIbM8cp3-0 and https://dribbble.com/shots/23799483-Flavoriz-Food-Recipes-Website-UI-Figma-Template#

Features

• Dynamic Recipe Listings: Fetch recipes dynamically from a reliable API.
• Responsive Design: Optimized for all screen sizes (desktop, tablet, and mobile).
• Pagination: Handles product listing with pagination for better performance and user experience.
• Reusable Components: Built with modular and reusable React components for maintainability.
• Modern UI/UX: Built with Tailwind CSS and shadcn for a clean, professional look.
• Recipe Details Page: View comprehensive information about selected recipes, including ingredients and preparation steps.

API Integration

This project fetches product data from the dummyjson API, ensuring a dynamic and real-time data-driven experience. All product details, including categories, pricing, and images, are retrieved from this external source.

Installation and Setup

Follow these steps to get the project up and running on your local machine:

1. Clone this repository:

   git clone https://github.com/fiqrioemry/vue_food_recipe_web_app.git
   cd vue_food_recipe_web_app
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm rum
   

Technologies Used

• ue.js: For building the user interface.
• Tailwind CSS: For styling and layout.
• Vue Router: For handling navigation between pages.
• dummyjson API: For fetching product data.
• Shadcn Vue for the UI component.

Future Enhancment

• OAuth using Firebase : Seamlessly authenticate users using Firebase's OAuth services. The application supports multiple login options such as Google

• User Dashboard : A personalized dashboard for users to view and manage their saved recipes, recent searches, and browsing history. It offers a centralized place to keep track of favorite recipes and preferences.

• Search Functionality : Easily search for recipes by name or keyword. The search functionality is optimized for speed and accuracy, allowing users to find relevant recipes effortlessly.

• Filter & Sorting : Provides options to filter recipes based on tags, meal types (e.g., breakfast, lunch, dinner), or dietary preferences (e.g., vegetarian, gluten-free). Sorting options include criteria like preparation time, popularity, and difficulty level to help users find recipes that best suit their need

Author : Ahmad Fiqri Oemry Website Link : https://flavorizefood.netlify.app/