feat: hero Section Added

.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
-
+.env
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

CHANGELOG.md

@@ -2,6 +2,128 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.6](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.4...v0.0.6) (2023-10-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* **searchbox.jsx:** when the mirage server is turned off, the data return is undefined bc of too many
+requests to tasty
+
+CH-12
+* **vite.config.js:** the netlify git hooks fail
+
+### Features
+
+* **app.jsx:** add components page and components route ([22d422d](https://github.com/chingu-voyages/v46-tier2-team-19/commit/22d422dd3191ff8b307a03e4a493d9262931fe9d))
+* **button component:** create Button component ([a58491c](https://github.com/chingu-voyages/v46-tier2-team-19/commit/a58491c31d879b1a53ded5bd32fb24a296244e03))
+* **components.jsx:** create Components page ([f212844](https://github.com/chingu-voyages/v46-tier2-team-19/commit/f21284438428dc7374a8598be22ba2d1c8ac7511))
+* **featureoftheday.jsx:** create a simple react component for the recipe results page ([42b631b](https://github.com/chingu-voyages/v46-tier2-team-19/commit/42b631b5970573fd23529edef099ced7a2423741))
+* **global.css:** add color gradients CSS variables ([fa9e55a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fa9e55ad63de7e049b06a266cb058bcfbd71466f))
+* **global.css:** add display & body font CSS variables ([58e7ff3](https://github.com/chingu-voyages/v46-tier2-team-19/commit/58e7ff39022a3b4b4e75004c705a6f9c10237db1))
+* **global.css:** update typography rules ([2222fd6](https://github.com/chingu-voyages/v46-tier2-team-19/commit/2222fd6cc913300cd2d245ff3f2daa25cf568946))
+* **heading component:** create Heading component ([aad2ce9](https://github.com/chingu-voyages/v46-tier2-team-19/commit/aad2ce9239ef01ad8dc7ad1a60eb5dedb63bd92e))
+* **layout components & related:** implement responsive styling ([7bf833a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/7bf833a805c3bc7239c2e7c20362cc73d108c980))
+* **layout components:** add fonts, logos & more responsive styling ([a020a18](https://github.com/chingu-voyages/v46-tier2-team-19/commit/a020a18dbc79691c0a6017c66ef721301cc0fc87))
+* **layout:** add fonts, logos & more responsive styling ([1e82c70](https://github.com/chingu-voyages/v46-tier2-team-19/commit/1e82c705f013344a262b1d646fece8748a637550))
+* **pages/index.js:** import & export Components page ([6e07377](https://github.com/chingu-voyages/v46-tier2-team-19/commit/6e07377de6aa9ff9b73d0495952c9e067629910c))
+* **public:** add Vite logo SVG file ([5ae88a0](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ae88a092bb4792e4d402fcd2ce50f70209b8fbf))
+* **recipes-search:** created a Recipes page along with api calls and new components ([fbc37a6](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fbc37a666b8ca658b33b502e1efbd62714d4a363))
+* **searchbox.jsx:** add search functionality to recipe list ([108d9fc](https://github.com/chingu-voyages/v46-tier2-team-19/commit/108d9fc080f310232012627977262e7a5c3a499c))
+* **tailwind.config.js:** add custom color gradients to tailwind theme ([09de3de](https://github.com/chingu-voyages/v46-tier2-team-19/commit/09de3de29817b20b26729080da3f410c7d92f6f2))
+* **tailwind.config.js:** add custom scale property to tailwind theme ([184929e](https://github.com/chingu-voyages/v46-tier2-team-19/commit/184929e0710250f76f841a32bb6e3e7059b49a7d))
+* **tailwind.config.js:** add custom solid colors to Tailwind ([da4b2be](https://github.com/chingu-voyages/v46-tier2-team-19/commit/da4b2be7e212c8d18c54bdca3a39d35fade45171))
+
+
+### Bug Fixes
+
+* **package-lock.json:** reinstalled node_modules and package-lock.json ([21fd936](https://github.com/chingu-voyages/v46-tier2-team-19/commit/21fd93648bcbf381feb723a1b44b7c10e15162db))
+* **package.json:** revert package to 0.0.4 patch number ([5ae3d72](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ae3d723a0e47f8f109d8df0e058260304fa56d5))
+* **tailwind.config.js:** fix font family typo ([fb03682](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fb036821f95fd4410be19713895096c522e3ac1c))
+* **vite.config.js:** a bug has occured when netlify's building site ([57e0fd4](https://github.com/chingu-voyages/v46-tier2-team-19/commit/57e0fd4ba8fd490b3d01eebfd1b7a604b5b889bd))
+* **vite.config.js:** removed exlint as a plugin in vite.config.js ([025b62e](https://github.com/chingu-voyages/v46-tier2-team-19/commit/025b62eab007028b7fe2b34469cb9083b743a6b9))
+
+### [0.0.5](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.4...v0.0.5) (2023-10-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* **searchbox.jsx:** when the mirage server is turned off, the data return is undefined bc of too many
+requests to tasty
+
+CH-12
+* **vite.config.js:** the netlify git hooks fail
+
+### Features
+
+* **app.jsx:** add components page and components route ([22d422d](https://github.com/chingu-voyages/v46-tier2-team-19/commit/22d422dd3191ff8b307a03e4a493d9262931fe9d))
+* **button component:** create Button component ([a58491c](https://github.com/chingu-voyages/v46-tier2-team-19/commit/a58491c31d879b1a53ded5bd32fb24a296244e03))
+* **components.jsx:** create Components page ([f212844](https://github.com/chingu-voyages/v46-tier2-team-19/commit/f21284438428dc7374a8598be22ba2d1c8ac7511))
+* **featureoftheday.jsx:** create a simple react component for the recipe results page ([42b631b](https://github.com/chingu-voyages/v46-tier2-team-19/commit/42b631b5970573fd23529edef099ced7a2423741))
+* **global.css:** add color gradients CSS variables ([fa9e55a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fa9e55ad63de7e049b06a266cb058bcfbd71466f))
+* **global.css:** add display & body font CSS variables ([58e7ff3](https://github.com/chingu-voyages/v46-tier2-team-19/commit/58e7ff39022a3b4b4e75004c705a6f9c10237db1))
+* **global.css:** update typography rules ([2222fd6](https://github.com/chingu-voyages/v46-tier2-team-19/commit/2222fd6cc913300cd2d245ff3f2daa25cf568946))
+* **heading component:** create Heading component ([aad2ce9](https://github.com/chingu-voyages/v46-tier2-team-19/commit/aad2ce9239ef01ad8dc7ad1a60eb5dedb63bd92e))
+* **layout components & related:** implement responsive styling ([7bf833a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/7bf833a805c3bc7239c2e7c20362cc73d108c980))
+* **layout components:** add fonts, logos & more responsive styling ([a020a18](https://github.com/chingu-voyages/v46-tier2-team-19/commit/a020a18dbc79691c0a6017c66ef721301cc0fc87))
+* **layout:** add fonts, logos & more responsive styling ([1e82c70](https://github.com/chingu-voyages/v46-tier2-team-19/commit/1e82c705f013344a262b1d646fece8748a637550))
+* **pages/index.js:** import & export Components page ([6e07377](https://github.com/chingu-voyages/v46-tier2-team-19/commit/6e07377de6aa9ff9b73d0495952c9e067629910c))
+* **public:** add Vite logo SVG file ([5ae88a0](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ae88a092bb4792e4d402fcd2ce50f70209b8fbf))
+* **recipes-search:** created a Recipes page along with api calls and new components ([fbc37a6](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fbc37a666b8ca658b33b502e1efbd62714d4a363))
+* **searchbox.jsx:** add search functionality to recipe list ([108d9fc](https://github.com/chingu-voyages/v46-tier2-team-19/commit/108d9fc080f310232012627977262e7a5c3a499c))
+* **tailwind.config.js:** add custom color gradients to tailwind theme ([09de3de](https://github.com/chingu-voyages/v46-tier2-team-19/commit/09de3de29817b20b26729080da3f410c7d92f6f2))
+* **tailwind.config.js:** add custom scale property to tailwind theme ([184929e](https://github.com/chingu-voyages/v46-tier2-team-19/commit/184929e0710250f76f841a32bb6e3e7059b49a7d))
+* **tailwind.config.js:** add custom solid colors to Tailwind ([da4b2be](https://github.com/chingu-voyages/v46-tier2-team-19/commit/da4b2be7e212c8d18c54bdca3a39d35fade45171))
+
+
+### Bug Fixes
+
+* **package-lock.json:** reinstalled node_modules and package-lock.json ([21fd936](https://github.com/chingu-voyages/v46-tier2-team-19/commit/21fd93648bcbf381feb723a1b44b7c10e15162db))
+* **package.json:** revert package to 0.0.4 patch number ([5ae3d72](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ae3d723a0e47f8f109d8df0e058260304fa56d5))
+* **tailwind.config.js:** fix font family typo ([fb03682](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fb036821f95fd4410be19713895096c522e3ac1c))
+* **vite.config.js:** a bug has occured when netlify's building site ([57e0fd4](https://github.com/chingu-voyages/v46-tier2-team-19/commit/57e0fd4ba8fd490b3d01eebfd1b7a604b5b889bd))
+* **vite.config.js:** removed exlint as a plugin in vite.config.js ([025b62e](https://github.com/chingu-voyages/v46-tier2-team-19/commit/025b62eab007028b7fe2b34469cb9083b743a6b9))
+
+### [0.0.5](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.4...v0.0.5) (2023-10-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* **searchbox.jsx:** when the mirage server is turned off, the data return is undefined bc of too many
+requests to tasty
+
+CH-12
+* **vite.config.js:** the netlify git hooks fail
+
+### Features
+
+* **app.jsx:** add components page and components route ([22d422d](https://github.com/chingu-voyages/v46-tier2-team-19/commit/22d422dd3191ff8b307a03e4a493d9262931fe9d))
+* **button component:** create Button component ([a58491c](https://github.com/chingu-voyages/v46-tier2-team-19/commit/a58491c31d879b1a53ded5bd32fb24a296244e03))
+* **components.jsx:** create Components page ([f212844](https://github.com/chingu-voyages/v46-tier2-team-19/commit/f21284438428dc7374a8598be22ba2d1c8ac7511))
+* **featureoftheday.jsx:** create a simple react component for the recipe results page ([42b631b](https://github.com/chingu-voyages/v46-tier2-team-19/commit/42b631b5970573fd23529edef099ced7a2423741))
+* **global.css:** add color gradients CSS variables ([fa9e55a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fa9e55ad63de7e049b06a266cb058bcfbd71466f))
+* **global.css:** add display & body font CSS variables ([58e7ff3](https://github.com/chingu-voyages/v46-tier2-team-19/commit/58e7ff39022a3b4b4e75004c705a6f9c10237db1))
+* **global.css:** update typography rules ([2222fd6](https://github.com/chingu-voyages/v46-tier2-team-19/commit/2222fd6cc913300cd2d245ff3f2daa25cf568946))
+* **heading component:** create Heading component ([aad2ce9](https://github.com/chingu-voyages/v46-tier2-team-19/commit/aad2ce9239ef01ad8dc7ad1a60eb5dedb63bd92e))
+* **layout components & related:** implement responsive styling ([7bf833a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/7bf833a805c3bc7239c2e7c20362cc73d108c980))
+* **layout components:** add fonts, logos & more responsive styling ([a020a18](https://github.com/chingu-voyages/v46-tier2-team-19/commit/a020a18dbc79691c0a6017c66ef721301cc0fc87))
+* **layout:** add fonts, logos & more responsive styling ([1e82c70](https://github.com/chingu-voyages/v46-tier2-team-19/commit/1e82c705f013344a262b1d646fece8748a637550))
+* **pages/index.js:** import & export Components page ([6e07377](https://github.com/chingu-voyages/v46-tier2-team-19/commit/6e07377de6aa9ff9b73d0495952c9e067629910c))
+* **public:** add Vite logo SVG file ([5ae88a0](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ae88a092bb4792e4d402fcd2ce50f70209b8fbf))
+* **recipes-search:** created a Recipes page along with api calls and new components ([fbc37a6](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fbc37a666b8ca658b33b502e1efbd62714d4a363))
+* **searchbox.jsx:** add search functionality to recipe list ([108d9fc](https://github.com/chingu-voyages/v46-tier2-team-19/commit/108d9fc080f310232012627977262e7a5c3a499c))
+* **tailwind.config.js:** add custom color gradients to tailwind theme ([09de3de](https://github.com/chingu-voyages/v46-tier2-team-19/commit/09de3de29817b20b26729080da3f410c7d92f6f2))
+* **tailwind.config.js:** add custom scale property to tailwind theme ([184929e](https://github.com/chingu-voyages/v46-tier2-team-19/commit/184929e0710250f76f841a32bb6e3e7059b49a7d))
+* **tailwind.config.js:** add custom solid colors to Tailwind ([da4b2be](https://github.com/chingu-voyages/v46-tier2-team-19/commit/da4b2be7e212c8d18c54bdca3a39d35fade45171))
+
+
+### Bug Fixes
+
+* **package-lock.json:** reinstalled node_modules and package-lock.json ([21fd936](https://github.com/chingu-voyages/v46-tier2-team-19/commit/21fd93648bcbf381feb723a1b44b7c10e15162db))
+* **tailwind.config.js:** fix font family typo ([fb03682](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fb036821f95fd4410be19713895096c522e3ac1c))
+* **vite.config.js:** a bug has occured when netlify's building site ([57e0fd4](https://github.com/chingu-voyages/v46-tier2-team-19/commit/57e0fd4ba8fd490b3d01eebfd1b7a604b5b889bd))
+* **vite.config.js:** removed exlint as a plugin in vite.config.js ([025b62e](https://github.com/chingu-voyages/v46-tier2-team-19/commit/025b62eab007028b7fe2b34469cb9083b743a6b9))
+
 ### [0.0.4](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.3...v0.0.4) (2023-10-12)
 
 

README.md

@@ -1,8 +1,108 @@
-# React + Vite
+<img src="src/assets/brand/yumyumyes-logo-m.png" style="max-width:300px;" />
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+# YumYumYes.com - Recipe Search Web App
 
-Currently, two official plugins are available:
+YumYumYes! is a beautiful, full-featured, responsive web app that interfaces with the [Tasty API](https://rapidapi.com/apidojo/api/tasty) and allows users to search, view and save recipes. It was built from the ground up for [Chingu Voyage 46](https://github.com/chingu-voyages/voyage-project-tier2-recipes).
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Table of contents
+
+- [Overview](#overview)
+  - [About Chingu](#about-chingu)
+  - [Basic Requirements](#basic-requirements)
+  - [Our Solution](#our-solution)
+    - [Concept](#concept)
+    - [Screenshots](#screenshots)
+    - [Links](#links)
+
+## Overview
+
+### The challenge
+
+#### About Chingu:
+
+Chingu is a community of developers who are passionate about learning, helping others, and collaborating on projects. It is a remote, self-organizing, project-based learning platform. Chingu helps you to build your portfolio and network while collaborating on real-world projects with remote team members. "Chingus" are motivated learners who are self-directed and take responsibility for their own learning.
+
+#### Basic requirements:
+
+> Use the Tasty API to create an app that will help anyone interested in creating dishes and flavours to explore recipes in novel ways.
+
+**Landing Page**
+
+_User can see a landing page containing at least the following components:_
+
+- [ ] Header component displaying a welcome message.
+- [ ] Search field that enables users to input ingredient(s).
+- [ ] Component to explain the use of the application.
+- [ ] A scrollable list of recipes displaying the results based on the search criteria. Keep in mind that the Recipe API has over 1500 Recipes, however, it's paginated with 20 recipes per page of result.
+- [ ] A summary main recipe component: it should display recipe image, name and link to details.
+- [ ] A summary detail recipe component: it should display recipe name, category, and instructions.
+- [ ] Ensure mobile responsiveness for the application.
+
+**Search Component**
+
+_Users can input one or multiple ingredient(s)._
+
+- [ ] Initiate the search by either pressing the Enter key or clicking the 'Search' button/icon.
+- [ ] Display an error message when an unlisted item is entered.
+
+**Main Data Display Component**
+
+- [ ] Display results for each recipe in the main component.
+- [ ] Remain on the landing page if no search ingredient has been entered.
+
+**Summary Detail Component**
+
+_Display the following information of the selected recipe:_
+
+- [ ] Name
+- [ ] Category
+- [ ] List of instruction
+- [ ] List of nutrition
+- [ ] Add a Link to the instruction video
+
+## Our Solution
+
+### Concept
+
+We developed a unique web app with a distinctive brand and a whimsical, animated design. YumYumYes! is intended to make recipe browsing fun! Colorful mascots Yumi and Chef Carrots welcome visitors to our pages, and delightful visual motifs including text gradients, 3d colored balls, dashed lines and gentle curves are intended to make the app feel more alive and engaging.
+
+YumYumYes! allows users to search for recipes by ingredient and filter by useful tags such as difficulty, occasion, etc. The app also allows users to save recipes to their favorites list, and to view their favorites list at any time.
+
+The app is built as a fully responsive web app compatible with all modern web browsers, both mobile and desktop. We've taken care to make it intuitive for all users, and accessible to users with different abilities.
+
+### Screenshots
+
+<div style="display:flex;gap:1rem;flex-wrap:wrap;">
+    <div style="flex:1;min-width: 200px;">
+        <em>Home Page</em>
+        <a href="public/screenshots/screenshot-home-dev.png">
+            <img src="public/screenshots/screenshot-home-dev.png" alt="Home Page">
+        </a>
+    </div>
+    <!--
+    <div style="flex:1;min-width: 200px;">
+        <em>Home Page</em>
+        <a href="public/screenshots/screenshot-home-dev.png">
+            <img src="public/screenshots/screenshot-home-dev.png" alt="Home Page">
+        </a>
+    </div>
+    <div style="flex:1;min-width: 200px;">
+        <em>Home Page</em>
+        <a href="public/screenshots/screenshot-home-dev.png">
+            <img src="public/screenshots/screenshot-home-dev.png" alt="Home Page">
+        </a>
+    </div>
+    <div style="flex:1;min-width: 200px;">
+        <em>Home Page</em>
+        <a href="public/screenshots/screenshot-home-dev.png">
+            <img src="public/screenshots/screenshot-home-dev.png" alt="Home Page">
+        </a>
+    </div>
+    -->
+</div>
+
+### Links
+
+- Live Site URL: [YumYumYes.com](https://yumyumyes.com)
+- Source Code: [Github Repository](https://github.com/chingu-voyages/v46-tier2-team-19)
+- Design Mockup: [YumYumYes Figma Mockup](https://www.figma.com/file/CbJFJOPY0r5EbEpRSNrx9b/YumYumYes-wireframe)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "recipe-app",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -31,6 +31,7 @@
     "@tanstack/react-query-devtools": "^4.36.1",
     "axios": "^1.5.1",
     "dotenv": "^16.3.1",
+    "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",