Merge pull request #45 from chingu-voyages/development

merge dev into main

README.md

@@ -1,30 +1,82 @@
-# voyage-tasks
-
-Your project's `readme` is as important to success as your code. For 
-this reason you should put as much care into its creation and maintenance
-as you would any other component of the application.
-
-If you are unsure of what should go into the `readme` let this article,
-written by an experienced Chingu, be your starting point - 
-[Keys to a well written README](https://tinyurl.com/yk3wubft).
-
-And before we go there's "one more thing"! Once you decide what to include
-in your `readme` feel free to replace the text we've provided here.
-
-> Own it & Make it your Own!
-
-## Live link: https://chingu-voyage-v46-tier-2-team-16.netlify.app/
-
-## Team Documents
-
-You may find these helpful as you work together to organize your project.
-
-- [Team Project Ideas](./docs/team_project_ideas.md)
-- [Team Decision Log](./docs/team_decision_log.md)
-
-Meeting Agenda templates (located in the `/docs` directory in this repo):
-
-- Meeting - Voyage Kickoff --> ./docs/meeting-voyage_kickoff.docx
-- Meeting - App Vision & Feature Planning --> ./docs/meeting-vision_and_feature_planning.docx
-- Meeting - Sprint Retrospective, Review, and Planning --> ./docs/meeting-sprint_retrospective_review_and_planning.docx
-- Meeting - Sprint Open Topic Session --> ./docs/meeting-sprint_open_topic_session.docx
+# Zest - web app
+
+Zest is a web app that lets users find and sort recipes.
+
+## Table of Contents
+
+- [Project Description](#project-description)
+- [Major Functions and Features](#major-functions-and-features)
+- [Dependencies](#dependencies)
+- [Project setup](#project-setup)
+- [Usage](#usage)
+- [Deployment](#deployment)
+
+## Project Description
+
+Zest is a web app that lets users find and sort recipes. It uses the Tasty API. By default users can see browse an entire page of recipes. Users can search for recipes by their name (such as mac and cheese) and category (such as vegetarian, or pasta). Moreover, the user can filter recipes by categories.
+
+## Major Functions and Features
+
+1. **Browse recipes:** The landing page features a list of recipe cards, which contain information about ingredients, cooking times and step-by-step directions. Each of the recipes contains a picture of the dish and a nutritional chart. The recipes displayed are fetched using the Tasty API.
+
+2. **Find recipes:** By interacting with the search bar, the user can look for recipes entering a dish name or a category description (such as "under 30 minutes"). The results show up on the main page when the user use the search bar.
+
+2. **Sort recipes:** The user can sort the recipes by cooking time, nutritional value and alphabetically. 
+---
+
+## Dependencies
+
+To run "Zest" you will need the following dependencies and libraries:
+
+- axios - Version 1.5.0
+- chart.js - Version 4.3.3
+- react - Version 18.2.0
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run dev
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+## Usage
+
+Follow the steps below to effectively use "Zest" and accomplish tasks in the app:
+
+1. **Installation:**
+
+   Before getting started, ensure you have Node.js and npm (Node Package Manager) installed on your system.
+
+   ```
+   npm install
+   ```
+
+2. **Running the App:**
+
+   To run the app locally in development mode, use the following command:
+
+   ```
+   npm run dev
+   ```
+
+   This will start a development server, and you can access the app by visiting the specified URL in your web browser.
+
+## Deployment
+
+- Preview link
+https://main--chingu-voyage-v46-tier-2-team-16.netlify.app/
+
+- Screenshot of the project
+
+![](./ZestScreenshot.png)

package.json

@@ -8,9 +8,7 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "predeploy":"npm run build",
-    "deploy":"gh-pages -d dist"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.7",

src/App.jsx

@@ -1,8 +1,9 @@
 import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { HomeLayout } from './layout';
+
 import { RecipeDetails } from './pages/recipeDetails';
-import  { Home }  from './pages/home';
 import { NotFound } from './pages/notFound';
+import { Home } from './pages/home';
 
 const router = createBrowserRouter([
     {

src/components/AppLogoComponent/AppLogoComponent.jsx

@@ -1,19 +1,16 @@
+import { Link } from 'react-router-dom';
+
 import styles from './AppLogoComponent.module.css';
 import AppLogo from '../../assets/logo/appLogo.svg';
-import { AnchorLink } from '../UI/AnchorLink';
 
 const AppLogoComponent = () => {
     return (
         <>
-            {/* TODO: Update app logo link (href), to navigate to home/landing page  */}
-            {/* <a href="">
-                <img src={AppLogo} alt="Zest App Logo" />
-            </a> */}
-            <AnchorLink text="Zest" className={styles.logo}>
-                <img src={AppLogo} alt="Zest App Logo" />
-            </AnchorLink>
+            <Link to="/" className={styles.logo} >
+                <img src={AppLogo} alt="Zest App Logo" /> Zest
+            </Link>
         </>
     );
 };
 
-export default AppLogoComponent;
+export default AppLogoComponent;

src/components/Banner/Banner.jsx

@@ -0,0 +1,11 @@
+import styles from  "./Banner.module.css";
+
+const Banner = () => {
+  return (
+   <section className={styles.section}>
+
+   </section>
+  )
+}
+
+export default Banner;

src/components/Banner/Banner.module.css

@@ -0,0 +1,17 @@
+.section {
+    display: block;
+    background-image: url("./../../assets/images/banner.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    height: 500px;
+    opacity: 0.9;
+}
+
+
+
+@media (min-width:1400px) {
+    .section {
+       width: 100%;
+    }
+}

src/components/Banner/index.jsx

@@ -0,0 +1 @@
+export {default as Banner} from "./Banner";

src/components/Footer/Footer.jsx

@@ -1,60 +1,16 @@
 import styles from "./Footer.module.css";
 import { AppLogoComponent } from "../AppLogoComponent/index";
-import { AnchorLink } from "../UI/AnchorLink";
-import { useGetTagsListQuery } from "../../features/recipe/recipeSlice";
 import { useGlobalContext } from '../../contexts/DarkModeContext';
 
 const Footer = () => {
     const { isDarkTheme } = useGlobalContext();
 
-    const { data: getTagsListData, error, isError, isLoading } = useGetTagsListQuery();
-    if (isLoading) return <p>App is loading...</p>
-
-
     return (
-        <footer className={`${styles.footer} ${isDarkTheme ? styles['dark-footer'] : ''}`}>
+        <footer className={`${styles.footer} ${isDarkTheme ? styles['dark-theme'] : ''}`}>
             <section className={styles['logo-section']}>
                 <AppLogoComponent />
             </section>
 
-            <section className={`${styles['links-section']} ${isDarkTheme ? styles['dark-links-section'] : ''}`}>
-                <section className={styles['links-first-section']}>
-                    <AnchorLink text="Back to the top" className={isDarkTheme ? styles['dark-link'] : ''} />
-                    <AnchorLink text="My collection" className={isDarkTheme ? styles['dark-link'] : ''} />
-                    <AnchorLink text="Accessibility" className={isDarkTheme ? styles['dark-link'] : ''} />
-                    <AnchorLink text="Sitemap" className={isDarkTheme ? styles['dark-link'] : ''} />
-                </section>
-                <section className={styles['horizontal-divider-section']}>
-                    <hr className={styles['horizontal-divider']}></hr>
-                </section>
-                <section className={styles['links-second-section']}>
-                    <section className={styles['links-second-section--first-list']}>
-                        <AnchorLink text="Fish" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Beef" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Chicken" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Meat" className={isDarkTheme ? styles['dark-link'] : ''} />
-                    </section>
-                    <section className={styles['vertical-divider__first--show']}>
-                        <hr className={styles['vertical-divider']}></hr>
-                    </section>
-                    <section className={styles['links-second-section--second-list']}>
-                        <AnchorLink text="Sides" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Vegetarian" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Vegan" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Desserts" className={isDarkTheme ? styles['dark-link'] : ''} />
-                    </section>
-                    <section className={styles['vertical-divider__second--hide']}>
-                        <hr className={styles['vertical-divider__second']}></hr>
-                    </section>
-                    <section className={styles['links-second-section--third-list']}>
-                        <AnchorLink text="Sides" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Vegetarian" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Vegan" className={isDarkTheme ? styles['dark-link'] : ''} />
-                        <AnchorLink text="Desserts" className={isDarkTheme ? styles['dark-link'] : ''} />
-                    </section>
-                </section>
-            </section>
-
             <section className={styles['copyright-section']}>
                 <p className={isDarkTheme ? styles['dark-link'] : ''}>
                     Developed by{' '}

src/components/Footer/Footer.module.css

@@ -10,8 +10,6 @@ footer {
     justify-content: start;
     padding: 1.5rem;
     position: relative;
-    /* background-color: var(--color-white); 
-    color: var(--light-theme-primary-text-color);  */
 }
 
 footer section {
@@ -21,7 +19,6 @@ footer section {
 }
 
 a {
-    /* color: var(--light-theme-primary-text-color); */
     text-decoration: none;
 }
 
@@ -35,7 +32,6 @@ a {
     grid-area: linksSection;
     display: grid;
     grid-template-columns: 1fr;
-    /* color:var(--light-theme-primary-text-color); */
     grid-template-areas:
         "linksSecondSection"
         "horizontalDividerSection"
@@ -102,7 +98,6 @@ a {
 
 .copyright-section a {
     display: inline-flex;
-    /* color: var(--light-theme-primary-text-color); */
 }
 
 /* media query for desktop */
@@ -113,7 +108,6 @@ a {
 
     a {
         color: #393838;
-        /* color: var(--light-theme-primary-text-color); */
     }
 
     a[title]:hover::after {
@@ -134,13 +128,11 @@ a {
             "linksFirstSection linksSecondSection"
             "horizontalDividerSection horizontalDividerSection";
         padding: 1rem 0;
-        /* color: var(--light-theme-primary-text-color); */
     }
 
     .links-second-section {
         grid-template-columns: 1fr 10px 1fr 10px 1fr;
         grid-template-areas: "linksSecondSectionFirstList verticalDividerFirstSection linksSecondSectionSecondList verticalDividerSecondSection linksSecondSectionThirdList";
-        /* color: var(--light-theme-primary-text-color); */
     }
 
     .links-second-section--second-list {
@@ -151,7 +143,6 @@ a {
     .links-second-section--third-list {
         grid-area: linksSecondSectionThirdList;
         display: flex;
-        /* color: var(--light-theme-primary-text-color); */
     }
 
     .vertical-divider {
@@ -176,23 +167,19 @@ a {
     .copyright-section {
         align-items: start;
         position: relative;
-        /* color: var(--light-theme-primary-text-color); */
     }
 
     .copyright-section p {
         margin: 0;
-        /* color: var(--light-theme-primary-text-color); */
     }
 }
 
-.dark-footer {
-    color: var(--dark-theme-primary-text-color);
-    background-color: #000000;
-}
-
-
-
-.dark-link, .dark-text {
+.dark-link, 
+.dark-text {
     color:var(--dark-theme-primary-text-color);
 }
 
+.dark-theme {
+    background-color: var(--dark-theme-background-color);
+    color: var( --dark-theme-primary-text-color); 
+}