refactor: rename DemoRecipeApp, redesign UI with recipe categories, bookmarks, and detailed recipe views

"refactor: rename DemoWeatherApp to DemoDictionaryApp, update UI components, add favourites tab, and enhance search functionality"
update demo-dictionary-app,
2025-06-04 18:31:12 +08:00 · 2025-06-04 18:08:28 +08:00 · 2025-06-04 18:04:47 +08:00
58 changed files with 87759 additions and 425 deletions
--- a/03_source/mobile/public/assets/DemoDictionaryApp/icon/favicon.png
+++ b/03_source/mobile/public/assets/DemoDictionaryApp/icon/favicon.png
--- a/03_source/mobile/public/assets/DemoDictionaryApp/icon/icon.png
+++ b/03_source/mobile/public/assets/DemoDictionaryApp/icon/icon.png
--- a/03_source/mobile/public/assets/DemoDictionaryApp/shapes.svg
+++ b/03_source/mobile/public/assets/DemoDictionaryApp/shapes.svg
@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
--- a/03_source/mobile/public/assets/DemoRecipeApp/bookmark.png
+++ b/03_source/mobile/public/assets/DemoRecipeApp/bookmark.png
--- a/03_source/mobile/public/assets/DemoRecipeApp/icon/favicon.png
+++ b/03_source/mobile/public/assets/DemoRecipeApp/icon/favicon.png
--- a/03_source/mobile/public/assets/DemoRecipeApp/icon/icon.png
+++ b/03_source/mobile/public/assets/DemoRecipeApp/icon/icon.png
--- a/03_source/mobile/public/assets/DemoRecipeApp/placeholder.png
+++ b/03_source/mobile/public/assets/DemoRecipeApp/placeholder.png
--- a/03_source/mobile/public/assets/DemoRecipeApp/shapes.svg
+++ b/03_source/mobile/public/assets/DemoRecipeApp/shapes.svg
@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
--- a/03_source/mobile/src/App.tsx
+++ b/03_source/mobile/src/App.tsx
@@ -66,7 +66,7 @@ import PrivacyAgreement from './pages/PrivacyAgreement';
 import AppRoute from './AppRoute';
 //
 import DemoReactShop from './pages/DemoReactShop';
-import DemoWeatherApp from './pages/WeatherDemo';
+import DemoWeatherApp from './pages/DemoWeatherApp';
 import DemoClubHouse from './pages/DemoClubHouse';
 import DemoScoreBoard from './pages/DemoScoreBoard';
 import DemoQuoteApp from './pages/DemoQuoteApp';
@@ -75,6 +75,8 @@ import DemoQrScanner from './pages/DemoQrScanner';
 import DemoShopAppUi from './pages/DemoShopAppUi';
 // DemoDictionaryApp
 import DemoDictionaryApp from './pages/DemoDictionaryApp';
+// demo-recipe-app
+import DemoRecipeApp from './pages/DemoRecipeApp';

 setupIonicReact();

