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
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.
- 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.
- 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.
- Each recipe in the search results is displayed with an enticing image, recipe name, and a link to access detailed information.
- 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.
- The app is designed to work seamlessly on mobile devices, providing users with the flexibility to access it from any location.
- Users can input ingredients and initiate searches easily.
- Error messages are displayed when an unlisted ingredient is entered, ensuring a smooth experience.
- 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.
https://platepalette.vercel.app/
Color SchemeLogo
Favicon
Typography
Inter
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:
- Clone this repository to your local machine:
[git clone https://github.com/chingu-voyages/v46-tier2-team-12.git]
- Change the directory to the project folder:
cd v46-tier2-team-12
- Install the project dependencies:
npm install
- Start the development server:
npm run dev
- 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! 🍳🍽️