PLATE PALETTE

Welcome to the Plate Palette, where you can discover a world of delicious recipes right at your fingertips. This README provides an overview of the app's functionality, features, and the technologies used to bring it to life.

VIEW TABLE OF CONTENTS

1. About the Project
2. Technologies Used
3. Developers
4. Project Link
5. Project Style
6. Usage
7. Pages

I. About the Project

The Plate Palette is a dynamic and user-friendly web application that's been developed as part of our project during our journey in Chingu Tier 2: Frontend Framework & API Usage. This project showcases our collective efforts, learning, and commitment to building a feature-rich application using a variety of cutting-edge technologies.

Key Features:

Landing Page

• Header Component: A welcoming message greets users and sets the stage for their culinary adventure.
• Search Field: Users can input one or multiple ingredients to search for recipes.
• Application Guide Component: An intuitive guide explains how to make the best use of the application.

Scrollable Recipe List

• The app offers access to over 1500 recipes from a comprehensive database.
• Results are presented in a scrollable list, with 20 recipes per page, ensuring a user-friendly experience.

Main Recipe Component

• Each recipe in the search results is displayed with an enticing image, recipe name, and a link to access detailed information.

Detailed Recipe Component

• Delve into the details of a selected recipe, including its name, category, and step-by-step instructions.
• Additional information includes nutrition facts and a convenient link to an instructional video.

Mobile Responsiveness

• The app is designed to work seamlessly on mobile devices, providing users with the flexibility to access it from any location.

Search Component

• Users can input ingredients and initiate searches easily.
• Error messages are displayed when an unlisted ingredient is entered, ensuring a smooth experience.

II. Languages and Tools Used

• Next.js: The application is built using Next.js for server-side rendering and improved performance.
• React.js: React is used for building the user interface, making it dynamic and interactive.
• Tailwind CSS: The user interface is styled using Tailwind CSS, resulting in a modern and clean design.
• Preline: Preline ensures code formatting and consistency, making development more efficient.
• Swiper JS: Swiper JS is used for creating smooth and responsive swipeable components.
• JavaScript: JavaScript is the primary programming language for building the app's functionality.
• Axios: Axios is used for making HTTP requests to fetch recipe data from external sources.
• Heroicons: Heroicons provides a collection of icons for user interface elements.
• Figma: Figma is used for designing and prototyping the user interface, contributing to a visually pleasing user experience.

III. Developers

IV. Project Link

https://platepalette.vercel.app/

V. Project Style

Color Scheme

Logo

Favicon

Typography

Inter

VI. Usage

Below is an example of how you can install and setup the application on your device.

To set up and run the Recipe App locally, follow these steps:

1. Clone this repository to your local machine:

[git clone https://github.com/chingu-voyages/v46-tier2-team-12.git]

2. Change the directory to the project folder:

cd v46-tier2-team-12

3. Install the project dependencies:

npm install

4. Start the development server:

npm run dev

5. Open your web browser and visit http://localhost:3000 to access the Plate Palette.

Feel free to explore, search for your favorite recipes, and enjoy your culinary journey with the Recipe App!

If you encounter any issues or have suggestions for improvements, please don't hesitate to create a GitHub issue or reach out to us.

Happy cooking! 🍳🍽️

VII. Pages

• Homepage
• Recipe Page
• Blog Page
• About Page
• Contact Page