@@ -140,6 +142,7 @@ const IonicApp: React.FC<IonicAppProps> = ({
            <Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
            <Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
            <Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
+            <Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />

            {/*  */}
            <Route path="/account" component={Account} />
--- a/03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab1.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab1.jsx
@@ -1,8 +1,13 @@
 import {
  IonButton,
  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCardTitle,
  IonCol,
  IonContent,
+  IonGrid,
  IonHeader,
  IonIcon,
  IonPage,
@@ -11,54 +16,27 @@ import {
  IonToolbar,
  useIonRouter,
 } from '@ionic/react';
+import { bookOutline, chevronBackOutline, heart, search } from 'ionicons/icons';
+import { useStoreState } from 'pullstate';
+import { useRef } from 'react';
+import { WordStore } from '../store';
+import { getFavourites, getSearchCount } from '../store/Selectors';

-import { Geolocation } from '@capacitor/geolocation';
-import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../components/SkeletonDashboard';
-import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../components/CurrentWeather';
-
-function Tab1() {
+const Tab1 = () => {
  const router = useIonRouter();
-
-  const [currentWeather, setCurrentWeather] = useState(false);
-
-  useEffect(() => {
-    getCurrentPosition();
-  }, []);
-
-  const getCurrentPosition = async () => {
-    setCurrentWeather(false);
-    const coordinates = await Geolocation.getCurrentPosition();
-    getAddress(coordinates.coords);
-  };
-
-  const getAddress = async (coords) => {
-    const query = `${coords.latitude},${coords.longitude}`;
-    const response = await fetch(
-      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
-    );
-
-    const data = await response.json();
-    console.log(data);
-    setCurrentWeather(data);
-  };
+  const pageRef = useRef();
+  const favourites = useStoreState(WordStore, getFavourites);
+  const searchCount = useStoreState(WordStore, getSearchCount);

  function handleBackClick() {
    router.goBack();
  }

  return (
-    <IonPage>
+    <IonPage ref={pageRef}>
      <IonHeader>
        <IonToolbar>
-          <IonTitle>My Weather</IonTitle>
-
-          <IonButtons slot="end">
-            <IonButton onClick={() => getCurrentPosition()}>
-              <IonIcon icon={refreshOutline} color="primary" />
-            </IonButton>
-          </IonButtons>
+          <IonTitle>Dashboard</IonTitle>

          <IonButtons slot="start">
            <IonButton onClick={() => handleBackClick()}>
@@ -71,25 +49,66 @@ function Tab1() {
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Dashboard</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
          </IonToolbar>
        </IonHeader>

-        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
-          <IonCol size="12">
-            <h4>Here's your location based weather</h4>
-          </IonCol>
-        </IonRow>
+        <IonGrid>
+          <IonRow className={`animate__animated animate__faster animate__fadeIn`}>
+            <IonCol size="12">
+              <IonCard>
+                <IonCardContent>
+                  <IonIcon icon={bookOutline} color="primary" style={{ fontSize: '2rem' }} />
+                  <IonCardTitle>Ionic Dictionary App</IonCardTitle>
+                  <p>Based on the English language</p>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>

-        <div style={{ marginTop: '-1.5rem' }}>
-          {currentWeather ? (
-            <CurrentWeather currentWeather={currentWeather} />
-          ) : (
-            <SkeletonDashboard />
-          )}
-        </div>
+          <IonRow className={`animate__animated animate__faster animate__fadeIn`}>
+            <IonCol size="12">
+              <IonCard>
+                <IonCardContent>
+                  <IonCardTitle>Did you know?</IonCardTitle>
+                  <p>There are 171, 146 words in the English language!</p>
+                  <IonButton expand="block" className="ion-margin-top" routerLink="/search">
+                    Search now &rarr;
+                  </IonButton>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className={`animate__animated animate__faster animate__fadeIn`}>
+            <IonCol size="6">
+              <IonCard routerLink="/favourites">
+                <IonCardContent className="ion-text-center">
+                  <IonIcon icon={heart} color="primary" />
+                  <IonCardTitle>{favourites.length}</IonCardTitle>
+                  <IonCardSubtitle>Favourites</IonCardSubtitle>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+            <IonCol size="6">
+              <IonCard routerLink="/favourites">
+                <IonCardContent className="ion-text-center">
+                  <IonIcon icon={search} color="primary" />
+                  <IonCardTitle>{searchCount}</IonCardTitle>
+                  <IonCardSubtitle>Searches</IonCardSubtitle>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
      </IonContent>
    </IonPage>
  );
-}
+};

 export default Tab1;
--- a/03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab2.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab2.jsx
@@ -2,6 +2,7 @@ import {
  IonButton,
  IonCol,
  IonContent,
+  IonGrid,
  IonHeader,
  IonPage,
  IonRow,
@@ -9,30 +10,32 @@ import {
  IonTitle,
  IonToolbar,
 } from '@ionic/react';
-import { useState } from 'react';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { useState, useRef } from 'react';
+import { NoSearch } from '../components/NoSearch';
+import { NoResultsWordCard, WordCard } from '../components/WordCard';
+import { WordStore } from '../store';
+import { searchWord } from '../utils';

-function Tab2() {
-  const [search, setSearch] = useState('');
-  const [currentWeather, setCurrentWeather] = useState(false);
+const Tab2 = () => {
+  const pageRef = useRef();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchResult, setSearchResult] = useState(false);
+  const [animatedClass, setAnimatedClass] = useState('');

  const performSearch = async () => {
-    getAddress(search);
-  };
+    setAnimatedClass('animate__slideOutRight');
+    const result = searchTerm !== '' ? await searchWord(searchTerm) : undefined;

-  const getAddress = async (city) => {
-    const response = await fetch(
-      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
-    );
-    const data = await response.json();
+    setTimeout(() => setSearchResult(result === undefined ? 'none' : result), 250);
+    setTimeout(() => setAnimatedClass('animate__slideInLeft'), 250);

-    if (data && data.current && data.location) {
-      setCurrentWeather(data);
-    }
+    WordStore.update((s) => {
+      s.searchCount++;
+    });
  };

  return (
-    <IonPage>
+    <IonPage ref={pageRef}>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Search</IonTitle>
@@ -45,37 +48,36 @@ function Tab2() {
          </IonToolbar>
        </IonHeader>

-        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
-          <IonCol size="7">
-            <IonSearchbar
-              placeholder="Try 'London'"
-              animated
-              value={search}
-              onIonChange={(e) => setSearch(e.target.value)}
-            />
-          </IonCol>
+        <IonGrid>
+          <IonRow className="ion-align-items-center">
+            <IonCol size="9">
+              <IonSearchbar
+                animated
+                value={searchTerm}
+                onIonChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </IonCol>

-          <IonCol size="5">
-            <IonButton
-              expand="block"
-              className="ion-margin-start ion-margin-end"
-              onClick={performSearch}
-            >
-              Search
-            </IonButton>
-          </IonCol>
-        </IonRow>
+            <IonCol size="3">
+              <IonButton color="primary" onClick={performSearch}>
+                Search
+              </IonButton>
+            </IonCol>
+          </IonRow>

-        <div style={{ marginTop: '-0.8rem' }}>
-          {currentWeather ? (
-            <CurrentWeather currentWeather={currentWeather} />
-          ) : (
-            <h3 className="ion-text-center">Your search result will appear here</h3>
+          {searchResult && searchResult !== 'none' && (
+            <WordCard word={searchResult} animatedClass={animatedClass} pageRef={pageRef} />
          )}
-        </div>
+
+          {searchResult && searchResult === 'none' && (
+            <NoResultsWordCard word={searchResult} animatedClass={animatedClass} />
+          )}
+
+          {!searchResult && <NoSearch />}
+        </IonGrid>
      </IonContent>
    </IonPage>
  );
-}
+};

 export default Tab2;
--- a/03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab3.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab3.jsx
@@ -0,0 +1,45 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { useStoreState } from 'pullstate';
+import { useRef, useState } from 'react';
+import { NoFavourites } from '../components/NoFavourites';
+import { WordCard } from '../components/WordCard';
+import { WordStore } from '../store';
+import { getFavourites } from '../store/Selectors';
+
+const Tab3 = () => {
+  const pageRef = useRef();
+  const favourites = useStoreState(WordStore, getFavourites);
+  const [animatedClass, setAnimatedClass] = useState('animate__slideInLeft');
+
+  return (
+    <IonPage ref={pageRef}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Favourites</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Favourites</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        {favourites.map((favourite, index) => {
+          return (
+            <WordCard
+              key={index}
+              word={favourite}
+              animatedClass={animatedClass}
+              pageRef={pageRef}
+            />
+          );
+        })}
+
+        {favourites.length < 1 && <NoFavourites />}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab3;
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/NoFavourites.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/NoFavourites.jsx
@@ -0,0 +1,22 @@
+import { IonCol, IonLabel, IonRow } from '@ionic/react';
+
+export const NoFavourites = () => (
+  <IonRow className="ion-text-center ion-justify-content-center ion-margin-top ion-padding-top">
+    <IonCol size="10" className="ion-padding-top ion-margin-top">
+      <IonLabel className="ion-padding-top ion-margin-top">
+        <h2>You don't have any favourites yet!</h2>
+        <p>
+          Any time you see the heart icon, press it to add the related word to your favourites and
+          quickly access it from here.
+        </p>
+        <lottie-player
+          src="https://assets9.lottiefiles.com/packages/lf20_LK2KVy.json"
+          background="transparent"
+          speed="1"
+          loop
+          autoplay
+        ></lottie-player>
+      </IonLabel>
+    </IonCol>
+  </IonRow>
+);
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/NoSearch.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/NoSearch.jsx
@@ -0,0 +1,23 @@
+import { IonCol, IonLabel, IonRow } from '@ionic/react';
+
+export const NoSearch = () => (
+  <IonRow className="ion-text-center ion-justify-content-center ion-margin-top">
+    <IonCol size="10">
+      <IonLabel>
+        <h2>Search for a word in the English language</h2>
+        <p>
+          This app will give you word meaninigs, phonetics, origin and also an audio clip so you can
+          hear what it sounds like.
+        </p>
+        <lottie-player
+          src="https://assets7.lottiefiles.com/packages/lf20_n2m0isqh.json"
+          mode="bounce"
+          background="transparent"
+          speed="0.8"
+          loop
+          autoplay
+        ></lottie-player>
+      </IonLabel>
+    </IonCol>
+  </IonRow>
+);
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/WordCard.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/WordCard.jsx
@@ -0,0 +1,129 @@
+import {
+  IonBadge,
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonIcon,
+  IonNote,
+  IonRow,
+  useIonModal,
+} from '@ionic/react';
+import { checkmarkCircleOutline, chevronForward, closeCircleOutline } from 'ionicons/icons';
+import WordModal from './WordModal';
+
+export const WordCard = ({ word, animatedClass, pageRef }) => {
+  const closeModal = () => {
+    hideModal();
+  };
+
+  const openModal = () => {
+    showModal({
+      presentingElement: pageRef.current,
+      onDidDismiss: hideModal,
+    });
+  };
+
+  const [showModal, hideModal] = useIonModal(WordModal, {
+    dismiss: closeModal,
+    word,
+  });
+
+  return (
+    <IonRow className={`animate__animated animate__faster ${animatedClass}`}>
+      <IonCol size="12">
+        <IonCard>
+          <IonCardContent>
+            <IonCardTitle>{word.word}</IonCardTitle>
+            <div className="ion-padding-bottom ion-padding-top">
+              {word.meanings &&
+                word.meanings.map((meaning, index) => {
+                  return (
+                    <span key={index}>
+                      <IonBadge color="primary">{meaning.partOfSpeech}</IonBadge>
+                      &nbsp;
+                    </span>
+                  );
+                })}
+            </div>
+            <IonNote color="white">{word.origin}</IonNote>
+
+            <IonRow className="ion-padding-top ion-align-items-center ion-justify-content-center ion-text-center">
+              <IonCol size="4">
+                <IonCardTitle>{word.meanings.length}</IonCardTitle>
+                <IonCardSubtitle>meanings</IonCardSubtitle>
+              </IonCol>
+
+              <IonCol size="4">
+                <IonCardTitle>{word.phonetics.length}</IonCardTitle>
+                <IonCardSubtitle>phonetics</IonCardSubtitle>
+              </IonCol>
+              <IonCol size="4">
+                <IonCardTitle>
+                  <IonIcon
+                    icon={
+                      word.phonetics[0] && word.phonetics[0].audio
+                        ? checkmarkCircleOutline
+                        : closeCircleOutline
+                    }
+                  />
+                </IonCardTitle>
+                <IonCardSubtitle>audio</IonCardSubtitle>
+              </IonCol>
+            </IonRow>
+
+            <IonRow>
+              <IonCol size="12">
+                <IonButton color="primary" expand="block" onClick={openModal}>
+                  View&nbsp;
+                  <IonIcon icon={chevronForward} />
+                </IonButton>
+              </IonCol>
+            </IonRow>
+          </IonCardContent>
+        </IonCard>
+      </IonCol>
+    </IonRow>
+  );
+};
+
+export const NoResultsWordCard = ({ word, animatedClass }) => {
+  return (
+    <IonRow className={`animate__animated animate__faster ${animatedClass}`}>
+      <IonCol size="12">
+        <IonCard>
+          <IonCardContent>
+            <IonCardTitle>Whoops...</IonCardTitle>
+            <div className="ion-padding-bottom ion-padding-top">
+              <IonBadge color="primary">no results</IonBadge>&nbsp;
+              <IonBadge color="primary">found</IonBadge>
+            </div>
+            <IonNote color="white">
+              No results have been found for your search criteria! Please try another word.
+            </IonNote>
+
+            <IonRow className="ion-padding-top ion-align-items-center ion-justify-content-center ion-text-center">
+              <IonCol size="4">
+                <IonCardTitle>0</IonCardTitle>
+                <IonCardSubtitle>meanings</IonCardSubtitle>
+              </IonCol>
+
+              <IonCol size="4">
+                <IonCardTitle>0</IonCardTitle>
+                <IonCardSubtitle>phonetics</IonCardSubtitle>
+              </IonCol>
+              <IonCol size="4">
+                <IonCardTitle>
+                  <IonIcon icon={closeCircleOutline} />
+                </IonCardTitle>
+                <IonCardSubtitle>audio</IonCardSubtitle>
+              </IonCol>
+            </IonRow>
+          </IonCardContent>
+        </IonCard>
+      </IonCol>
+    </IonRow>
+  );
+};
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/WordCardHeading.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/WordCardHeading.jsx
@@ -0,0 +1,10 @@
+import { IonText } from "@ionic/react";
+
+export const WordCardHeading = ({ text }) => (
+
+  <div style={{ marginTop: "-1.5rem" }}>
+    <IonText color="light">
+      <h2 className="ion-padding-start">{ text }</h2>
+    </IonText>
+  </div>
+);
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/WordMeaning.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/WordMeaning.jsx
@@ -0,0 +1,18 @@
+import { IonBadge } from '@ionic/react';
+
+export const WordMeaning = ({ meaning, index }) => (
+  <div className={index > 0 ? 'ion-padding-top' : ''}>
+    <IonBadge key={index} color="primary">
+      {meaning.partOfSpeech}
+    </IonBadge>
+    <br />
+    {meaning.definitions.map((definition, index2) => {
+      return (
+        <p key={`definition_${index2}`} className={index2 > 0 ? 'ion-padding-top' : ''}>
+          {index2 + 1}.&nbsp;
+          {definition.definition}
+        </p>
+      );
+    })}
+  </div>
+);
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/WordModal.jsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/WordModal.jsx
@@ -0,0 +1,122 @@
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { heart, heartOutline, play } from 'ionicons/icons';
+import { useStoreState } from 'pullstate';
+import { WordStore } from '../store';
+import { getFavourites } from '../store/Selectors';
+import { addToFavourites } from '../store/WordStore';
+import { WordCardHeading } from './WordCardHeading';
+import { WordMeaning } from './WordMeaning';
+
+const WordModal = ({ dismiss, word }) => {
+  const favourites = useStoreState(WordStore, getFavourites);
+  const isFavourite = favourites.includes(word);
+  const audio = word.phonetics[0] ? word.phonetics[0].audio : false;
+
+  const playAudio = () => {
+    const audioElement = new Audio(`https:${audio}`);
+    audioElement.play();
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton onClick={() => addToFavourites(word)}>
+              <IonIcon icon={isFavourite ? heart : heartOutline} />
+            </IonButton>
+          </IonButtons>
+          <IonTitle>View Word</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={dismiss}>Close</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonGrid>
+          <IonRow className="animate__animated animate__faster animate__slideInUp">
+            <IonCol size="12">
+              <IonCard>
+                <IonCardContent>
+                  <IonCardTitle>{word.word}</IonCardTitle>
+                  <div className="ion-padding-bottom ion-padding-top">
+                    {word.meanings &&
+                      word.meanings.map((meaning, index) => {
+                        return (
+                          <span key={`meaning_${index}`}>
+                            <IonBadge key={index} color="primary">
+                              {meaning.partOfSpeech}
+                            </IonBadge>
+                            &nbsp;
+                          </span>
+                        );
+                      })}
+                  </div>
+                  <IonNote color="white">{word.origin}</IonNote>
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+
+          {audio && (
+            <IonRow className="animate__animated animate__faster animate__slideInUp">
+              <IonCol size="12">
+                <WordCardHeading text="Audio Clip" />
+
+                <IonCard>
+                  <IonCardContent>
+                    <IonRow>
+                      <IonCol size="12">
+                        <IonButton color="primary" expand="block" onClick={playAudio}>
+                          <IonIcon icon={play} />
+                        </IonButton>
+                      </IonCol>
+                    </IonRow>
+                  </IonCardContent>
+                </IonCard>
+              </IonCol>
+            </IonRow>
+          )}
+
+          <IonRow className="animate__animated animate__faster animate__slideInUp">
+            <IonCol size="12">
+              <WordCardHeading text="Meanings" />
+
+              <IonCard>
+                <IonCardContent>
+                  {word.meanings &&
+                    word.meanings.map((meaning, index) => {
+                      return <WordMeaning key={index} index={index} meaning={meaning} />;
+                    })}
+                </IonCardContent>
+              </IonCard>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default WordModal;
--- a/03_source/mobile/src/pages/DemoDictionaryApp/index.tsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/index.tsx
@@ -1,38 +1,44 @@
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';

-import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { cloudOutline, heart, search, searchOutline, statsChart } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';

 import Tab1 from './AppPages/Tab1';
 import Tab2 from './AppPages/Tab2';
+import Tab3 from './AppPages/Tab3';

-function DemoWeatherApp() {
+import './style.scss';
+
+function DemoDictionaryApp() {
  return (
-    <IonTabs>
+    <IonTabs className="demo-dictionary-app">
      <IonRouterOutlet>
-        <Route exact path="/demo-weather-app/tab1">
+        <Route exact path="/demo-dictionary-app/dashboard">
          <Tab1 />
        </Route>
-        <Route exact path="/demo-weather-app/tab2">
+        <Route exact path="/demo-dictionary-app/search">
          <Tab2 />
        </Route>
-        <Route exact path="/demo-weather-app">
-          <Redirect to="/demo-weather-app/tab1" />
+        <Route path="/demo-dictionary-app/favourites">
+          <Tab3 />
        </Route>
+
+        <Redirect exact path="/demo-dictionary-app" to="/demo-dictionary-app/dashboard" />
      </IonRouterOutlet>
      {/*  */}
      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-weather-app/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
+        <IonTabButton tab="dashboard" href="/demo-dictionary-app/dashboard">
+          <IonIcon icon={statsChart} />
        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-weather-app/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
+        <IonTabButton tab="search" href="/demo-dictionary-app/search">
+          <IonIcon icon={search} />
+        </IonTabButton>
+        <IonTabButton tab="favourites" href="/demo-dictionary-app/favourites">
+          <IonIcon icon={heart} />
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
 }

-export default DemoWeatherApp;
+export default DemoDictionaryApp;
--- a/03_source/mobile/src/pages/DemoDictionaryApp/store/Selectors.js
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/store/Selectors.js
@@ -0,0 +1,8 @@
+import { createSelector } from 'reselect';
+
+const getState = state => state;
+
+//  General getters
+export const getFavourites = createSelector(getState, state => state.favourites);
+export const getPopularWords = createSelector(getState, state => state.popularWords);
+export const getSearchCount = createSelector(getState, state => state.searchCount);
--- a/03_source/mobile/src/pages/DemoDictionaryApp/store/WordStore.js
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/store/WordStore.js
@@ -0,0 +1,29 @@
+import { Store } from "pullstate";
+
+const WordStore = new Store({
+    
+    favourites: [],
+    popularWords: [],
+    searchCount: 0
+});
+
+export default WordStore;
+
+export const addToFavourites = (passedWord) => {
+
+    const currentFavourites = WordStore.getRawState().favourites;
+    const added = !currentFavourites.includes(passedWord);
+
+    WordStore.update(s => {
+
+        if (currentFavourites.includes(passedWord)) {
+            
+            s.favourites = currentFavourites.filter(word => word !== passedWord);
+        } else {
+            
+            s.favourites = [ ...s.favourites, passedWord ];
+        }
+    });
+
+    return added;
+}
--- a/03_source/mobile/src/pages/DemoDictionaryApp/store/index.js
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/store/index.js
@@ -0,0 +1 @@
+export { default as WordStore } from "./WordStore";
--- a/03_source/mobile/src/pages/DemoDictionaryApp/style.scss
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/style.scss
@@ -1,103 +1,240 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */

-    top: 0;
-    left: 0;
-    right: 0;
+/** Ionic CSS Variables **/
+.demo-dictionary-app {
+  * {
+    /** primary **/
+    --ion-color-primary: #953cd0;
+    --ion-color-primary-rgb: 149, 60, 208;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #8335b7;
+    --ion-color-primary-tint: #a050d5;

-    --background: transparent;
-    --color: white;
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #ffffff;
+    --ion-color-light-rgb: 255, 255, 255;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #e0e0e0;
+    --ion-color-light-tint: #ffffff;
+
+    --ion-background-color: #1e1b27 !important;
+    --ion-tab-bar-color-selected: #953cd0;
+    --ion-tab-bar-color: #412f6e;
+    --ion-text-color: white;
+    --ion-tab-bar-background: #191620;
+    --ion-toolbar-background: #191620 !important;
+    --ion-item-background: #000000 !important;
+
+    --ion-card-background: #272333 !important;
+    --ion-modal-background: #272333 !important;
  }

-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
+  ion-tab-bar {
+    --border-style: none;
+    border: none;
  }

  /*
-   * iOS Only
+   * Dark Colors
+   * -------------------------------------------
   */

-  .ios .about-info {
-    --ion-padding: 19px;
+  ion-modal {
+    -ms-overflow-style: none; /* for Internet Explorer, Edge */
+    scrollbar-width: none; /* for Firefox */
+    overflow-y: scroll;
  }

-  .ios .about-info h3 {
-    font-weight: 700;
+  body {
+    overflow: hidden !important;
+    --ion-color-primary: #953cd0;
+    --ion-color-primary-rgb: 149, 60, 208;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #8335b7;
+    --ion-color-primary-tint: #a050d5;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80, 200, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255, 213, 52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255, 73, 97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #ffffff;
+    --ion-color-light-rgb: 255, 255, 255;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #e0e0e0;
+    --ion-color-light-tint: #ffffff;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    /* --ion-background-color: #000000; */
+    /* --ion-background-color-rgb: 0,0,0; */
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+  }
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    /* --ion-background-color: #121212; */
+    /* --ion-background-color-rgb: 18,18,18; */
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
  }
 }
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}
--- a/03_source/mobile/src/pages/DemoDictionaryApp/utils.js
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/utils.js
@@ -0,0 +1,21 @@
+import { WordStore } from './store';
+
+const API_URL = 'https://api.dictionaryapi.dev/api/v2/entries/en/';
+
+export const searchWord = async (word, returnOne = true) => {
+  const response = await fetch(`${API_URL}${word.toLowerCase()}`);
+  const data = await response.json();
+
+  return returnOne ? data[0] : data;
+};
+
+export const fetchPopularWords = async () => {
+  const words = ['mobile', 'applications', 'ionic', 'framework'];
+
+  words.forEach(async (word) => {
+    const wordData = await searchWord(word, false);
+    WordStore.update((s) => {
+      s.popularWords = [...s.popularWords, wordData[0]];
+    });
+  });
+};
--- a/03_source/mobile/src/pages/DemoList/index.tsx
+++ b/03_source/mobile/src/pages/DemoList/index.tsx
@@ -252,6 +252,23 @@ const SettingsPage: React.FC<SettingsProps> = ({
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>
+
+        <IonList inset={false}>
+          <IonItem button={true} onClick={() => router.push(paths.DEMO_DICTIONARY_APP, 'forward')}>
+            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
+            <IonLabel>Demo Dictionary App</IonLabel>
+            <IonIcon icon={chevronForwardOutline}></IonIcon>
+          </IonItem>
+        </IonList>
+
+        {/*  */}
+        <IonList inset={false}>
+          <IonItem button={true} onClick={() => router.push(paths.DEMO_RECIPE_APP, 'forward')}>
+            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
+            <IonLabel>Demo Recipe App</IonLabel>
+            <IonIcon icon={chevronForwardOutline}></IonIcon>
+          </IonItem>
+        </IonList>
      </IonContent>

      {/* REQ0058/logout */}
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Bookmarks.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Bookmarks.jsx
@@ -0,0 +1,74 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonList,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { RecipeListItem } from '../components/RecipeListItem';
+
+import { useStoreState } from 'pullstate';
+import { BookmarkStore } from '../store';
+import { getBookmarks } from '../store/Selectors';
+
+const Bookmarks = () => {
+  const bookmarks = useStoreState(BookmarkStore, getBookmarks);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text="Categories" />
+          </IonButtons>
+          <IonTitle>Bookmarks</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Bookmarks ({bookmarks.length})</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonList>
+          {bookmarks.map((bookmark, index) => {
+            return (
+              <RecipeListItem recipe={bookmark} key={`recipe_${index}`} fromBookmarks={true} />
+            );
+          })}
+        </IonList>
+
+        {bookmarks.length < 1 && (
+          <>
+            <IonRow className="ion-justify-content-center ion-text-center ion-margin-top ion-padding-top">
+              <IonCol size="8">
+                <IonText>You don't have any bookmarks yet</IonText>
+
+                <IonNote>
+                  <p>When viewing a recipe, press the bookmark icon to add it</p>
+                </IonNote>
+              </IonCol>
+            </IonRow>
+
+            <IonRow className="ion-justify-content-center">
+              <IonCol size="8">
+                <IonImg src="/assets/DemoRecipeApp/bookmark.png" />
+              </IonCol>
+            </IonRow>
+          </>
+        )}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Bookmarks;
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.jsx
@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import styles from './Categories.module.scss';
+import { recipes } from '../recipes';
+import { useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { bookmarkOutline, chevronBackOutline } from 'ionicons/icons';
+import { getBookmarks } from '../store/Selectors';
+import { useStoreState } from 'pullstate';
+import { BookmarkStore } from '../store';
+
+const Categories = () => {
+  const router = useIonRouter();
+  const pageRef = useRef();
+  const [recipeCategories, setRecipeCategories] = useState([]);
+  const bookmarks = useStoreState(BookmarkStore, getBookmarks);
+
+  useEffect(() => {
+    const getAllRecipes = async () => {
+      const tempRecipeCategories = [
+        {
+          name: 'Chicken',
+          data: recipes.chicken.hits[0],
+        },
+        {
+          name: 'Beef',
+          data: recipes.beef.hits[0],
+        },
+        {
+          name: 'Fish',
+          data: recipes.fish.hits[0],
+        },
+        {
+          name: 'Fruit',
+          data: recipes.fruit.hits[0],
+        },
+        {
+          name: 'Salad',
+          data: recipes.salad.hits[0],
+        },
+        {
+          name: 'Vegan',
+          data: recipes.vegan.hits[0],
+        },
+      ];
+
+      setRecipeCategories(tempRecipeCategories);
+    };
+
+    getAllRecipes();
+  }, []);
+
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage ref={pageRef}>
+      <IonHeader className="ion-no-border">
+        <IonToolbar className="ion-no-border">
+          <IonTitle>Recipe Categories</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton routerLink="/bookmarks">
+              <IonIcon icon={bookmarkOutline} />
+              &nbsp;
+              {bookmarks.length}
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className={styles.searchArea}>
+          <IonSearchbar
+            className="ion-justify-content-center"
+            placeholder="Try 'Chicken Piccata'"
+            onClick={() => router.push('/search')}
+          />
+        </div>
+
+        <IonGrid>
+          <IonRow className={styles.row}>
+            {recipeCategories.map((category, index) => {
+              const { name, data } = category;
+              const { recipe } = data;
+
+              return (
+                <IonCol className={styles.col} size="6" key={`recipe_${index}`}>
+                  <Link to={`/category/${name}`}>
+                    <img src={recipe.image} alt="cover" />
+                    <div className={styles.categoryName}>
+                      <IonCardTitle>{name}</IonCardTitle>
+                    </div>
+                  </Link>
+                </IonCol>
+              );
+            })}
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Categories;
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.module.scss
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Categories.module.scss
@@ -0,0 +1,65 @@
+.categoryName {
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 0 auto;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    height: 100%;
+    width: 100%;
+
+    ion-card-title {
+
+        color: white;
+        margin-left: 0.5rem;
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        width: fit-content;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 10px;
+    }
+}
+
+.row,
+.col,
+.card {
+
+    padding: 0;
+    background-color: white;
+    border-radius: 10px;
+}
+
+.col {
+
+    border: 5px solid white;
+
+    img {
+
+        border-radius: 10px;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+.searchArea {
+
+    background-color: var(--ion-toolbar-background);
+    padding-bottom: 0.5rem;
+
+    ion-searchbar {
+
+        color: white;
+        --background: rgb(49, 49, 49);
+        --icon-color: rgb(27, 173, 100);
+        // --border-radius: 0;
+    }
+}
+
+.searchButton {
+
+    height: 2.2rem;
+    margin-top: 0.9rem;
+
+}
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Category.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Category.jsx
@@ -0,0 +1,54 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { useParams } from 'react-router';
+import { RecipeListItem } from '../components/RecipeListItem';
+import { recipes } from '../recipes';
+
+const Category = () => {
+  const { name } = useParams();
+  const [categoryRecipes, setCategoryRecipes] = useState([]);
+
+  useEffect(() => {
+    setCategoryRecipes(recipes[name.toLowerCase()].hits);
+  }, [name]);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton text="Categories" />
+          </IonButtons>
+          <IonTitle>{name} Recipes</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">{name} Recipes</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonList>
+          {categoryRecipes.map((categoryRecipe, index) => {
+            const { recipe } = categoryRecipe;
+
+            return <RecipeListItem recipe={recipe} key={`recipe_${index}`} />;
+          })}
+        </IonList>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Category;
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Category.module.scss
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Category.module.scss
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.jsx
@@ -0,0 +1,193 @@
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonList,
+  IonListHeader,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonModal,
+  useIonToast,
+} from '@ionic/react';
+import {
+  bookmark,
+  bookmarkOutline,
+  informationCircleOutline,
+  layersOutline,
+  peopleOutline,
+  timeOutline,
+} from 'ionicons/icons';
+import { useEffect, useRef } from 'react';
+import { useState } from 'react';
+import { useLocation } from 'react-router';
+import { Ingredient } from '../components/Ingredient';
+import IngredientsModal from '../components/IngredientsModal';
+import NutritionModal from '../components/NutritionModal';
+import BookmarkStore, { addToBookmarks } from '../store/BookmarkStore';
+import styles from './Recipe.module.scss';
+
+import { useStoreState } from 'pullstate';
+import { getBookmarks } from '../store/Selectors';
+
+const Recipe = () => {
+  const pageRef = useRef();
+  const { state } = useLocation();
+  const [recipe, setRecipe] = useState([]);
+  const [fromSearch, setFromSearch] = useState(false);
+  const [fromBookmarks, setFromBookmarks] = useState(false);
+
+  const bookmarks = useStoreState(BookmarkStore, getBookmarks);
+
+  const [showToast] = useIonToast();
+
+  const handleDismissIngredientsModal = () => {
+    hideIngredientsModal();
+  };
+
+  const handleDismissNutritionModal = () => {
+    hideNutritionModal();
+  };
+
+  const [showIngredientsModal, hideIngredientsModal] = useIonModal(IngredientsModal, {
+    dismiss: handleDismissIngredientsModal,
+    ingredients: recipe.ingredients,
+  });
+
+  const [showNutritionModal, hideNutritionModal] = useIonModal(NutritionModal, {
+    dismiss: handleDismissNutritionModal,
+    recipe,
+  });
+
+  useEffect(() => {
+    if (state && state.recipe) {
+      setRecipe(state.recipe);
+    }
+
+    if (state && state.fromSearch) {
+      setFromSearch(state.fromSearch);
+    }
+
+    if (state && state.fromBookmarks) {
+      setFromBookmarks(state.fromBookmarks);
+    }
+  }, [state]);
+
+  const addBookmark = async () => {
+    const added = addToBookmarks(recipe);
+    showToast({
+      message: added
+        ? 'This recipe has been bookmarked!'
+        : 'This recipe has been removed from your bookmarks.',
+      duration: 2000,
+      color: 'main',
+    });
+  };
+
+  return (
+    <IonPage ref={pageRef}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>View Recipe</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton
+              text={fromSearch ? 'Search' : fromBookmarks ? 'Bookmarks' : 'Recipes'}
+              color="main"
+            />
+          </IonButtons>
+
+          <IonButtons slot="end">
+            <IonButton onClick={addBookmark}>
+              <IonIcon icon={bookmarks.includes(recipe) ? bookmark : bookmarkOutline} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className={styles.headerImage}>
+          <img src={recipe.image} alt="main cover" />
+          <div className={`${styles.headerInfo} animate__animated animate__slideInLeft`}>
+            <h1>{recipe.label}</h1>
+            <p>{recipe.dishType && recipe.dishType[0]}</p>
+          </div>
+        </div>
+
+        <IonGrid>
+          <IonRow className="ion-text-center">
+            <IonCol size="4">
+              <IonCardTitle>
+                <IonIcon icon={peopleOutline} />
+              </IonCardTitle>
+              <IonCardSubtitle>serves {recipe.yield && recipe.yield}</IonCardSubtitle>
+            </IonCol>
+            <IonCol size="4">
+              <IonCardTitle>
+                <IonIcon icon={timeOutline} />
+              </IonCardTitle>
+              <IonCardSubtitle>
+                {recipe.totalTime !== 0
+                  ? `${recipe.totalWeight && recipe.totalWeight.toFixed(0)} mins`
+                  : 'N/A'}
+              </IonCardSubtitle>
+            </IonCol>
+            <IonCol size="4">
+              <IonCardTitle>
+                <IonIcon icon={layersOutline} />
+              </IonCardTitle>
+              <IonCardSubtitle>
+                {recipe.totalWeight && recipe.totalWeight.toFixed(0)}g
+              </IonCardSubtitle>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-text-center">
+            <IonCol size="6">
+              {/* <IonButton color="main" onClick={ () => showIngredientsModal({
+
+								presentingElement: pageRef.current,
+								cssClass: "customModal"
+							})}>
+								<IonIcon icon={ informationCircleOutline } />&nbsp;
+								View Ingredients
+								</IonButton> */}
+            </IonCol>
+            <IonCol size="12">
+              <IonButton
+                expand="block"
+                color="main"
+                onClick={() =>
+                  showNutritionModal({
+                    presentingElement: pageRef.current,
+                    cssClass: 'customModal',
+                  })
+                }
+              >
+                <IonIcon icon={informationCircleOutline} />
+                &nbsp; View Nutrition
+              </IonButton>
+            </IonCol>
+          </IonRow>
+
+          {recipe.ingredients && (
+            <IonList>
+              <IonListHeader>Ingredients ({recipe.ingredients.length})</IonListHeader>
+              {recipe.ingredients.map((ingredient, index) => {
+                return <Ingredient key={`ingredient_${index}`} ingredient={ingredient} />;
+              })}
+            </IonList>
+          )}
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Recipe;
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.module.scss
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Recipe.module.scss
@@ -0,0 +1,37 @@
+.headerImage {
+
+	img {
+
+		width: 100%;
+		margin-top: -5rem;
+		border-bottom: 5px solid var(--ion-color-main);
+	}
+
+	.headerInfo {
+
+		position: absolute;
+		top: 10rem;
+		z-index: 10;
+
+		background-color: rgba($color: #000000, $alpha: 0.8);
+		color: white;
+		padding: 1rem;
+		border-top-right-radius: 10px;
+		border-bottom-right-radius: 10px;
+
+		h1 {
+
+			font-size: 1.1rem;
+			padding: 0;
+			margin: 0;
+		}
+
+		p {
+
+			font-size: 0.9rem;
+			padding: 0;
+			margin: 0;
+			color: var(--ion-color-main);
+		}
+	}
+}
--- a/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Search.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/AppPages/Search.jsx
@@ -0,0 +1,120 @@
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonImg,
+  IonList,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  useIonLoading,
+  useIonViewDidEnter,
+} from '@ionic/react';
+import { useState } from 'react';
+import { useRef } from 'react';
+import styles from './Categories.module.scss';
+import { performSearch } from '../utils';
+import { RecipeListItem } from '../components/RecipeListItem';
+
+const Search = () => {
+  const searchRef = useRef();
+  const [searchResults, setSearchResults] = useState([]);
+  const [showLoader, hideLoader] = useIonLoading();
+
+  useIonViewDidEnter(() => {
+    searchRef.current.setFocus();
+  });
+
+  const search = async () => {
+    showLoader({
+      cssClass: 'customLoader',
+      message: 'Searching...',
+      duration: 9999999,
+      spinner: 'dots',
+    });
+
+    const searchTerm = searchRef.current.value;
+    const data = await performSearch(searchTerm);
+
+    setSearchResults(data.hits);
+
+    setTimeout(() => {
+      hideLoader();
+    }, 300);
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Search Recipes</IonTitle>
+          <IonButtons slot="start">
+            <IonBackButton color="main" text="Categories" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <div className={styles.searchArea}>
+          <IonGrid>
+            <IonRow>
+              <IonCol size="9">
+                <IonSearchbar ref={searchRef} placeholder="Try 'Chicken Piccata'" />
+              </IonCol>
+              <IonCol size="3">
+                <IonButton
+                  className={styles.searchButton}
+                  expand="block"
+                  color="main"
+                  onClick={search}
+                >
+                  Search
+                </IonButton>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
+
+        {searchResults.length > 0 && (
+          <IonList>
+            {searchResults.map((result, index) => {
+              const { recipe } = result;
+
+              return <RecipeListItem recipe={recipe} key={`result_${index}`} fromSearch={true} />;
+            })}
+          </IonList>
+        )}
+
+        {searchResults.length < 1 && (
+          <>
+            <IonRow className="ion-justify-content-center ion-text-center ion-margin-top ion-padding-top">
+              <IonCol size="8">
+                <IonText>Search for a recipe then select from the list to view it</IonText>
+
+                <IonNote>
+                  <p>For development purposes, only 20 results will be returned</p>
+                </IonNote>
+              </IonCol>
+            </IonRow>
+
+            <IonRow className="ion-justify-content-center">
+              <IonCol size="8">
+                <IonImg src="/assets/DemoRecipeApp/placeholder.png" />
+              </IonCol>
+            </IonRow>
+          </>
+        )}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Search;
--- a/03_source/mobile/src/pages/DemoRecipeApp/components/Ingredient.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/components/Ingredient.jsx
@@ -0,0 +1,16 @@
+import { IonItem, IonLabel } from "@ionic/react";
+import styles from "./Ingredient.module.scss";
+
+export const Ingredient = ({ ingredient }) => {
+
+	return (
+
+		<IonItem lines="full" className={ styles.ingredientItem }>
+			<img alt="ingredient" src={ ingredient.image } className={ styles.ingredientImage } />
+			<IonLabel className="ion-text-wrap ion-margin-start">
+				<h3>{ ingredient.text }</h3>
+				<p>{ ingredient.weight.toFixed(2) }g</p>
+			</IonLabel>
+		</IonItem>
+	);
+}
--- a/03_source/mobile/src/pages/DemoRecipeApp/components/Ingredient.module.scss
+++ b/03_source/mobile/src/pages/DemoRecipeApp/components/Ingredient.module.scss
@@ -0,0 +1,13 @@
+.ingredientImage {
+
+	height: 3rem;
+	width: 3rem;
+	border-radius: 10px;
+	border: 1px solid rgb(172, 172, 172);
+}
+
+.ingredientItem {
+
+	--padding-top: 1rem;
+	--padding-bottom: 1rem;
+}
--- a/03_source/mobile/src/pages/DemoRecipeApp/components/IngredientsModal.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/components/IngredientsModal.jsx
@@ -0,0 +1,30 @@
+import { IonButton, IonButtons, IonContent, IonGrid, IonHeader, IonList, IonPage, IonRow, IonTitle, IonToolbar } from "@ionic/react"
+import { Ingredient } from "./Ingredient";
+
+const IngredientsModal = ({ dismiss, ingredients}) => {
+
+    return (
+
+        <IonPage>
+            <IonHeader>
+                <IonToolbar>
+                    <IonTitle>View Ingredients</IonTitle>
+                    <IonButtons slot="start">
+                        <IonButton color="main" onClick={ dismiss }>Close</IonButton>
+                    </IonButtons>
+                </IonToolbar>
+            </IonHeader>
+
+            <IonContent>
+				<IonList>
+					{ ingredients.map((ingredient, index) => {
+
+						return <Ingredient key={ `ingredient_${ index }` } ingredient={ ingredient } />;
+					})}
+				</IonList>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default IngredientsModal;
--- a/03_source/mobile/src/pages/DemoRecipeApp/components/NutritionModal.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/components/NutritionModal.jsx
@@ -0,0 +1,48 @@
+import { IonButton, IonButtons, IonCardSubtitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from "@ionic/react"
+import NutritionalFact from "./NutritionalFact";
+
+const NutritionModal = ({ dismiss, recipe }) => {
+
+    return (
+
+        <IonPage>
+            <IonHeader>
+                <IonToolbar>
+                    <IonTitle>View Nutrition</IonTitle>
+                    <IonButtons slot="start">
+                        <IonButton color="main" onClick={ dismiss }>Close</IonButton>
+                    </IonButtons>
+                </IonToolbar>
+            </IonHeader>
+
+            <IonContent>
+
+                { (recipe && recipe.digest) &&
+				
+					<IonGrid>
+						<IonRow>
+							<IonCol size="12">
+								<IonCardSubtitle className="ion-text-center" color="main">
+									Based on a serving size of { recipe.totalWeight.toFixed(0) }g
+								</IonCardSubtitle>
+								<NutritionalFact type="calories" amount={ recipe.calories.toFixed(0) } />
+								<NutritionalFact type="fat" amount={ recipe.digest[0].total.toFixed(0) } />
+								<NutritionalFact type="trans_fat" amount={ recipe.digest[0].sub[1].total.toFixed(0) } inset={ true } />
+								<NutritionalFact type="saturated_fat" amount={ recipe.digest[0].sub[0].total.toFixed(0) } inset={ true } />
+								<NutritionalFact type="polyunsaturated_fat" amount={ recipe.digest[0].sub[3].total.toFixed(0) } inset={ true } />
+								<NutritionalFact type="monounsaturated_fat" amount={ recipe.digest[0].sub[2].total.toFixed(0) } inset={ true } />
+								<NutritionalFact type="carbs" amount={ recipe.digest[1].total.toFixed(0) } />
+								<NutritionalFact type="sugar" amount={ recipe.digest[1].sub[2].total.toFixed(0) } inset={ true } />
+								<NutritionalFact type="fibre" amount={ recipe.digest[1].sub[1].total.toFixed(0) } inset={ true } />
+								<NutritionalFact type="sugars_added" amount={ recipe.digest[1].sub[3].total.toFixed(0) } inset={ true } />
+								<NutritionalFact type="protein" amount={ recipe.digest[2].total.toFixed(0) } />
+							</IonCol>
+						</IonRow>
+					</IonGrid>
+				}
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default NutritionModal;
--- a/03_source/mobile/src/pages/DemoRecipeApp/components/NutritionalFact.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/components/NutritionalFact.jsx
@@ -0,0 +1,25 @@
+import { IonCardTitle, IonCol, IonRow } from "@ionic/react";
+
+const NutritionalFact = ({ type, amount, inset }) => {
+
+    const label = type.replace("_", " ").replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
+
+    return (
+
+        <IonRow style={{ borderBottom: "1px solid #242424", padding: "0.5rem" }}>
+            <IonCol size="9">
+                <IonCardTitle style={{ fontSize: "0.9rem", marginLeft: inset ? "1.5rem" : "" }}>
+                    { label }
+                </IonCardTitle>
+            </IonCol>
+
+            <IonCol size="3">
+                <IonCardTitle style={{ fontSize: "0.9rem" }}>
+                    { amount }{ type !== "calories" && "g" }
+                </IonCardTitle>
+            </IonCol>
+        </IonRow>
+    );
+}
+
+export default NutritionalFact;
--- a/03_source/mobile/src/pages/DemoRecipeApp/components/RecipeListItem.jsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/components/RecipeListItem.jsx
@@ -0,0 +1,18 @@
+import { IonItem, IonLabel } from "@ionic/react";
+import { Link } from "react-router-dom";
+import styles from "./RecipeListItem.module.scss";
+
+export const RecipeListItem = ({ recipe, fromSearch = false, fromBookmarks = false }) => (
+
+    <Link to={{ pathname: `/recipe/${ recipe.label.replace(" ", "").toLowerCase() }`, state: { recipe, fromSearch, fromBookmarks }}}>
+        <IonItem detail={ true } lines="full" className={ styles.categoryItem }>
+                                        
+            <img src={ recipe.image } alt="cover" className={ styles.categoryImage } />
+
+            <IonLabel className={ styles.categoryDetails }>
+                <h2>{ recipe.label }</h2>
+                <p>{ recipe.dishType && recipe.dishType[0] }</p>
+            </IonLabel>
+        </IonItem>
+    </Link>
+);
--- a/03_source/mobile/src/pages/DemoRecipeApp/components/RecipeListItem.module.scss
+++ b/03_source/mobile/src/pages/DemoRecipeApp/components/RecipeListItem.module.scss
@@ -0,0 +1,17 @@
+.categoryDetails {
+
+    margin-left: 1rem;
+}
+
+.categoryImage {
+
+    width: 5rem;
+    height: 5rem;
+    border-radius: 10px;
+}
+
+.categoryItem {
+
+    --padding-top: 1.5rem;
+    --padding-bottom: 1.5rem;
+}
--- a/03_source/mobile/src/pages/DemoRecipeApp/index.tsx
+++ b/03_source/mobile/src/pages/DemoRecipeApp/index.tsx
@@ -0,0 +1,41 @@
+import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+
+import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { Route, Redirect } from 'react-router';
+
+import Categories from './AppPages/Categories';
+import Recipe from './AppPages/Recipe';
+import Category from './AppPages/Category';
+import Search from './AppPages/Search';
+import Bookmarks from './AppPages/Bookmarks';
+
+import './style.scss';
+
+function DemoRecipeApp() {
+  return (
+    <IonRouterOutlet className="demo-recipe-app">
+      <Route exact path="/demo-recipe-app/categories">
+        <Categories />
+      </Route>
+      <Route exact path="/demo-recipe-app/recipe/:id">
+        <Recipe />
+      </Route>
+
+      <Route exact path="/demo-recipe-app/category/:name">
+        <Category />
+      </Route>
+
+      <Route exact path="/demo-recipe-app/search">
+        <Search />
+      </Route>
+
+      <Route exact path="/demo-recipe-app/bookmarks">
+        <Bookmarks />
+      </Route>
+
+      <Redirect exact path="/demo-recipe-app" to="/demo-recipe-app/categories" />
+    </IonRouterOutlet>
+  );
+}
+
+export default DemoRecipeApp;
--- a/03_source/mobile/src/pages/DemoRecipeApp/recipes.js
+++ b/03_source/mobile/src/pages/DemoRecipeApp/recipes.js
--- a/03_source/mobile/src/pages/DemoRecipeApp/store/BookmarkStore.js
+++ b/03_source/mobile/src/pages/DemoRecipeApp/store/BookmarkStore.js
@@ -0,0 +1,27 @@
+import { Store } from "pullstate";
+
+const BookmarkStore = new Store({
+    
+    recipes: []
+});
+
+export default BookmarkStore;
+
+export const addToBookmarks = (passedRecipe) => {
+
+    const currentBookmarks = BookmarkStore.getRawState().recipes;
+    const added = !currentBookmarks.includes(passedRecipe);
+
+    BookmarkStore.update(s => {
+
+        if (currentBookmarks.includes(passedRecipe)) {
+            
+            s.recipes = currentBookmarks.filter(bookmark => bookmark !== passedRecipe);
+        } else {
+            
+            s.recipes = [ ...s.recipes, passedRecipe ];
+        }
+    });
+
+    return added;
+}
--- a/03_source/mobile/src/pages/DemoRecipeApp/store/Selectors.js
+++ b/03_source/mobile/src/pages/DemoRecipeApp/store/Selectors.js
@@ -0,0 +1,6 @@
+import { createSelector } from 'reselect';
+
+const getState = state => state;
+
+//  General getters
+export const getBookmarks = createSelector(getState, state => state.recipes);
--- a/03_source/mobile/src/pages/DemoRecipeApp/store/index.js
+++ b/03_source/mobile/src/pages/DemoRecipeApp/store/index.js
@@ -0,0 +1 @@
+export { default as BookmarkStore } from "./BookmarkStore";
--- a/03_source/mobile/src/pages/DemoRecipeApp/style.scss
+++ b/03_source/mobile/src/pages/DemoRecipeApp/style.scss
@@ -0,0 +1,137 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+
+.demo-recipe-app {
+  * {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+
+    --ion-color-main: #1bad64;
+    --ion-color-main-rgb: 27, 173, 100;
+    --ion-color-main-contrast: #ffffff;
+    --ion-color-main-contrast-rgb: 255, 255, 255;
+    --ion-color-main-shade: #189858;
+    --ion-color-main-tint: #32b574;
+
+    --ion-background-color: white;
+    --ion-tab-bar-background: rgb(36, 36, 36);
+    --ion-toolbar-background: rgb(36, 36, 36);
+    --ion-tab-bar-color-selected: rgb(27, 173, 100);
+    --ion-tab-bar-color: rgb(97, 97, 97);
+  }
+
+  .ion-color-main {
+    --ion-color-base: var(--ion-color-main);
+    --ion-color-base-rgb: var(--ion-color-main-rgb);
+    --ion-color-contrast: var(--ion-color-main-contrast);
+    --ion-color-contrast-rgb: var(--ion-color-main-contrast-rgb);
+    --ion-color-shade: var(--ion-color-main-shade);
+    --ion-color-tint: var(--ion-color-main-tint);
+  }
+
+  ion-toolbar ion-title {
+    --color: white;
+  }
+
+  ion-toolbar ion-back-button,
+  ion-toolbar ion-button {
+    --color: rgb(27, 173, 100);
+  }
+
+  ion-content ion-toolbar ion-title {
+    color: rgb(36, 36, 36);
+  }
+
+  * {
+    font-family: 'Ubuntu', sans-serif;
+  }
+
+  ion-toolbar {
+    --border-style: none;
+  }
+
+  .customLoader {
+    --background: var(--ion-toolbar-background);
+    --spinner-color: var(--ion-tab-bar-color-selected);
+    color: white;
+  }
+
+  .customModal {
+    --background: var(--ion-toolbar-background);
+  }
+
+  a {
+    text-decoration: none;
+  }
+}
--- a/03_source/mobile/src/pages/DemoRecipeApp/utils.js
+++ b/03_source/mobile/src/pages/DemoRecipeApp/utils.js
@@ -0,0 +1,9 @@
+const APP_ID = "ea1d37d5";
+const APP_KEY = "fd382a172ba8d6668c0430dc9c14a181";
+
+export const performSearch = async searchTerm => {
+
+	const response = await fetch(`https://api.edamam.com/api/recipes/v2?type=public&q=${ searchTerm }&app_id=${ APP_ID }&app_key=${ APP_KEY }`);
+	const data = await response.json();
+	return data;
+}
--- a/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab1.jsx
+++ b/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab1.jsx
--- a/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab2.jsx
+++ b/03_source/mobile/src/pages/DemoWeatherApp/AppPages/Tab2.jsx
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/CurrentWeather/WeatherProperty.tsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/CurrentWeather/WeatherProperty.tsx
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/CurrentWeather/index.tsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/CurrentWeather/index.tsx
--- a/03_source/mobile/src/pages/DemoDictionaryApp/components/SkeletonDashboard/index.tsx
+++ b/03_source/mobile/src/pages/DemoDictionaryApp/components/SkeletonDashboard/index.tsx
--- a/03_source/mobile/src/pages/DemoWeatherApp/index.tsx
+++ b/03_source/mobile/src/pages/DemoWeatherApp/index.tsx
--- a/03_source/mobile/src/pages/DemoWeatherApp/style.scss
+++ b/03_source/mobile/src/pages/DemoWeatherApp/style.scss
--- a/03_source/mobile/src/pages/WeatherDemo/components/CurrentWeather/WeatherProperty.tsx
+++ b/03_source/mobile/src/pages/WeatherDemo/components/CurrentWeather/WeatherProperty.tsx
@@ -1,62 +0,0 @@
-import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-import { useEffect, useState } from 'react';
-
-export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
-  const [property, setProperty] = useState(false);
-
-  const properties = {
-    wind: {
-      isIcon: false,
-      icon: '/assets/WeatherDemo/wind.png',
-      alt: 'wind',
-      label: 'Wind',
-      value: `${currentWeather.current.wind_mph}mph`,
-    },
-    feelsLike: {
-      isIcon: true,
-      icon: thermometerOutline,
-      alt: 'feels like',
-      label: 'Feels like',
-      value: `${currentWeather.current.feelslike_c}°C`,
-    },
-    indexUV: {
-      isIcon: true,
-      icon: sunnyOutline,
-      alt: 'index uv',
-      label: 'Index UV',
-      value: currentWeather.current.uv,
-    },
-    pressure: {
-      isIcon: true,
-      icon: pulseOutline,
-      alt: 'pressure',
-      label: 'Pressure',
-      value: `${currentWeather.current.pressure_mb} mbar`,
-    },
-  };
-
-  useEffect(() => {
-    setProperty(properties[type]);
-  }, [type]);
-
-  return (
-    <IonCol size="6">
-      <IonRow className="ion-justify-content-center ion-align-items-center">
-        <IonCol size="3">
-          {!property.isIcon && (
-            <img alt={property.alt} src={property.icon} height="32" width="32" />
-          )}
-          {property.isIcon && (
-            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
-          )}
-        </IonCol>
-
-        <IonCol size="9">
-          <IonCardSubtitle>{property.label}</IonCardSubtitle>
-          <IonNote>{property.value}</IonNote>
-        </IonCol>
-      </IonRow>
-    </IonCol>
-  );
-};
--- a/03_source/mobile/src/pages/WeatherDemo/components/CurrentWeather/index.tsx
+++ b/03_source/mobile/src/pages/WeatherDemo/components/CurrentWeather/index.tsx
@@ -1,48 +0,0 @@
-import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
-import { WeatherProperty } from './WeatherProperty';
-
-export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            {currentWeather.location.region},{' '}
-            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <img
-            alt="condition"
-            src={currentWeather.current.condition.icon.replace('//', 'https://')}
-          />
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          {currentWeather.current.temp_c}&#8451;
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <WeatherProperty type="wind" currentWeather={currentWeather} />
-            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
-            <WeatherProperty type="pressure" currentWeather={currentWeather} />
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);
--- a/03_source/mobile/src/pages/WeatherDemo/components/SkeletonDashboard/index.tsx
+++ b/03_source/mobile/src/pages/WeatherDemo/components/SkeletonDashboard/index.tsx
@@ -1,117 +0,0 @@
-import {
-  IonCard,
-  IonCardContent,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonCol,
-  IonGrid,
-  IonIcon,
-  IonNote,
-  IonRow,
-  IonSkeletonText,
-  IonText,
-  IonThumbnail,
-} from '@ionic/react';
-import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
-
-export const SkeletonDashboard = () => (
-  <IonGrid>
-    <IonCard>
-      <IonCardContent className="ion-text-center">
-        <IonText color="primary">
-          <h1>
-            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-          </h1>
-        </IonText>
-
-        <div className="ion-margin-top">
-          <IonThumbnail>
-            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
-          </IonThumbnail>
-
-          <IonText color="dark">
-            <h1 style={{ fontWeight: 'bold' }}>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </h1>
-          </IonText>
-
-          <IonText color="medium">
-            <p>
-              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-            </p>
-          </IonText>
-        </div>
-
-        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
-          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
-        </IonCardTitle>
-
-        <IonGrid className="ion-margin-top">
-          <IonRow>
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Wind</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Feels like</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-
-          <IonRow className="ion-margin-top">
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Index UV</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-
-            <IonCol size="6">
-              <IonRow className="ion-justify-content-center ion-align-items-center">
-                <IonCol size="3">
-                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
-                </IonCol>
-
-                <IonCol size="9">
-                  <IonCardSubtitle>Pressure</IonCardSubtitle>
-                  <IonNote>
-                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
-                  </IonNote>
-                </IonCol>
-              </IonRow>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
-    </IonCard>
-  </IonGrid>
-);
--- a/03_source/mobile/src/paths.ts
+++ b/03_source/mobile/src/paths.ts
@@ -31,5 +31,6 @@ const paths = {
  DEMO_QR_SCANNER: '/demo-qr-scanner',
  DEMO_SHOP_APP_UI: '/demo-shop-app-ui',
  DEMO_DICTIONARY_APP: '/demo-dictionary-app',
+  DEMO_RECIPE_APP: '/demo-recipe-app',
 };
 export default paths;
Author	SHA1	Message	Date
louiscklaw	82507b4b31	refactor: rename DemoRecipeApp, redesign UI with recipe categories, bookmarks, and detailed recipe views	2025-06-04 18:31:12 +08:00
louiscklaw	85651ff204	"refactor: rename DemoWeatherApp to DemoDictionaryApp, update UI components, add favourites tab, and enhance search functionality"	2025-06-04 18:08:28 +08:00
louiscklaw	9caca30e1e	update demo-dictionary-app,	2025-06-04 18:04:47 +08:00
				`@@ -0,0 +1 @@`
				<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
				`@@ -0,0 +1 @@`
				`export { default as WordStore } from "./WordStore";`
				`@@ -0,0 +1 @@`
				`export { default as BookmarkStore } from "./BookmarkStore";`