update adding demo app,

2025-06-04 14:46:31 +08:00
parent b78709db9b
commit dff07ddcb0
82 changed files with 3552 additions and 97 deletions
--- a/03_source/mobile/src/App.tsx
+++ b/03_source/mobile/src/App.tsx
@@ -64,6 +64,8 @@ import ServiceAgreement from './pages/ServiceAgreement';
 import paths from './paths';
 import PrivacyAgreement from './pages/PrivacyAgreement';
 import AppRoute from './AppRoute';
+import DemoReactShop from './pages/DemoReactShop';
+import DemoWeatherApp from './pages/WeatherDemo';

 setupIonicReact();

@@ -121,6 +123,8 @@ const IonicApp: React.FC<IonicAppProps> = ({

            {/*  */}
            <Route path="/tabs" render={() => <MainTabs />} />
+            <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} />
+            <Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />

            {/*  */}
            <Route path="/account" component={Account} />
--- a/03_source/mobile/src/AppRoute.tsx
+++ b/03_source/mobile/src/AppRoute.tsx
@@ -7,14 +7,12 @@ import NotImplemented from './pages/NotImplemented';
 import EventDetail from './pages/EventDetail';
 import MemberProfile from './pages/MemberProfile';
 import paths from './paths';
-import Helloworld from './pages/Helloworld';
 import Settings from './pages/Settings';
 import ChangeLanguage from './pages/ChangeLanguage';
 import ServiceAgreement from './pages/ServiceAgreement';
 import PrivacyAgreement from './pages/PrivacyAgreement';
 // import OrderDetails from './pages/OrderDetail';
 import OrderDetail from './pages/OrderDetail';
-import SpeakerDetail from './pages/SpeakerDetail';

 const AppRoute: React.FC = () => {
  return (
@@ -34,6 +32,9 @@ const AppRoute: React.FC = () => {
      <Route exact={true} path={paths.CHANGE_LANGUAGE} component={ChangeLanguage} />
      <Route exact={true} path={paths.SERVICE_AGREEMENT} component={ServiceAgreement} />
      <Route exact={true} path={paths.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
+
+      {/* TODO: review DemoReactShop to fix */}
+      {/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} exact={true} /> */}
    </>
  );
 };
--- a/03_source/mobile/src/TabAppRoute.tsx
+++ b/03_source/mobile/src/TabAppRoute.tsx
@@ -10,6 +10,9 @@ import Favourites from './pages/Favourites';
 import MyProfile from './pages/MyProfile';
 import EventList from './pages/EventList';
 import Helloworld from './pages/Helloworld';
+// import WeatherDemo from './pages/WeatherDemo/Tab1';
+import DemoList from './pages/DemoList';
+// import DemoReactShop from './pages/DemoReactShop';

 const TabAppRoute: React.FC = () => {
  return (
@@ -33,6 +36,12 @@ const TabAppRoute: React.FC = () => {

      {/*  */}
      <Route path={paths.PROFILE} render={() => <MyProfile />} exact={true} />
+
+      {/*  */}
+      <Route path="/tabs/demo-list" render={() => <DemoList />} exact={true} />
+
+      {/*  */}
+      <Route path="/tabs/helloworld" render={() => <Helloworld />} exact={true} />
    </>
  );
 };
--- a/03_source/mobile/src/pages/DemoList/TestContent.tsx
+++ b/03_source/mobile/src/pages/DemoList/TestContent.tsx
@@ -0,0 +1,13 @@
+import { format } from 'date-fns';
+
+export const TestContent = {
+  eventDate: format(new Date(), 'yyyy-MM-dd'),
+  title: 'helloworld',
+  price: 123,
+  currency: 'HKD',
+  duration_m: 480,
+  ageBottom: 12,
+  ageTop: 48,
+  location: 'Hong Kong Island',
+  avatar: 'https://www.ionics.io/img/ionic-logo.png',
+};
--- a/03_source/mobile/src/pages/DemoList/index.tsx
+++ b/03_source/mobile/src/pages/DemoList/index.tsx
@@ -0,0 +1,271 @@
+// REQ0054/user-setting
+//
+// PURPOSE:
+// - Provides functionality view user profile
+//
+// RULES:
+// - T.B.A.
+//
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonPage,
+  IonButtons,
+  IonMenuButton,
+  IonGrid,
+  IonRow,
+  IonCol,
+  useIonRouter,
+  IonButton,
+  IonIcon,
+  IonPopover,
+  IonAvatar,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonSearchbar,
+  useIonModal,
+  IonInput,
+  IonNote,
+  IonText,
+} from '@ionic/react';
+import SpeakerItem from '../../components/SpeakerItem';
+import { Speaker } from '../../models/Speaker';
+import { Session } from '../../models/Schedule';
+import { connect } from '../../data/connect';
+import * as selectors from '../../data/selectors';
+import '../SpeakerList.scss';
+import { getEvents } from '../../api/getEvents';
+import { format } from 'date-fns';
+import { Event } from './types';
+import {
+  alertCircleOutline,
+  alertOutline,
+  cart,
+  chatbubbleOutline,
+  chevronBackOutline,
+  chevronForward,
+  chevronForwardOutline,
+  createOutline,
+  documentTextOutline,
+  gift,
+  giftOutline,
+  heart,
+  languageOutline,
+  listCircle,
+  menuOutline,
+  settingsOutline,
+  shareSocialOutline,
+  sunny,
+  trashOutline,
+} from 'ionicons/icons';
+import AboutPopover from '../../components/AboutPopover';
+import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces';
+import paths from '../../paths';
+import { logoutUser, setAccessToken, setIsLoggedIn } from '../../data/user/user.actions';
+
+interface OwnProps {}
+
+interface StateProps {
+  speakers: Speaker[];
+  speakerSessions: { [key: string]: Session[] };
+}
+
+interface DispatchProps {
+  logoutUser: typeof logoutUser;
+  setAccessToken: typeof setAccessToken;
+  setIsLoggedIn: typeof setIsLoggedIn;
+}
+
+interface SettingsProps extends OwnProps, StateProps, DispatchProps {}
+
+const SettingsPage: React.FC<SettingsProps> = ({
+  speakers,
+  speakerSessions,
+  logoutUser,
+  setAccessToken,
+  setIsLoggedIn,
+}) => {
+  const [events, setEvents] = useState<Event[] | []>([]);
+  const [showPopover, setShowPopover] = useState(false);
+  const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  const router = useIonRouter();
+
+  useEffect(() => {
+    getEvents().then(({ data }) => {
+      console.log({ data });
+      setEvents(data);
+    });
+  }, []);
+
+  function handleBackButtonClick() {
+    router.goBack();
+  }
+
+  function handleLanguageClick() {
+    router.push(paths.CHANGE_LANGUAGE);
+  }
+
+  function handleNotImplementedClick() {
+    router.push(paths.NOT_IMPLEMENTED);
+  }
+
+  function handleDemoPageClick() {
+    router.push(paths.DEMO_PAGE);
+  }
+
+  function handleServiceAgreementClick() {
+    router.push(paths.SERVICE_AGREEMENT);
+  }
+
+  function handlePrivacyAgreementClick() {
+    router.push(paths.PRIVACY_AGREEMENT);
+  }
+
+  const [showLogoutConfirmModal, setShowLogoutConfirmModal] = useState<boolean>(false);
+  function handleConfirmLogoutClick() {
+    setShowLogoutConfirmModal(true);
+  }
+
+  function handleLogoutClick() {
+    setAccessToken();
+    setIsLoggedIn(false);
+
+    router.push('/tabs', 'forward', 'replace');
+
+    setShowLogoutConfirmModal(false);
+  }
+  function handleLogoutCancel() {
+    setShowLogoutConfirmModal(false);
+  }
+
+  function handleDemoWeatherApp() {
+    router.push(paths.DEMO_WEATHER_APP);
+  }
+
+  function handleDemoReactShopClick() {
+    router.push(paths.DEMO_REACT_SHOP);
+  }
+
+  return (
+    <IonPage id="speaker-list">
+      <IonHeader translucent={true} className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            {/* <IonMenuButton /> */}
+            <IonButton shape="round" onClick={() => handleBackButtonClick()}>
+              <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+
+          <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+            <IonIcon icon={settingsOutline} size="large"></IonIcon>
+            <IonTitle>Setting</IonTitle>
+          </div>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen={true}>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Setting</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonList inset={false}>
+          <IonItem button={true} onClick={() => handleDemoWeatherApp()}>
+            <IonIcon slot="start" icon={sunny} size="large"></IonIcon>
+            <IonLabel>Weather App</IonLabel>
+            <IonIcon icon={chevronForwardOutline}></IonIcon>
+          </IonItem>
+        </IonList>
+
+        <IonList inset={false}>
+          <IonItem button={true} onClick={() => handleDemoReactShopClick()}>
+            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
+            <IonLabel>Demo React Shop</IonLabel>
+            <IonIcon icon={chevronForwardOutline}></IonIcon>
+          </IonItem>
+        </IonList>
+      </IonContent>
+
+      {/* REQ0058/logout */}
+      <IonModal
+        isOpen={showLogoutConfirmModal}
+        initialBreakpoint={0.5}
+        breakpoints={[0, 0.25, 0.5, 0.75]}
+      >
+        <IonContent
+          className="ion-padding"
+          style={{
+            '--background': 'pink',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: '1rem',
+            }}
+          >
+            <div style={{ marginTop: '1rem', width: '50px', height: '50px' }}>
+              <IonIcon icon={alertCircleOutline} />
+            </div>
+            <div
+              style={{
+                textAlign: 'center',
+                fontWeight: '1rem',
+                fontSize: '1.5rem',
+                marginTop: '0.5rem',
+                marginBottom: '0.5rem',
+              }}
+            >
+              Logout
+            </div>
+            <div
+              style={{
+                textAlign: 'center',
+                fontWeight: '1rem',
+                marginTop: '0.5rem',
+                marginBottom: '0.5rem',
+              }}
+            >
+              Unable to receive notifications after logging out
+            </div>
+
+            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+              <IonButton size="large" fill="outline" shape="round" onClick={handleLogoutCancel}>
+                Cancel
+              </IonButton>
+              <IonButton size="large" shape="round" onClick={handleLogoutClick}>
+                Logout
+              </IonButton>
+            </div>
+          </div>
+        </IonContent>
+      </IonModal>
+    </IonPage>
+  );
+};
+
+export default connect<OwnProps, StateProps, DispatchProps>({
+  mapStateToProps: (state) => ({
+    speakers: selectors.getSpeakers(state),
+    speakerSessions: selectors.getSpeakerSessions(state),
+  }),
+  mapDispatchToProps: {
+    logoutUser,
+    setAccessToken,
+    setIsLoggedIn,
+  },
+  component: React.memo(SettingsPage),
+});
--- a/03_source/mobile/src/pages/DemoList/style.scss
+++ b/03_source/mobile/src/pages/DemoList/style.scss
@@ -0,0 +1,103 @@
+#about-page {
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  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/img/about/madison.jpg');
+  }
+
+  .about-header .austin {
+    background-image: url('/assets/img/about/austin.jpg');
+  }
+
+  .about-header .chicago {
+    background-image: url('/assets/img/about/chicago.jpg');
+  }
+
+  .about-header .seattle {
+    background-image: url('/assets/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;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}
--- a/03_source/mobile/src/pages/DemoList/types.ts
+++ b/03_source/mobile/src/pages/DemoList/types.ts
@@ -0,0 +1,14 @@
+export interface Event {
+  eventDate: Date;
+  joinMembers: undefined;
+  title: string;
+  price: number;
+  currency: string;
+  duration_m: number;
+  ageBottom: number;
+  ageTop: number;
+  location: string;
+  avatar: string;
+  //
+  id: string;
+}
--- a/03_source/mobile/src/pages/DemoReactShop/Categories.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/Categories.jsx
@@ -0,0 +1,89 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonRouterLink,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import {
+  checkmarkOutline,
+  chevronBackOutline,
+  chevronDownCircleOutline,
+  closeOutline,
+  heart,
+  languageOutline,
+  menuOutline,
+} from 'ionicons/icons';
+import { capitalize, productInfo } from '../utils';
+
+const Categories = () => {
+  const categories = Object.keys(productInfo);
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start" onClick={handleBackClick}>
+            <IonButton shape="round" id="open-modal" expand="block">
+              <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Ionic Shop</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large" className="page-title">
+              <IonLabel>ionic</IonLabel>
+              <IonNote>shop</IonNote>
+            </IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow>
+          {categories.map((category, idx) => (
+            <IonRouterLink key={idx} routerLink={`/categories/${category.toLowerCase()}`}>
+              <div style={{ display: 'flex', color: 'white' }}>
+                <img src={productInfo[category].coverImage} alt="cover" />
+                <p
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                    width: '50%',
+                    paddingTop: '0.5rem',
+                    paddingBottom: '0.5rem',
+                    margin: '0 auto',
+                    fontSize: '2rem',
+                  }}
+                >
+                  {capitalize(category)}
+                </p>
+              </div>
+            </IonRouterLink>
+
+            // <IonButton key={c} routerLink={`/categories/${c.toLowerCase()}`}>{capitalize(c)}</IonButton>
+          ))}
+        </IonRow>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Categories;
--- a/03_source/mobile/src/pages/DemoReactShop/Categories.module.scss
+++ b/03_source/mobile/src/pages/DemoReactShop/Categories.module.scss
@@ -0,0 +1,18 @@
+.categoryContainer {
+  display: flex;
+  color: white;
+}
+
+.categoryContainer p {
+  display: flex;
+  justify-items: center;
+  justify-content: center;
+  position: absolute;
+
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 50%;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin: 0 auto;
+  font-size: 2rem;
+}
--- a/03_source/mobile/src/pages/DemoReactShop/Category.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/Category.jsx
@@ -0,0 +1,68 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonRouterLink,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { chevronBack } from 'ionicons/icons';
+import { useParams } from 'react-router';
+import { capitalize, productInfo } from '../utils';
+
+import styles from './Categories.module.scss';
+
+const Category = () => {
+  const router = useIonRouter();
+  const { category } = useParams();
+  const productTypes = Object.keys(productInfo[category].productTypes);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton className="custom-back" onClick={() => router.goBack()}>
+              <IonIcon icon={chevronBack} />
+              <IonLabel>Back</IonLabel>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>{category}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large" className="page-title">
+              <IonNote>shop</IonNote>
+              <IonLabel>{category}</IonLabel>
+            </IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow>
+          {productTypes.map((product) => (
+            <IonRouterLink
+              key={`${category}_${product}`}
+              routerLink={`/categories/${category}/${product.toLowerCase().replaceAll(' ', '_')}`}
+            >
+              <div className={styles.categoryContainer}>
+                <img src={productInfo[category].productTypes[product].coverImage} alt="cover" />
+                <p>{capitalize(product)}</p>
+              </div>
+            </IonRouterLink>
+          ))}
+        </IonRow>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Category;
--- a/03_source/mobile/src/pages/DemoReactShop/Favourites.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/Favourites.jsx
@@ -0,0 +1,102 @@
+import {
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonLabel,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  useIonModal,
+} from '@ionic/react';
+import { heartOutline } from 'ionicons/icons';
+import { useStoreState } from 'pullstate';
+import { useState } from 'react';
+import { ProductModal } from '../components/ProductModal';
+import { FavouritesStore } from '../store';
+import { getFavourites } from '../store/Selectors';
+
+const Favourites = () => {
+  const favourites = useStoreState(FavouritesStore, getFavourites);
+
+  const [selectedProduct, setSelectedProduct] = useState([]);
+  const [presentProductModal, dismissProductModal] = useIonModal(ProductModal, {
+    dismiss: () => dismissProductModal(),
+    product: selectedProduct,
+  });
+
+  const handleProductModal = (product) => {
+    setSelectedProduct(product);
+    presentProductModal();
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Favourites</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Favourites</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonGrid className="animate__animated">
+          <IonRow>
+            {favourites.map((product, index) => {
+              if (
+                product.image !== null &&
+                product.image !== '' &&
+                !product.image.includes('Placeholder')
+              ) {
+                return (
+                  <IonCol
+                    onClick={() => handleProductModal(product)}
+                    key={index}
+                    size="6"
+                    sizeXs="6"
+                    sizeSm="3"
+                    sizeMd="3"
+                    sizeXl="2"
+                  >
+                    <IonImg src={product.image} style={{ marginBottom: '0.25rem' }} />
+                    <IonLabel>
+                      <h3>{product.title}</h3>
+                      <p>{product.price}</p>
+                    </IonLabel>
+                  </IonCol>
+                );
+              } else return null;
+            })}
+          </IonRow>
+
+          {favourites.length === 0 && (
+            <IonRow className="ion-text-center ion-justify-content-center">
+              <IonCol size="10">
+                <IonText color="dark">
+                  <h1>No favourites yet</h1>
+                </IonText>
+
+                <IonText color="medium">
+                  <h3>
+                    Add some by clicking the <IonIcon icon={heartOutline} color="danger" /> icon on
+                    a product
+                  </h3>
+                </IonText>
+              </IonCol>
+            </IonRow>
+          )}
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Favourites;
--- a/03_source/mobile/src/pages/DemoReactShop/Helloworld.tsx
+++ b/03_source/mobile/src/pages/DemoReactShop/Helloworld.tsx
@@ -0,0 +1,37 @@
+// REQ0041/home_discover_event_tab
+
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonButtons,
+  IonButton,
+  IonIcon,
+  IonTitle,
+  IonContent,
+} from '@ionic/react';
+import { menuOutline } from 'ionicons/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import './style.scss';
+
+const Helloworld: React.FC = () => {
+  return (
+    <IonPage id="speaker-list">
+      <IonHeader translucent={true} className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="end">
+            {/* <IonMenuButton /> */}
+            <IonButton shape="round" id="events-open-modal" expand="block">
+              <IonIcon slot="icon-only" icon={menuOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Discover Events</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen={true}>Helloworld</IonContent>
+    </IonPage>
+  );
+};
+
+export default Helloworld;
--- a/03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx
+++ b/03_source/mobile/src/pages/DemoReactShop/MainTabs.tsx
@@ -0,0 +1,81 @@
+// REQ0116/main-tab
+
+import React from 'react';
+import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
+import { Route, Redirect } from 'react-router';
+import { calendar, location, informationCircle, people } from 'ionicons/icons';
+import SchedulePage from '../SchedulePage';
+import SpeakerList from '../SpeakerList';
+import SpeakerDetail from '../SpeakerDetail';
+import SessionDetail from '../SessionDetail';
+import MapView from '../MapView';
+import About from '../About';
+import EventList from '../EventList';
+import MembersNearByList from '../MembersNearByList';
+import OrderList from '../OrderList';
+import MyProfile from '../MyProfile';
+import MessageList from '../MessageList';
+import paths from '../../paths';
+import Favourites from '../Favourites';
+import TabAppRoute from '../../TabAppRoute';
+
+interface MainTabsProps {}
+
+const MainTabs: React.FC<MainTabsProps> = () => {
+  return (
+    <IonTabs>
+      <IonRouterOutlet>
+        {/* REQ0117/default-route */}
+        <Redirect exact path="/tabs" to="/tabs/events" />
+        {/*
+          Using the render method prop cuts down the number of renders your components will have due to route changes.
+          Use the component prop when your component depends on the RouterComponentProps passed in automatically.
+        */}
+        <Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
+        <Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
+        <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} />
+
+        <Route path="/tabs/schedule/:id" component={SessionDetail} />
+        <Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
+        <Route path="/tabs/map" render={() => <MapView />} exact={true} />
+
+        <Route path="/tabs/about" render={() => <About />} exact={true} />
+
+        {/*  */}
+        <TabAppRoute />
+      </IonRouterOutlet>
+      {/*  */}
+      <IonTabBar slot="bottom">
+        {/*
+        <IonTabButton tab="speakers" href={'/tabs/speakers'}>
+          <IonIcon icon={calendar} />
+          <IonLabel>Speakers</IonLabel>
+        </IonTabButton>
+        */}
+
+        <IonTabButton tab="events" href={paths.EVENT_LIST}>
+          <IonIcon icon={calendar} />
+          <IonLabel>Event</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="nearby" href={paths.NEARBY_LIST}>
+          <IonIcon icon={people} />
+          <IonLabel>Nearby</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="orders" href={paths.ORDERS_LIST}>
+          <IonIcon icon={location} />
+          <IonLabel>Order</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="message" href={paths.MESSAGE_LIST}>
+          <IonIcon icon={informationCircle} />
+          <IonLabel>Message</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="my_profile" href={paths.PROFILE}>
+          <IonIcon icon={informationCircle} />
+          <IonLabel>Profile</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+};
+
+export default MainTabs;
--- a/03_source/mobile/src/pages/DemoReactShop/ProductType.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/ProductType.jsx
@@ -0,0 +1,211 @@
+import {
+  IonBreadcrumb,
+  IonBreadcrumbs,
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+  useIonModal,
+  useIonRouter,
+} from '@ionic/react';
+import { chevronBack, filter } from 'ionicons/icons';
+import { useRef } from 'react';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
+import { FilterModal } from '../components/FilterModal';
+import { ProductModal } from '../components/ProductModal';
+import { capitalize, productInfo } from '../utils';
+
+const ProductType = () => {
+  const router = useIonRouter();
+  const { category, type } = useParams();
+  const productsRef = useRef();
+
+  const [products, setProducts] = useState([]);
+  const [filteredProducts, setFilteredProducts] = useState([]);
+  const [filterCriteria, setFilterCriteria] = useState('None');
+
+  const filters = productInfo[category].productTypes[type].filters;
+  const searchPlaceholder = productInfo[category].productTypes[type].searchPlaceholder;
+
+  const [selectedProduct, setSelectedProduct] = useState([]);
+  const [presentProductModal, dismissProductModal] = useIonModal(ProductModal, {
+    dismiss: () => dismissProductModal(),
+    category,
+    type,
+    product: selectedProduct,
+  });
+
+  const handleProductModal = (product) => {
+    setSelectedProduct(product);
+    presentProductModal();
+  };
+
+  const [present, dismiss] = useIonModal(FilterModal, {
+    dismiss: () => dismiss(),
+
+    filterCriteria,
+    setFilterCriteria,
+    productsRef,
+    filters,
+  });
+
+  useEffect(() => {
+    const getProducts = async () => {
+      const response = await fetch(`/data/${category}/${type}.json`);
+      const data = await response.json();
+      setProducts(data);
+      setFilteredProducts(data);
+    };
+
+    getProducts();
+  }, [category, type]);
+
+  const openModal = () => {
+    present({
+      breakpoints: [0, 0.25],
+      initialBreakpoint: 0.25,
+      backdropBreakpoint: 0,
+    });
+  };
+
+  const performSearch = (e) => {
+    const searchCriteria = e.target.value.toLowerCase();
+    let tempFilteredProducts = [...products];
+
+    if (searchCriteria !== '') {
+      tempFilteredProducts = tempFilteredProducts.filter((product) =>
+        product.title.toLowerCase().includes(searchCriteria)
+      );
+      setFilteredProducts(tempFilteredProducts);
+    } else {
+      setFilteredProducts(products);
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton className="custom-back" onClick={() => router.goBack()}>
+              <IonIcon icon={chevronBack} />
+              <IonLabel>Back</IonLabel>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>{capitalize(type)}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large" className="page-title">
+              <IonNote>shop</IonNote>
+              <IonLabel>{category}</IonLabel>
+            </IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-align-items-center ion-text-center ion-justify-content-between">
+          <IonCol size="10">
+            <IonBreadcrumbs>
+              <IonBreadcrumb active={false} color="medium">
+                {capitalize(category)}
+              </IonBreadcrumb>
+              <IonBreadcrumb
+                separator={false}
+                color={filterCriteria !== 'None' && 'medium'}
+                active={filterCriteria === 'None' ? true : false}
+              >
+                {capitalize(type)}
+              </IonBreadcrumb>
+              {filterCriteria !== 'None' && (
+                <IonBreadcrumb color="dark" active={true}>
+                  <IonIcon slot="start" icon={filter} />
+                  {filterCriteria}
+                </IonBreadcrumb>
+              )}
+            </IonBreadcrumbs>
+          </IonCol>
+
+          <IonCol size="2" className="ion-text-right">
+            <div
+              onClick={openModal}
+              style={{
+                display: 'flex',
+                color: '#828282',
+                float: 'right',
+                padding: '0.5rem',
+                backgroundColor: '#F4F5F8',
+                marginRight: '0.5rem',
+                width: 'fit-content',
+              }}
+            >
+              <IonIcon icon={filter} />
+              <IonLabel>&nbsp;Filter</IonLabel>
+            </div>
+          </IonCol>
+        </IonRow>
+
+        <IonSearchbar
+          color="light"
+          animated={true}
+          style={{ '--border-radius': 'none' }}
+          placeholder={`Try '${searchPlaceholder}'`}
+          onIonChange={(e) => performSearch(e)}
+        />
+
+        <IonGrid ref={productsRef} className="animate__animated">
+          <IonRow>
+            {filteredProducts.map((product, index) => {
+              if (
+                product.image !== null &&
+                product.image !== '' &&
+                !product.image.includes('Placeholder')
+              ) {
+                return (
+                  <IonCol
+                    onClick={() => handleProductModal(product)}
+                    key={index}
+                    size="6"
+                    sizeXs="6"
+                    sizeSm="3"
+                    sizeMd="3"
+                    sizeXl="2"
+                    style={{
+                      display:
+                        (filterCriteria !== 'None' &&
+                          product.title.toLowerCase().includes(filterCriteria.toLowerCase())) ||
+                        filterCriteria === 'None'
+                          ? 'block'
+                          : 'none',
+                    }}
+                  >
+                    <IonImg src={product.image} style={{ marginBottom: '0.25rem' }} />
+                    <IonLabel>
+                      <h3>{product.title}</h3>
+                      <p>{product.price}</p>
+                    </IonLabel>
+                  </IonCol>
+                );
+              } else return null;
+            })}
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default ProductType;
--- a/03_source/mobile/src/pages/DemoReactShop/components/AddToCartButton.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/AddToCartButton.jsx
@@ -0,0 +1,58 @@
+import { CreateAnimation, IonButton, IonIcon } from "@ionic/react";
+import { cartOutline } from "ionicons/icons";
+import { useRef, useState } from "react";
+import { addToCart } from "../store/CartStore";
+
+export const AddToCartButton = ({product}) => {
+
+	const animationRef = useRef();
+	const [hidden, setHidden] = useState(true);
+
+	const floatStyle = {
+
+		display: hidden ? "none" : "",
+		position: "absolute"
+	};
+
+	const floatGrowAnimation = {
+
+		property: "transform",
+		fromValue: "translateY(0) scale(1)",
+		toValue: "translateY(-55px) scale(1.5)"
+	};
+
+	const colorAnimation = {
+
+		property: "color",
+		fromValue: "green",
+		toValue: "green"
+	};
+
+	const mainAnimation = {
+
+		duration: 1500,
+		iterations: "1",
+		fromTo: [ floatGrowAnimation, colorAnimation ],
+		easing: "cubic-bezier(0.25, 0.7, 0.25, 0.7)"
+	};
+
+	const handleAddToCart = async product => {
+
+		setHidden(false);
+		await animationRef.current.animation.play();
+		setHidden(true);
+		addToCart(product);
+	}
+
+	return (
+
+		<IonButton color="dark" expand="full" onClick={() => handleAddToCart(product)}>
+			<IonIcon icon={cartOutline} />&nbsp;
+			Add to Cart
+
+			<CreateAnimation ref={animationRef} {...mainAnimation}>
+				<IonIcon icon={cartOutline} size="large" style={floatStyle} />
+			</CreateAnimation>
+		</IonButton>
+	);
+}
--- a/03_source/mobile/src/pages/DemoReactShop/components/Breadcrumbs.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/Breadcrumbs.jsx
@@ -0,0 +1,23 @@
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from "@ionic/react";
+import { fastFoodOutline } from "ionicons/icons";
+import { useState } from "react";
+
+export const Breadcrumbs = () => {
+
+  const [maxItems, setMaxItems] = useState(2);
+
+  const handleClick = () => {
+
+    setMaxItems(undefined);
+  }
+
+	return (
+
+    <IonBreadcrumbs maxItems={maxItems} onIonCollapsedClick={handleClick}>
+      <IonBreadcrumb color="medium">Page 1</IonBreadcrumb>
+      <IonBreadcrumb color="medium">Page 2</IonBreadcrumb>
+      <IonBreadcrumb color="medium">Page 3</IonBreadcrumb>
+      <IonBreadcrumb>Page 4</IonBreadcrumb>
+    </IonBreadcrumbs>
+	);
+}
--- a/03_source/mobile/src/pages/DemoReactShop/components/CartModal.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/CartModal.jsx
@@ -0,0 +1,109 @@
+import { useStoreState } from 'pullstate';
+import { useEffect, useState } from 'react';
+import { CartStore } from '../store';
+import { addToCart } from '../store/CartStore';
+import { getCart } from '../store/Selectors';
+
+const {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButtons,
+  IonIcon,
+  IonContent,
+  IonGrid,
+  IonRow,
+  IonItem,
+  IonLabel,
+  IonText,
+  IonThumbnail,
+  IonFooter,
+  IonCol,
+  IonButton,
+  IonItemSliding,
+  IonItemOptions,
+  IonItemOption,
+} = require('@ionic/react');
+const { close } = require('ionicons/icons');
+
+export const CartModal = (props) => {
+  const cart = useStoreState(CartStore, getCart);
+  const [totalPrice, setTotalPrice] = useState(0);
+
+  useEffect(() => {
+    let total = 0;
+    cart.forEach((item) => (total += parseInt(item.price.replace('£', ''))));
+    setTotalPrice(total);
+  }, [cart]);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Cart</IonTitle>
+          <IonButtons slot="end" onClick={props.close}>
+            <IonIcon icon={close} size="large" />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonGrid>
+          <IonRow style={{ borderBottom: '1px solid black' }} className="ion-margin-bottom">
+            <IonItem lines="none">
+              <IonLabel>
+                <h1>{cart.length} products in your cart</h1>
+                <IonText color="medium">
+                  <h2>Review products and checkout</h2>
+                </IonText>
+              </IonLabel>
+            </IonItem>
+          </IonRow>
+        </IonGrid>
+
+        {cart.map((item, index) => (
+          <IonItemSliding>
+            <IonItem
+              key={index}
+              lines="none"
+              className="ion-padding-end"
+              style={{ paddingTop: '0.75rem', paddingBottom: '0.75rem' }}
+            >
+              <IonThumbnail>
+                <img src={item.image} alt="item" />
+              </IonThumbnail>
+              <IonLabel className="ion-padding-start ion-text-wrap">
+                <h2>{item.title}</h2>
+                <p>{item.price}</p>
+              </IonLabel>
+            </IonItem>
+
+            <IonItemOptions side="end">
+              <IonItemOption color="danger" onClick={() => addToCart(item)}>
+                Remove
+              </IonItemOption>
+            </IonItemOptions>
+          </IonItemSliding>
+        ))}
+      </IonContent>
+
+      <IonFooter
+        className="ion-padding-bottom ion-padding-start ion-padding-end"
+        style={{ paddingBottom: '3rem' }}
+      >
+        <IonRow className="ion-justify-content-between">
+          <IonCol size="8">
+            <h1>Total</h1>
+          </IonCol>
+
+          <IonCol size="4">
+            <h1>£{totalPrice.toFixed(2)}</h1>
+          </IonCol>
+        </IonRow>
+        <IonButton expand="block" color="dark">
+          Checkout &rarr;
+        </IonButton>
+      </IonFooter>
+    </IonPage>
+  );
+};
--- a/03_source/mobile/src/pages/DemoReactShop/components/FilterModal.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/FilterModal.jsx
@@ -0,0 +1,36 @@
+import { IonButton, IonCol, IonContent, IonGrid, IonHeader, IonRow, IonTitle, IonToolbar } from "@ionic/react";
+
+export const FilterModal = ({productsRef, filterCriteria, setFilterCriteria, dismiss, filters}) => {
+
+    const filterProducts = async filter => {
+
+      await productsRef.current.classList.add("animate__fadeOutLeft");
+
+      setTimeout(() => {
+        productsRef.current.classList.remove("animate__fadeOutLeft");
+        productsRef.current.classList.add("animate__fadeInRight");
+        setFilterCriteria(filter);
+      }, 500);
+      dismiss();
+    }
+
+    return (
+
+      <IonContent>
+      <IonHeader>
+        <IonToolbar color="none" style={{"--border-style": "none"}}>
+          <IonTitle className="ion-margin-top">Filter</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+        <IonGrid>
+          <IonRow>
+              {filters.map(f => (
+                <IonCol key={f} size="3">
+                  <IonButton expand="full" color={filterCriteria === f ? "dark" : "light"} onClick={() => filterProducts(f)}>{f}</IonButton>
+                </IonCol>
+              ))}
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    );
+  }
--- a/03_source/mobile/src/pages/DemoReactShop/components/ProductModal.css
+++ b/03_source/mobile/src/pages/DemoReactShop/components/ProductModal.css
@@ -0,0 +1,88 @@
+ion-card {
+  margin: 0;
+	/* margin-top: var(--ion-safe-area-top); */
+	z-index: -1;
+
+  border-radius: 0px;
+
+  background-size: cover;
+	background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: none;
+  aspect-ratio: 1 / 1;
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  ion-card::before {
+    float: left;
+    padding-top: 100%;
+    content: '';
+  }
+
+  ion-card::after {
+    display: block;
+    content: '';
+    clear: both;
+  }
+}
+
+ion-card-header {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); */
+	background: rgba(0, 0, 0, 0.5)
+}
+
+ion-card-title,
+ion-card-subtitle {
+  color: white;
+}
+
+ion-card-header ion-card-title {
+  
+  margin: 0 0 6px 0;
+  font-size: 22px;
+}
+
+ion-card-header ion-card-subtitle {
+  
+  text-transform: none;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+ion-card-content {
+  height: calc(60px + var(--ion-safe-area-top));
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+#close-button {
+  position: fixed;
+
+  top: max(var(--ion-safe-area-top), 16px);
+  right: 8px;
+}
+
+#fave-button {
+  position: fixed;
+
+  top: max(var(--ion-safe-area-top), 16px);
+	left: 8px;
+}
+
+#product-view-buttons {
+
+	z-index: 10;
+	background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(82, 82, 82, 0.9) 100%) !important;
+	position: absolute;
+	width: 100%;
+	height: 4rem;
+}
+
+.sticky-bottom {
+
+  position: fixed;
+  bottom: 0;
+}
--- a/03_source/mobile/src/pages/DemoReactShop/components/ProductModal.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/ProductModal.jsx
@@ -0,0 +1,76 @@
+import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonFooter, IonIcon, IonLabel, IonNote, IonRow, IonText, IonToolbar } from "@ionic/react";
+import { closeCircle, heart, heartOutline } from "ionicons/icons";
+import { useStoreState } from "pullstate";
+import { useRef } from "react";
+
+import { checkFavourites } from "../store/Selectors";
+import { addToFavourites } from "../store/FavouritesStore";
+import { FavouritesStore } from "../store";
+
+import "./ProductModal.css";
+import { ProductReviews } from "./ProductReviews";
+import { ProductSpecificationsAccordion } from "./ProductSpecificationsAccordion";
+import { AddToCartButton } from "./AddToCartButton";
+
+export const ProductModal = props => {
+
+	const { dismiss, category = false, product } = props;
+	const isFavourite = useStoreState(FavouritesStore, checkFavourites(product));
+	const contentRef = useRef(null);
+
+	return (
+		<>
+			<IonContent ref={contentRef}>
+				<IonButtons id="product-view-buttons">
+					<IonButton color="light" onClick={dismiss} id="close-button">
+						<IonIcon icon={closeCircle} size="large" />
+					</IonButton>
+
+					<IonButton color="danger" onClick={() => addToFavourites(product, category)} id="fave-button">
+						<IonIcon icon={isFavourite ? heart : heartOutline} size="large" />
+					</IonButton>
+				</IonButtons>
+
+				<IonCard style={{backgroundImage: `url('${product.image}')`}}>
+					<IonCardHeader>
+						<IonCardTitle>{product.title}</IonCardTitle>
+						<IonCardSubtitle>{product.price}</IonCardSubtitle>
+					</IonCardHeader>
+				</IonCard>
+
+				<div className="ion-padding">
+
+					<IonRow className="ion-align-items-center">
+						<IonCol>
+							<IonText size="large" className="page-title">
+								<IonNote>shop</IonNote>
+								<IonLabel>{category ? category : "Favourite"}</IonLabel>
+							</IonText>
+						</IonCol>
+
+						<ProductReviews reviews={product.reviews} />
+					</IonRow>
+					<h2>Product Description</h2>
+					<IonText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit felis, molestie id venenatis at, commodo ac tortor. Pellentesque tempus aliquet purus, sed vulputate elit tempus ut.</IonText>
+
+					<h2>Product Specifications</h2>
+					<ProductSpecificationsAccordion contentRef={contentRef} type={category} />
+				</div>
+			</IonContent>
+
+			<IonFooter collapse="fade">
+				<IonToolbar>
+					<IonRow className="ion-justify-content-between ion-align-items-center">
+						<IonCol size="3">
+							<IonButton expand="full" color="light">{product.price}</IonButton>
+						</IonCol>
+
+						<IonCol size="8" className="ion-text-right">
+							<AddToCartButton product={product} />
+						</IonCol>
+					</IonRow>
+				</IonToolbar>
+			</IonFooter>
+		</>
+	);
+}
--- a/03_source/mobile/src/pages/DemoReactShop/components/ProductReviews.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/ProductReviews.jsx
@@ -0,0 +1,23 @@
+import { IonCol, IonIcon, IonNote } from "@ionic/react";
+import { star } from "ionicons/icons";
+import { useEffect, useState } from "react";
+import { randomCount } from "../utils";
+
+export const ProductReviews = () => {
+
+	//	This count could come from the product (if real data was fed)
+	const [reviewCount, setReviewCount] = useState(0);
+
+	useEffect(() => {
+
+		setReviewCount(randomCount());
+	}, []);
+
+	return (
+		<IonCol className="ion-text-right">
+			<IonIcon color="warning" icon={star} />
+			&nbsp;&nbsp;
+			<IonNote>{reviewCount} review{reviewCount > 1 && "s"}</IonNote>
+		</IonCol>
+	);
+}
--- a/03_source/mobile/src/pages/DemoReactShop/components/ProductSpecificationsAccordion.jsx
+++ b/03_source/mobile/src/pages/DemoReactShop/components/ProductSpecificationsAccordion.jsx
@@ -0,0 +1,58 @@
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, IonList, IonNote } from "@ionic/react";
+import { useRef } from "react";
+import { productSpecs } from "../utils";
+
+export const ProductSpecificationsAccordion = ({type, contentRef}) => {
+
+	const accordionGroupRef = useRef(null);
+
+	const log = () => {
+
+		const selectedAccordion = accordionGroupRef.current.value;
+
+		if (selectedAccordion) {
+
+			setTimeout(() => contentRef.current.scrollToBottom(400), 200);
+		}
+	}
+
+	return (
+		<IonAccordionGroup ref={accordionGroupRef} onIonChange={log}>
+			{Object.keys(productSpecs).map((spec, index) => {
+
+				const {header, options, wrapText = false, noteColor = false} = productSpecs[spec];
+
+				return (
+
+					<IonAccordion key={`accordion_${header}_${index}`}>
+						<IonItem slot="header" className="ion-no-padding">
+							<IonLabel>{header}</IonLabel>
+						</IonItem>
+
+
+						<IonList slot="content" className="ion-no-padding">
+							{options.map((option, index2) => {
+
+								const {label, value} = option;
+
+								return (
+
+									<IonItem key={`accordion_${header}_${option}_${index2}`} className="ion-no-padding">
+										<IonLabel>
+											<h3>{label}</h3>
+										</IonLabel>
+										<IonLabel className={wrapText && "ion-text-wrap"}>
+											<IonNote color={noteColor ? (value ? "success" : "danger") : "medium"}>
+												{noteColor ? (value ? "In stock" : "Out of stock") : value}
+											</IonNote>
+										</IonLabel>
+									</IonItem>
+								);
+							})}
+						</IonList>
+					</IonAccordion>
+				);
+			})}
+		</IonAccordionGroup>
+	);
+}
--- a/03_source/mobile/src/pages/DemoReactShop/index.tsx
+++ b/03_source/mobile/src/pages/DemoReactShop/index.tsx
@@ -0,0 +1,129 @@
+// REQ0116/main-tab
+
+import React, { useRef, useState } from 'react';
+import {
+  IonTabs,
+  IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonIcon,
+  IonLabel,
+  IonModal,
+} from '@ionic/react';
+import { Route, Redirect } from 'react-router';
+import { calendar, location, informationCircle, people } from 'ionicons/icons';
+import SchedulePage from '../SchedulePage';
+import SpeakerList from '../SpeakerList';
+import SpeakerDetail from '../SpeakerDetail';
+import SessionDetail from '../SessionDetail';
+import MapView from '../MapView';
+import About from '../About';
+import paths from '../../paths';
+import TabAppRoute from '../../TabAppRoute';
+import { CartStore } from './store';
+import { getCartCount } from './store/Selectors';
+import { CartModal } from './components/CartModal';
+
+interface MainTabsProps {}
+
+const DemoReactShop: React.FC<MainTabsProps> = () => {
+  const cartCount = useStoreState(CartStore, getCartCount);
+  const [selected, setSelected] = useState('tab0');
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  const handleClick = (tab) => {
+    tab === 'tabCart' ? setOpen(true) : setSelected(tab);
+  };
+
+  return (
+    <IonTabs>
+      <IonRouterOutlet ref={ref}>
+        {ReactShopPages.map((page, index) => (
+          <Route
+            key={`route_${index}`}
+            exact={true}
+            path={`/demo-react-shop${page.href}`}
+            component={page.component}
+          />
+        ))}
+
+        {/*
+        <Route exact path="/demo-react-shop">
+          <Redirect to={ReactShopPages.filter((p) => p.default)[0].href} />
+        </Route>
+        */}
+        <Redirect exact path="/demo-react-shop" to="/demo-react-shop/categories" />
+      </IonRouterOutlet>
+      {/*  */}
+
+      <IonTabBar slot="bottom">
+        {ReactShopPages.map((page, index) => {
+          const isSelected = selected === `tab${index}`;
+
+          if (page.isTab) {
+            return (
+              <IonTabButton
+                key={`tab${index}`}
+                tab={`tab${index}`}
+                href={`/demo-react-shop${page.href}`}
+              >
+                <IonIcon icon={page.icon} />
+                {isSelected && <div className="tab-dot" />}
+              </IonTabButton>
+            );
+          } else return null;
+        })}
+
+        <IonTabButton tab="tabCart">
+          <IonIcon icon={cartOutline} />
+          <div className="cart-count">{cartCount}</div>
+        </IonTabButton>
+      </IonTabBar>
+
+      {/* <IonModal presentingElement={ref.current} isOpen={open} onDidDismiss={() => setOpen(false)}> */}
+      {/* <CartModal close={() => setOpen(false)} /> */}
+      {/* </IonModal> */}
+    </IonTabs>
+  );
+};
+
+export default DemoReactShop;
+
+import { cartOutline, heartOutline, homeOutline, shirtOutline } from 'ionicons/icons';
+
+import Categories from './Categories';
+import Favourites from './Favourites';
+import ProductType from './ProductType';
+import Category from './Category';
+import { useStoreState } from 'pullstate';
+
+export const ReactShopPages = [
+  {
+    href: '/categories',
+    icon: shirtOutline,
+    component: Categories,
+    default: true,
+    isTab: true,
+  },
+  {
+    href: '/categories/:category/:type',
+    component: ProductType,
+    default: false,
+    isTab: false,
+  },
+  {
+    href: '/categories/:category',
+    icon: shirtOutline,
+    component: Category,
+    default: true,
+    isTab: false,
+  },
+  {
+    href: '/favourites',
+    icon: heartOutline,
+    component: Favourites,
+    default: false,
+    isTab: true,
+  },
+];
--- a/03_source/mobile/src/pages/DemoReactShop/store/CartStore.js
+++ b/03_source/mobile/src/pages/DemoReactShop/store/CartStore.js
@@ -0,0 +1,27 @@
+import { Store } from "pullstate";
+
+const CartStore = new Store({
+    
+    cart: []
+});
+
+export default CartStore;
+
+export const addToCart = product => {
+
+    const currentCart = CartStore.getRawState().cart;
+    const added = !currentCart.includes(product);
+
+    CartStore.update(s => {
+
+        if (currentCart.includes(product)) {
+            
+            s.cart = currentCart.filter(current => current !== product);
+        } else {
+            
+            s.cart = [ ...s.cart, product ];
+        }
+    });
+
+    return added;
+}
--- a/03_source/mobile/src/pages/DemoReactShop/store/FavouritesStore.js
+++ b/03_source/mobile/src/pages/DemoReactShop/store/FavouritesStore.js
@@ -0,0 +1,35 @@
+import { Store } from "pullstate";
+
+const FavouritesStore = new Store({
+    
+  favourites: []
+});
+
+export default FavouritesStore;
+
+export const checkIfFavourite = product => {
+
+	const currentFavourites = FavouritesStore.getRawState().favourites;
+  const isFavourite = currentFavourites.includes(product);
+
+	return isFavourite;
+}
+
+export const addToFavourites = (product, category) => {
+
+	const currentFavourites = FavouritesStore.getRawState().favourites;
+	const added = !currentFavourites.includes(product);
+
+	FavouritesStore.update(s => {
+
+		if (!added) {
+				
+			s.favourites = currentFavourites.filter(current => current !== product);
+		} else {
+				
+			s.favourites = [ ...s.favourites, product ];
+		}
+	});
+
+	return added;
+}
--- a/03_source/mobile/src/pages/DemoReactShop/store/Selectors.js
+++ b/03_source/mobile/src/pages/DemoReactShop/store/Selectors.js
@@ -0,0 +1,10 @@
+import { createSelector } from 'reselect';
+
+const getState = (state) => state;
+
+//  General getters
+export const getFavourites = createSelector(getState, (state) => state.favourites);
+export const checkFavourites = (product) =>
+  createSelector(getState, (state) => state.favourites.includes(product));
+export const getCart = createSelector(getState, (state) => state.cart);
+export const getCartCount = createSelector(getState, (state) => state.cart.length);
--- a/03_source/mobile/src/pages/DemoReactShop/store/index.js
+++ b/03_source/mobile/src/pages/DemoReactShop/store/index.js
@@ -0,0 +1,2 @@
+export { default as FavouritesStore } from './FavouritesStore';
+export { default as CartStore } from './CartStore';
--- a/03_source/mobile/src/pages/DemoReactShop/style.scss
+++ b/03_source/mobile/src/pages/DemoReactShop/style.scss
@@ -0,0 +1,103 @@
+#about-page {
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  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/img/about/madison.jpg');
+  }
+
+  .about-header .austin {
+    background-image: url('/assets/img/about/austin.jpg');
+  }
+
+  .about-header .chicago {
+    background-image: url('/assets/img/about/chicago.jpg');
+  }
+
+  .about-header .seattle {
+    background-image: url('/assets/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;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}
--- a/03_source/mobile/src/pages/Helloworld/index.tsx
+++ b/03_source/mobile/src/pages/Helloworld/index.tsx
@@ -1,8 +1,18 @@
 // REQ0041/home_discover_event_tab

-import { IonPage, IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, IonTitle, IonContent } from '@ionic/react';
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonButtons,
+  IonButton,
+  IonIcon,
+  IonTitle,
+  IonContent,
+} from '@ionic/react';
 import { menuOutline } from 'ionicons/icons';
 import React, { useEffect, useRef, useState } from 'react';
+import './style.scss';

 const Helloworld: React.FC = () => {
  return (
--- a/03_source/mobile/src/pages/Helloworld/style.scss
+++ b/03_source/mobile/src/pages/Helloworld/style.scss
@@ -0,0 +1,103 @@
+#about-page {
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  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/img/about/madison.jpg');
+  }
+
+  .about-header .austin {
+    background-image: url('/assets/img/about/austin.jpg');
+  }
+
+  .about-header .chicago {
+    background-image: url('/assets/img/about/chicago.jpg');
+  }
+
+  .about-header .seattle {
+    background-image: url('/assets/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;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}
--- a/03_source/mobile/src/pages/MainTabs.tsx
+++ b/03_source/mobile/src/pages/MainTabs.tsx
@@ -38,6 +38,7 @@ const MainTabs: React.FC<MainTabsProps> = () => {
        <Route path="/tabs/schedule/:id" component={SessionDetail} />
        <Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
        <Route path="/tabs/map" render={() => <MapView />} exact={true} />
+
        <Route path="/tabs/about" render={() => <About />} exact={true} />

        {/*  */}
--- a/03_source/mobile/src/pages/Settings/index.tsx
+++ b/03_source/mobile/src/pages/Settings/index.tsx
@@ -52,6 +52,8 @@ import {
  chevronForwardOutline,
  createOutline,
  documentTextOutline,
+  gift,
+  giftOutline,
  heart,
  languageOutline,
  listCircle,
@@ -78,9 +80,9 @@ interface DispatchProps {
  setIsLoggedIn: typeof setIsLoggedIn;
 }

-interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}
+interface SettingsProps extends OwnProps, StateProps, DispatchProps {}

-const EventList: React.FC<SpeakerListProps> = ({
+const SettingsPage: React.FC<SettingsProps> = ({
  speakers,
  speakerSessions,
  logoutUser,
@@ -113,6 +115,10 @@ const EventList: React.FC<SpeakerListProps> = ({
    router.push(paths.NOT_IMPLEMENTED);
  }

+  function handleDemoPageClick() {
+    router.push(paths.DEMO_PAGE);
+  }
+
  function handleServiceAgreementClick() {
    router.push(paths.SERVICE_AGREEMENT);
  }
@@ -196,6 +202,12 @@ const EventList: React.FC<SpeakerListProps> = ({
            <IonLabel>Delete Account</IonLabel>
            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
          </IonItem>
+
+          <IonItem button={true} onClick={handleDemoPageClick}>
+            <IonIcon color="success" slot="start" icon={gift} size="large"></IonIcon>
+            <IonLabel>Demo pages</IonLabel>
+            <IonIcon icon={chevronForwardOutline} slot="end"></IonIcon>
+          </IonItem>
        </IonList>

        <div style={{ margin: '3rem 0.5rem' }}>
@@ -251,7 +263,13 @@ const EventList: React.FC<SpeakerListProps> = ({
              Unable to receive notifications after logging out
            </div>

-            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+            <div
+              style={{
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'space-between',
+              }}
+            >
              <IonButton size="large" fill="outline" shape="round" onClick={handleLogoutCancel}>
                Cancel
              </IonButton>
@@ -276,5 +294,5 @@ export default connect<OwnProps, StateProps, DispatchProps>({
    setAccessToken,
    setIsLoggedIn,
  },
-  component: React.memo(EventList),
+  component: React.memo(SettingsPage),
 });
--- a/03_source/mobile/src/pages/WeatherDemo/AppPages/Tab1.jsx
+++ b/03_source/mobile/src/pages/WeatherDemo/AppPages/Tab1.jsx
@@ -0,0 +1,95 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+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 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);
+  };
+
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>My Weather</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={() => getCurrentPosition()}>
+              <IonIcon icon={refreshOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Dashboard</IonTitle>
+          </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>
+
+        <div style={{ marginTop: '-1.5rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <SkeletonDashboard />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab1;
--- a/03_source/mobile/src/pages/WeatherDemo/AppPages/Tab2.jsx
+++ b/03_source/mobile/src/pages/WeatherDemo/AppPages/Tab2.jsx
@@ -0,0 +1,81 @@
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useState } from 'react';
+import { CurrentWeather } from '../components/CurrentWeather';
+
+function Tab2() {
+  const [search, setSearch] = useState('');
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  const performSearch = async () => {
+    getAddress(search);
+  };
+
+  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();
+
+    if (data && data.current && data.location) {
+      setCurrentWeather(data);
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Search</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Search</IonTitle>
+          </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>
+
+          <IonCol size="5">
+            <IonButton
+              expand="block"
+              className="ion-margin-start ion-margin-end"
+              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>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab2;
--- a/03_source/mobile/src/pages/WeatherDemo/components/CurrentWeather/WeatherProperty.tsx
+++ b/03_source/mobile/src/pages/WeatherDemo/components/CurrentWeather/WeatherProperty.tsx
@@ -0,0 +1,62 @@
+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
@@ -0,0 +1,48 @@
+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
@@ -0,0 +1,117 @@
+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/pages/WeatherDemo/index.tsx
+++ b/03_source/mobile/src/pages/WeatherDemo/index.tsx
@@ -0,0 +1,59 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonLabel,
+  IonPage,
+  IonRouterOutlet,
+  IonRow,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+import { Geolocation } from '@capacitor/geolocation';
+import { useEffect, useState } from 'react';
+import { SkeletonDashboard } from './components/SkeletonDashboard';
+import { chevronBack, cloudOutline, refreshOutline, searchOutline } from 'ionicons/icons';
+import { CurrentWeather } from './components/CurrentWeather';
+import { IonReactRouter } from '@ionic/react-router';
+import { Route, Redirect } from 'react-router';
+import Tab1 from './AppPages/Tab1';
+import Tab2 from './AppPages/Tab2';
+
+const DemoWeatherApp = () => {
+  return (
+    <IonTabs>
+      <IonRouterOutlet>
+        <Route exact path="/demo-weather-app/tab1">
+          <Tab1 />
+        </Route>
+        <Route exact path="/demo-weather-app/tab2">
+          <Tab2 />
+        </Route>
+        <Route exact path="/demo-weather-app">
+          <Redirect to="/demo-weather-app/tab1" />
+        </Route>
+      </IonRouterOutlet>
+      {/*  */}
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="tab1" href="/demo-weather-app/tab1">
+          <IonIcon icon={cloudOutline} />
+          <IonLabel>Dashboard</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/demo-weather-app/tab2">
+          <IonIcon icon={searchOutline} />
+          <IonLabel>Search</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+};
+
+export default DemoWeatherApp;
--- a/03_source/mobile/src/pages/WeatherDemo/style.scss
+++ b/03_source/mobile/src/pages/WeatherDemo/style.scss
@@ -0,0 +1,103 @@
+#about-page {
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  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;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}
--- a/03_source/mobile/src/pages/components/AddToCartButton.jsx
+++ b/03_source/mobile/src/pages/components/AddToCartButton.jsx
@@ -0,0 +1,58 @@
+import { CreateAnimation, IonButton, IonIcon } from "@ionic/react";
+import { cartOutline } from "ionicons/icons";
+import { useRef, useState } from "react";
+import { addToCart } from "../store/CartStore";
+
+export const AddToCartButton = ({product}) => {
+
+	const animationRef = useRef();
+	const [hidden, setHidden] = useState(true);
+
+	const floatStyle = {
+
+		display: hidden ? "none" : "",
+		position: "absolute"
+	};
+
+	const floatGrowAnimation = {
+
+		property: "transform",
+		fromValue: "translateY(0) scale(1)",
+		toValue: "translateY(-55px) scale(1.5)"
+	};
+
+	const colorAnimation = {
+
+		property: "color",
+		fromValue: "green",
+		toValue: "green"
+	};
+
+	const mainAnimation = {
+
+		duration: 1500,
+		iterations: "1",
+		fromTo: [ floatGrowAnimation, colorAnimation ],
+		easing: "cubic-bezier(0.25, 0.7, 0.25, 0.7)"
+	};
+
+	const handleAddToCart = async product => {
+
+		setHidden(false);
+		await animationRef.current.animation.play();
+		setHidden(true);
+		addToCart(product);
+	}
+
+	return (
+
+		<IonButton color="dark" expand="full" onClick={() => handleAddToCart(product)}>
+			<IonIcon icon={cartOutline} />&nbsp;
+			Add to Cart
+
+			<CreateAnimation ref={animationRef} {...mainAnimation}>
+				<IonIcon icon={cartOutline} size="large" style={floatStyle} />
+			</CreateAnimation>
+		</IonButton>
+	);
+}
--- a/03_source/mobile/src/pages/components/Breadcrumbs.jsx
+++ b/03_source/mobile/src/pages/components/Breadcrumbs.jsx
@@ -0,0 +1,23 @@
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from "@ionic/react";
+import { fastFoodOutline } from "ionicons/icons";
+import { useState } from "react";
+
+export const Breadcrumbs = () => {
+
+  const [maxItems, setMaxItems] = useState(2);
+
+  const handleClick = () => {
+
+    setMaxItems(undefined);
+  }
+
+	return (
+
+    <IonBreadcrumbs maxItems={maxItems} onIonCollapsedClick={handleClick}>
+      <IonBreadcrumb color="medium">Page 1</IonBreadcrumb>
+      <IonBreadcrumb color="medium">Page 2</IonBreadcrumb>
+      <IonBreadcrumb color="medium">Page 3</IonBreadcrumb>
+      <IonBreadcrumb>Page 4</IonBreadcrumb>
+    </IonBreadcrumbs>
+	);
+}
--- a/03_source/mobile/src/pages/components/CartModal.jsx
+++ b/03_source/mobile/src/pages/components/CartModal.jsx
@@ -0,0 +1,82 @@
+import { useStoreState } from "pullstate";
+import { useEffect, useState } from "react";
+import { CartStore } from "../store";
+import { addToCart } from "../store/CartStore";
+import { getCart } from "../store/Selectors";
+
+const { IonPage, IonHeader, IonToolbar, IonTitle, IonButtons, IonIcon, IonContent, IonGrid, IonRow, IonItem, IonLabel, IonText, IonThumbnail, IonFooter, IonCol, IonButton, IonItemSliding, IonItemOptions, IonItemOption } = require("@ionic/react");
+const { close } = require("ionicons/icons");
+
+export const CartModal = props => {
+
+	const cart = useStoreState(CartStore, getCart);
+  const [totalPrice, setTotalPrice] = useState(0);
+
+  useEffect(() => {
+
+    let total = 0;
+    cart.forEach(item => total += parseInt(item.price.replace("£", "")));
+    setTotalPrice(total);
+  }, [cart]);
+
+	return (
+		<IonPage>
+			<IonHeader>
+				<IonToolbar>
+					<IonTitle>Cart</IonTitle>
+					<IonButtons slot="end" onClick={props.close}>
+						<IonIcon icon={close} size="large" />
+					</IonButtons>
+				</IonToolbar>
+			</IonHeader>
+			<IonContent>
+
+				<IonGrid>
+					<IonRow style={{borderBottom: "1px solid black"}} className="ion-margin-bottom">
+						<IonItem lines="none">
+							<IonLabel>
+								<h1>{cart.length} products in your cart</h1>
+								<IonText color="medium">
+									<h2>Review products and checkout</h2>
+								</IonText>
+							</IonLabel>
+						</IonItem>
+					</IonRow>
+				</IonGrid>
+
+				{cart.map((item, index) => (
+					<IonItemSliding>
+						<IonItem key={index} lines="none" className="ion-padding-end" style={{paddingTop: "0.75rem", paddingBottom: "0.75rem"}}>
+							<IonThumbnail>
+								<img src={item.image} alt="item" />
+							</IonThumbnail>
+							<IonLabel className="ion-padding-start ion-text-wrap">
+								<h2>{item.title}</h2>
+								<p>{item.price}</p>
+							</IonLabel>
+						</IonItem>
+
+						<IonItemOptions side="end">
+							<IonItemOption color="danger" onClick={() => addToCart(item)}>
+								Remove
+							</IonItemOption>
+						</IonItemOptions>
+					</IonItemSliding>
+				))}
+			</IonContent>
+
+			<IonFooter className="ion-padding-bottom ion-padding-start ion-padding-end" style={{paddingBottom: "3rem"}}>
+				<IonRow className="ion-justify-content-between">
+					<IonCol size="8">
+						<h1>Total</h1>
+					</IonCol>
+
+					<IonCol size="4">
+						<h1>£{totalPrice.toFixed(2)}</h1>
+					</IonCol>
+				</IonRow>
+				<IonButton expand="block" color="dark">Checkout &rarr;</IonButton>
+			</IonFooter>
+		</IonPage>
+	);
+}
--- a/03_source/mobile/src/pages/components/FilterModal.jsx
+++ b/03_source/mobile/src/pages/components/FilterModal.jsx
@@ -0,0 +1,36 @@
+import { IonButton, IonCol, IonContent, IonGrid, IonHeader, IonRow, IonTitle, IonToolbar } from "@ionic/react";
+
+export const FilterModal = ({productsRef, filterCriteria, setFilterCriteria, dismiss, filters}) => {
+
+    const filterProducts = async filter => {
+
+      await productsRef.current.classList.add("animate__fadeOutLeft");
+
+      setTimeout(() => {
+        productsRef.current.classList.remove("animate__fadeOutLeft");
+        productsRef.current.classList.add("animate__fadeInRight");
+        setFilterCriteria(filter);
+      }, 500);
+      dismiss();
+    }
+
+    return (
+
+      <IonContent>
+      <IonHeader>
+        <IonToolbar color="none" style={{"--border-style": "none"}}>
+          <IonTitle className="ion-margin-top">Filter</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+        <IonGrid>
+          <IonRow>
+              {filters.map(f => (
+                <IonCol key={f} size="3">
+                  <IonButton expand="full" color={filterCriteria === f ? "dark" : "light"} onClick={() => filterProducts(f)}>{f}</IonButton>
+                </IonCol>
+              ))}
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    );
+  }
--- a/03_source/mobile/src/pages/components/ProductModal.css
+++ b/03_source/mobile/src/pages/components/ProductModal.css
@@ -0,0 +1,88 @@
+ion-card {
+  margin: 0;
+	/* margin-top: var(--ion-safe-area-top); */
+	z-index: -1;
+
+  border-radius: 0px;
+
+  background-size: cover;
+	background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: none;
+  aspect-ratio: 1 / 1;
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  ion-card::before {
+    float: left;
+    padding-top: 100%;
+    content: '';
+  }
+
+  ion-card::after {
+    display: block;
+    content: '';
+    clear: both;
+  }
+}
+
+ion-card-header {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); */
+	background: rgba(0, 0, 0, 0.5)
+}
+
+ion-card-title,
+ion-card-subtitle {
+  color: white;
+}
+
+ion-card-header ion-card-title {
+  
+  margin: 0 0 6px 0;
+  font-size: 22px;
+}
+
+ion-card-header ion-card-subtitle {
+  
+  text-transform: none;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+ion-card-content {
+  height: calc(60px + var(--ion-safe-area-top));
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+#close-button {
+  position: fixed;
+
+  top: max(var(--ion-safe-area-top), 16px);
+  right: 8px;
+}
+
+#fave-button {
+  position: fixed;
+
+  top: max(var(--ion-safe-area-top), 16px);
+	left: 8px;
+}
+
+#product-view-buttons {
+
+	z-index: 10;
+	background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(82, 82, 82, 0.9) 100%) !important;
+	position: absolute;
+	width: 100%;
+	height: 4rem;
+}
+
+.sticky-bottom {
+
+  position: fixed;
+  bottom: 0;
+}
--- a/03_source/mobile/src/pages/components/ProductModal.jsx
+++ b/03_source/mobile/src/pages/components/ProductModal.jsx
@@ -0,0 +1,76 @@
+import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonFooter, IonIcon, IonLabel, IonNote, IonRow, IonText, IonToolbar } from "@ionic/react";
+import { closeCircle, heart, heartOutline } from "ionicons/icons";
+import { useStoreState } from "pullstate";
+import { useRef } from "react";
+
+import { checkFavourites } from "../store/Selectors";
+import { addToFavourites } from "../store/FavouritesStore";
+import { FavouritesStore } from "../store";
+
+import "./ProductModal.css";
+import { ProductReviews } from "./ProductReviews";
+import { ProductSpecificationsAccordion } from "./ProductSpecificationsAccordion";
+import { AddToCartButton } from "./AddToCartButton";
+
+export const ProductModal = props => {
+
+	const { dismiss, category = false, product } = props;
+	const isFavourite = useStoreState(FavouritesStore, checkFavourites(product));
+	const contentRef = useRef(null);
+
+	return (
+		<>
+			<IonContent ref={contentRef}>
+				<IonButtons id="product-view-buttons">
+					<IonButton color="light" onClick={dismiss} id="close-button">
+						<IonIcon icon={closeCircle} size="large" />
+					</IonButton>
+
+					<IonButton color="danger" onClick={() => addToFavourites(product, category)} id="fave-button">
+						<IonIcon icon={isFavourite ? heart : heartOutline} size="large" />
+					</IonButton>
+				</IonButtons>
+
+				<IonCard style={{backgroundImage: `url('${product.image}')`}}>
+					<IonCardHeader>
+						<IonCardTitle>{product.title}</IonCardTitle>
+						<IonCardSubtitle>{product.price}</IonCardSubtitle>
+					</IonCardHeader>
+				</IonCard>
+
+				<div className="ion-padding">
+
+					<IonRow className="ion-align-items-center">
+						<IonCol>
+							<IonText size="large" className="page-title">
+								<IonNote>shop</IonNote>
+								<IonLabel>{category ? category : "Favourite"}</IonLabel>
+							</IonText>
+						</IonCol>
+
+						<ProductReviews reviews={product.reviews} />
+					</IonRow>
+					<h2>Product Description</h2>
+					<IonText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit felis, molestie id venenatis at, commodo ac tortor. Pellentesque tempus aliquet purus, sed vulputate elit tempus ut.</IonText>
+
+					<h2>Product Specifications</h2>
+					<ProductSpecificationsAccordion contentRef={contentRef} type={category} />
+				</div>
+			</IonContent>
+
+			<IonFooter collapse="fade">
+				<IonToolbar>
+					<IonRow className="ion-justify-content-between ion-align-items-center">
+						<IonCol size="3">
+							<IonButton expand="full" color="light">{product.price}</IonButton>
+						</IonCol>
+
+						<IonCol size="8" className="ion-text-right">
+							<AddToCartButton product={product} />
+						</IonCol>
+					</IonRow>
+				</IonToolbar>
+			</IonFooter>
+		</>
+	);
+}
--- a/03_source/mobile/src/pages/components/ProductReviews.jsx
+++ b/03_source/mobile/src/pages/components/ProductReviews.jsx
@@ -0,0 +1,23 @@
+import { IonCol, IonIcon, IonNote } from "@ionic/react";
+import { star } from "ionicons/icons";
+import { useEffect, useState } from "react";
+import { randomCount } from "../utils";
+
+export const ProductReviews = () => {
+
+	//	This count could come from the product (if real data was fed)
+	const [reviewCount, setReviewCount] = useState(0);
+
+	useEffect(() => {
+
+		setReviewCount(randomCount());
+	}, []);
+
+	return (
+		<IonCol className="ion-text-right">
+			<IonIcon color="warning" icon={star} />
+			&nbsp;&nbsp;
+			<IonNote>{reviewCount} review{reviewCount > 1 && "s"}</IonNote>
+		</IonCol>
+	);
+}
--- a/03_source/mobile/src/pages/components/ProductSpecificationsAccordion.jsx
+++ b/03_source/mobile/src/pages/components/ProductSpecificationsAccordion.jsx
@@ -0,0 +1,58 @@
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, IonList, IonNote } from "@ionic/react";
+import { useRef } from "react";
+import { productSpecs } from "../utils";
+
+export const ProductSpecificationsAccordion = ({type, contentRef}) => {
+
+	const accordionGroupRef = useRef(null);
+
+	const log = () => {
+
+		const selectedAccordion = accordionGroupRef.current.value;
+
+		if (selectedAccordion) {
+
+			setTimeout(() => contentRef.current.scrollToBottom(400), 200);
+		}
+	}
+
+	return (
+		<IonAccordionGroup ref={accordionGroupRef} onIonChange={log}>
+			{Object.keys(productSpecs).map((spec, index) => {
+
+				const {header, options, wrapText = false, noteColor = false} = productSpecs[spec];
+
+				return (
+
+					<IonAccordion key={`accordion_${header}_${index}`}>
+						<IonItem slot="header" className="ion-no-padding">
+							<IonLabel>{header}</IonLabel>
+						</IonItem>
+
+
+						<IonList slot="content" className="ion-no-padding">
+							{options.map((option, index2) => {
+
+								const {label, value} = option;
+
+								return (
+
+									<IonItem key={`accordion_${header}_${option}_${index2}`} className="ion-no-padding">
+										<IonLabel>
+											<h3>{label}</h3>
+										</IonLabel>
+										<IonLabel className={wrapText && "ion-text-wrap"}>
+											<IonNote color={noteColor ? (value ? "success" : "danger") : "medium"}>
+												{noteColor ? (value ? "In stock" : "Out of stock") : value}
+											</IonNote>
+										</IonLabel>
+									</IonItem>
+								);
+							})}
+						</IonList>
+					</IonAccordion>
+				);
+			})}
+		</IonAccordionGroup>
+	);
+}
--- a/03_source/mobile/src/pages/store/CartStore.js
+++ b/03_source/mobile/src/pages/store/CartStore.js
@@ -0,0 +1,27 @@
+import { Store } from "pullstate";
+
+const CartStore = new Store({
+    
+    cart: []
+});
+
+export default CartStore;
+
+export const addToCart = product => {
+
+    const currentCart = CartStore.getRawState().cart;
+    const added = !currentCart.includes(product);
+
+    CartStore.update(s => {
+
+        if (currentCart.includes(product)) {
+            
+            s.cart = currentCart.filter(current => current !== product);
+        } else {
+            
+            s.cart = [ ...s.cart, product ];
+        }
+    });
+
+    return added;
+}
--- a/03_source/mobile/src/pages/store/FavouritesStore.js
+++ b/03_source/mobile/src/pages/store/FavouritesStore.js
@@ -0,0 +1,35 @@
+import { Store } from "pullstate";
+
+const FavouritesStore = new Store({
+    
+  favourites: []
+});
+
+export default FavouritesStore;
+
+export const checkIfFavourite = product => {
+
+	const currentFavourites = FavouritesStore.getRawState().favourites;
+  const isFavourite = currentFavourites.includes(product);
+
+	return isFavourite;
+}
+
+export const addToFavourites = (product, category) => {
+
+	const currentFavourites = FavouritesStore.getRawState().favourites;
+	const added = !currentFavourites.includes(product);
+
+	FavouritesStore.update(s => {
+
+		if (!added) {
+				
+			s.favourites = currentFavourites.filter(current => current !== product);
+		} else {
+				
+			s.favourites = [ ...s.favourites, product ];
+		}
+	});
+
+	return added;
+}
--- a/03_source/mobile/src/pages/store/Selectors.js
+++ b/03_source/mobile/src/pages/store/Selectors.js
@@ -0,0 +1,9 @@
+import { createSelector } from 'reselect';
+
+const getState = state => state;
+
+//  General getters
+export const getFavourites = createSelector(getState, state => state.favourites);
+export const checkFavourites = product => createSelector(getState, state => state.favourites.includes(product));
+export const getCart = createSelector(getState, state => state.cart);
+export const getCartCount = createSelector(getState, state => state.cart.length);
--- a/03_source/mobile/src/pages/store/index.js
+++ b/03_source/mobile/src/pages/store/index.js
@@ -0,0 +1,2 @@
+export { default as FavouritesStore } from "./FavouritesStore";
+export { default as CartStore } from "./CartStore";
--- a/03_source/mobile/src/pages/utils/index.js
+++ b/03_source/mobile/src/pages/utils/index.js
@@ -0,0 +1,143 @@
+export const capitalize = (s) => s && (s[0].toUpperCase() + s.slice(1)).replaceAll('_', ' ');
+
+export const productInfo = {
+  men: {
+    coverImage: '/assets/react-shop/men.jpeg',
+    productTypes: {
+      formal_shirts: {
+        coverImage: '/assets/react-shop/formal_shirts2.jpeg',
+        filters: ['None', 'Regular', 'Slim', 'Stretch'],
+        searchPlaceholder: 'Single Cuff',
+      },
+      sportswear: {
+        coverImage: '/assets/react-shop/sportswear2.jpeg',
+        filters: ['None', 'Trainers', 'Joggers', 'Shorts', 'Hoodie'],
+        searchPlaceholder: 'Nike',
+      },
+      coats: {
+        coverImage: '/assets/react-shop/coats3.jpeg',
+        filters: ['None', 'Funnel', 'Hooded', 'Barbour', 'Collar'],
+        searchPlaceholder: 'Bomber',
+      },
+    },
+  },
+  women: {
+    coverImage: '/assets/react-shop/women.jpeg',
+    productTypes: {
+      jeans: {
+        coverImage: '/assets/react-shop/jeans.jpeg',
+        filters: ['None', 'Skinny', 'Slim', 'Boot Cut', 'Flare'],
+        searchPlaceholder: 'Skinny',
+      },
+      dresses: {
+        coverImage: '/assets/react-shop/dresses3.jpeg',
+        filters: ['None', 'Short', 'Maxi', 'Long', 'Regular'],
+        searchPlaceholder: 'Long Sleeve',
+      },
+      makeup: {
+        coverImage: '/assets/react-shop/makeup2.jpeg',
+        filters: ['None', 'Mascara', 'Lip Gloss', 'Foundation', 'Blush'],
+        searchPlaceholder: 'Brush Set',
+      },
+    },
+  },
+  home: {
+    coverImage: '/assets/react-shop/home.jpeg',
+    productTypes: {
+      beds: {
+        coverImage: '/assets/react-shop/beds.jpeg',
+        filters: ['None', 'Metal', 'Ottoman', 'Storage', 'Wooden'],
+        searchPlaceholder: 'Upholstered',
+      },
+      office: {
+        coverImage: '/assets/react-shop/office.jpeg',
+        filters: ['None', 'Desk', 'Chair', 'Lamp', 'Shelf'],
+        searchPlaceholder: 'Space Saving',
+      },
+      coffee_tables: {
+        coverImage: '/assets/react-shop/coffee_table.jpeg',
+        filters: ['None', 'Wood', 'Glass', 'Round', 'Storage'],
+        searchPlaceholder: 'Oak Effect',
+      },
+    },
+  },
+};
+
+export const productSpecs = {
+  dimensions: {
+    header: 'Dimensions',
+    options: [
+      {
+        label: 'Height',
+        value: '100cm',
+      },
+      {
+        label: 'Width',
+        value: '130cm',
+      },
+      {
+        label: 'Depth',
+        value: '150cm',
+      },
+    ],
+  },
+  shipping: {
+    header: 'Shipping',
+    options: [
+      {
+        label: 'UK',
+        value: '£4.99',
+      },
+      {
+        label: 'USA',
+        value: '£6.99',
+      },
+      {
+        label: 'Gloal',
+        value: '£9.99',
+      },
+    ],
+  },
+  colors: {
+    header: 'Colors',
+    noteColor: true,
+    options: [
+      {
+        label: 'Red',
+        value: true,
+      },
+      {
+        label: 'Blue',
+        value: false,
+      },
+      {
+        label: 'Brown',
+        value: true,
+      },
+    ],
+  },
+  sizes: {
+    header: 'Sizes',
+    wrapText: true,
+    options: [
+      {
+        label: 'Large',
+        value: 'Check size guide for details',
+      },
+      {
+        label: 'Width',
+        value: 'Check size guide for details',
+      },
+      {
+        label: 'Depth',
+        value: 'Check size guide for details',
+      },
+    ],
+  },
+};
+
+export const randomCount = () => {
+  const max = 273;
+  const min = 23;
+  return Math.floor(Math.random() * (max - min) + min).toFixed(0);
+};
--- a/03_source/mobile/src/paths.ts
+++ b/03_source/mobile/src/paths.ts
@@ -21,5 +21,9 @@ const paths = {
  PROFILE: '/tabs/my_profile',
  //
  SIGN_IN: '/mylogin',
+  //
+  DEMO_PAGE: '/tabs/demo-list',
+  DEMO_WEATHER_APP: '/demo-weather-app',
+  DEMO_REACT_SHOP: '/demo-react-shop',
 };
 export default paths;