feat: demo list context to prefetch all demos (#64)

* chore: data, types, functions, modular components

* feat:demolist context; readme, contributing.md

* Update CONTRIBUTING.md

* Update README.md

* Update README.md

* prettier fix

Author: pranav-deshmukh

CONTRIBUTING.md

@@ -0,0 +1,62 @@
+# Contributing to Mifos Gazelle Demo Runtime
+
+First off, thank you for considering contributing to the Mifos Gazelle Demo Runtime! It's people like you that make the open-source community such a great place. We welcome any form of contribution, from reporting bugs and requesting features to submitting code changes.
+
+Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open-source project. In return, they should reciprocate that respect in addressing your issue, assessing changes, and helping you finalize your pull requests.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+This is one of the most helpful ways to contribute. If you find a bug, please ensure the bug was not already reported by searching on jira under [gax-27](<[https://github.com/openMF/mifos-gazelle-demo-runtime/issues](https://mifosforge.jira.com/browse/GAZ-27)>).
+
+If you're unable to find an open issue addressing the problem, [open a new ticket](https://mifosforge.jira.com/browse/GAZ-27). Be sure to include a **title and clear description**, as much relevant information as possible, and a **code sample or an executable test case** demonstrating the expected behavior that is not occurring.
+
+### Suggesting Enhancements
+
+If you have an idea for an enhancement or a new feature, please open an issue to discuss it. This allows us to coordinate our efforts and prevent duplication of work.
+
+When creating an enhancement suggestion, please:
+
+- **Use a clear and descriptive title** to identify the suggestion.
+- **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
+- **Explain why this enhancement would be useful** to most users.
+
+### Pull Requests
+
+The process described here has several goals:
+
+- Maintain project quality
+- Fix problems that are important to users
+- Engage the community in working toward the best possible solution
+- Enable a sustainable system for maintainers to review contributions
+
+## Development Workflow
+
+1.  **Fork the repo** on GitHub.
+2.  **Clone your fork** locally:
+    ```sh
+    git clone [https://github.com/your_username/mifos-gazelle-demo-runtime.git](https://github.com/your_username/mifos-gazelle-demo-runtime.git)
+    ```
+3.  **Create a feature branch** for your local development:
+    ```sh
+    git checkout -b name-of-your-bugfix-or-feature
+    ```
+    Now you can make your changes locally.
+4.  **Commit your changes** using a descriptive commit message:
+    ```sh
+    git commit -m "feat: Add some feature"
+    ```
+5.  **Push your branch** to your fork on GitHub:
+    ```sh
+    git push origin name-of-your-bugfix-or-feature
+    ```
+6.  **Open a Pull Request** from your fork to the original `main` branch. Provide a clear title and description for your pull request, explaining the "what" and "why" of your changes.
+
+## Coding Standards
+
+- Follow the existing code style.
+- Write clear, commented code where necessary.
+- Ensure your code is readable and maintainable.
+
+We look forward to your contributions!

README.md

@@ -1,11 +1,92 @@
-# mifos-gazelle-demo-runtime
+# Mifos Gazelle Demo Runtime
 
-[![CI](https://github.com/openMF/mifos-gazelle-demo-runtime/actions/workflows/ci.yml/badge.svg)](https://github.com/openMF/mifos-gazelle-demo-runtime/actions/workflows/ci.yml)
+## Overview
 
-This repo contains the runtime environment for Mifo Gazelle Demos. This is currently WIP.
+The Mifos Gazelle Demo Runtime is an open-source, web-based tool designed to perform interactive demos using Gazelle-deployed Digital Public Goods (DPGs). It provides an intuitive and user-friendly interface to showcase complex functionalities and workflows in a step-by-step manner.
 
-branch main - is release/stable code
+Demos are created using the companion tool, [Mifos Gazelle Demo Creator](https://github.com/openMF/mifos-gazelle-demo-creator), and are stored in a jFrog repository.
 
-branch dev - is current development branch
+The Demo Runtime UI allows users to navigate to their desired demo. The interface is split into two panels:
 
-All PR's must be to dev. dev-->Main will be undertaken at release points
+- **Left Panel:** Displays a clear, step-by-step explanation of the demo, guiding the user through the process.
+- **Right Panel:** Renders the live, deployed DPGs within iframes, allowing for direct and interactive engagement.
+
+This side-by-side layout makes it incredibly easy to follow complex flows, as users can read the instructions and perform the actions in the live application simultaneously. Navigation between steps and different DPGs is seamless, making it the most intuitive way to understand the system's capabilities.
+
+## Features
+
+- **Interactive Live Demos:** Engage directly with deployed DPGs in real-time.
+- **Side-by-Side View:** Follow guided steps on one side while interacting with the application on the other.
+- **Step-by-Step Guidance:** Break down complex workflows into easy-to-understand steps.
+- **Seamless Navigation:** Effortlessly move between different stages of a demo and between different DPGs.
+- **Centralized Demo Repository:** Loads demos created with the Demo Creator from a centralized jFrog repository.
+
+## Getting Started
+
+Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
+
+### Prerequisites
+
+Make sure you have the following software installed on your system:
+
+- [Node.js](https://nodejs.org/) (which includes npm)
+- [Git](https://git-scm.com/)
+
+### Installation Guide
+
+1.  **Clone the repository:**
+    Open your terminal and run the following command to clone the project:
+
+    ```sh
+    git clone https://github.com/openMF/mifos-gazelle-demo-runtime.git
+    ```
+
+2.  **Navigate to the project directory:**
+
+    ```sh
+    cd mifos-gazelle-demo-runtime
+    ```
+
+3.  **Install dependencies:**
+    Install the required npm packages.
+
+    ```sh
+    npm install
+    ```
+
+    _or if you use yarn:_
+
+    ```sh
+    yarn install
+    ```
+
+4.  **Run the application:**
+    Start the development server.
+
+    ```sh
+    npm start
+    ```
+
+    _or if you use yarn:_
+
+    ```sh
+    yarn start
+    ```
+
+5.  **View in browser:**
+    Open your web browser and navigate to `http://localhost:3000` to see the application in action.
+
+## Related Links
+
+- **Jira Story:** [GAZ-27](https://mifosforge.jira.com/browse/GAZ-27) - The original story for this project.
+- **Demo Creator Tool:** [Mifos Gazelle Demo Creator](https://github.com/openMF/mifos-gazelle-demo-creator) - The tool used to create the demos that this runtime consumes.
+
+## Contributing
+
+Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+Please see the `CONTRIBUTING.md` file for details on our code of conduct, and the process for submitting pull requests to us.
+
+## License
+
+This project is licensed under the Mozilla Public License Version 2.0

src/context/DemosListContext.tsx

@@ -0,0 +1,28 @@
+import { fetchDemoListData } from '@/lib/api/fetchDemoListData';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const DemosListContext = createContext([]);
+
+export function DemoListProvider({ children }: { children: React.ReactNode }) {
+  const [demosList, setDemosList] = useState([]);
+
+  useEffect(() => {
+    fetchDemoListData().then(fetchedData => {
+      setDemosList(fetchedData);
+    });
+  }, []);
+
+  return (
+    <DemosListContext.Provider value={demosList}>
+      {children}
+    </DemosListContext.Provider>
+  );
+}
+
+export function useDemosList() {
+  const context = useContext(DemosListContext);
+  if (context === undefined) {
+    throw new Error('useDemosList must be used within a DemoListProvider');
+  }
+  return context;
+}

src/lib/api/fetchDemoData.ts

@@ -1,6 +1,8 @@
 import axios from 'axios';
 
-export const fetchDemoData = async () => {
-  const response = await axios.get(`${import.meta.env.VITE_API_URL}/demoData`);
+export const fetchDemoData = async (demotitle: string) => {
+  const response = await axios.get(`${import.meta.env.VITE_API_URL}/demoData`, {
+    params: { demotitle },
+  });
   return response.data;
 };

src/lib/api/fetchDemoListData.ts

@@ -2,5 +2,5 @@ import axios from 'axios';
 
 export const fetchDemoListData = async () => {
   const response = await axios.get(`${import.meta.env.VITE_API_URL}/demoList`);
-  return response.data;
+  return response.data.demos;
 };

src/main.tsx

@@ -6,25 +6,28 @@ import { SideNav } from './components/Navigation/SideNav.tsx';
 import { TopNav } from './components/Navigation/TopNav.tsx';
 import { ThemeProvider } from './context/ThemeContext';
 import { BrowserRouter } from 'react-router-dom';
+import { DemoListProvider } from './context/DemosListContext.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <ThemeProvider>
-        <div className=" h-screen w-screen overflow-hidden dark:bg-gray-900">
-          <div className="fixed top-0 left-12 right-0 h-14 bg-[#1579EB] z-10">
-            <TopNav title="Mifos Product Demo" />
-          </div>
-          <div className="fixed top-0 left-0 w-12 h-screen bg-white dark:bg-gray-900 z-10">
-            <SideNav />
-          </div>
-          <div className="think-blue-scrollbar ml-12 mt-14 h-[calc(100vh-3.5rem)] overflow-auto flex flex-col">
-            <div className="flex-grow">
-              <App />
+      <DemoListProvider>
+        <ThemeProvider>
+          <div className=" h-screen w-screen overflow-hidden dark:bg-gray-900">
+            <div className="fixed top-0 left-12 right-0 h-14 bg-[#1579EB] z-10">
+              <TopNav title="Mifos Product Demo" />
+            </div>
+            <div className="fixed top-0 left-0 w-12 h-screen bg-white dark:bg-gray-900 z-10">
+              <SideNav />
+            </div>
+            <div className="think-blue-scrollbar ml-12 mt-14 h-[calc(100vh-3.5rem)] overflow-auto flex flex-col">
+              <div className="flex-grow">
+                <App />
+              </div>
             </div>
           </div>
-        </div>
-      </ThemeProvider>
+        </ThemeProvider>
+      </DemoListProvider>
     </BrowserRouter>
   </StrictMode>
 );

src/pages/demo-list/platform-demos.tsx

@@ -30,9 +30,9 @@ import {
   DropdownMenuCheckboxItem,
 } from '@/components/ui/dropdown-menu';
 // import { fetchDemoListData } from '@/lib/api/fetchDemoListData';
-import { SamplePlatformDemoData } from '@/data/sample-platform-demos';
 import type { PlatformDemoData as DemoData } from '@/types/demodata';
 import { allPlatforms } from '@/types/demodata';
+import { useDemosList } from '@/context/DemosListContext';
 
 const columnHelper = createColumnHelper<DemoData>();
 
@@ -43,36 +43,51 @@ export default function PlatformDemos() {
     navigate(`/demo/${id}/${demoSlug}`);
   };
   const [globalFilter, setGlobalFilter] = useState('');
-  // const [data, setData] = useState<DemoData[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<DemoData[]>([]);
+  const [loading, setLoading] = useState(false);
   const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([]);
-
+  const demosList = useDemosList();
+  const productdemodata = useMemo(() => {
+    return demosList.filter((demo: DemoData) => {
+      return demo.tags.length > 1;
+    });
+  }, [demosList]);
   useEffect(() => {
     setLoading(true);
-    // setData(SamplePlatformDemoData);
+    setData(productdemodata);
     setLoading(false);
-    // fetchDemoListData()
-    //   .then(setData)
-    //   .finally(() => setLoading(false));
-  }, []);
+  }, [demosList, productdemodata]);
+
+  // useEffect(() => {
+  //   setLoading(true);
+  //   // setData(SamplePlatformDemoData);
+  //   setLoading(false);
+  //   // fetchDemoListData()
+  //   //   .then(setData)
+  //   //   .finally(() => setLoading(false));
+  // }, []);
 
   const filteredData = useMemo(() => {
-    return SamplePlatformDemoData.filter(demo => {
-      const matchesSearch =
-        demo.demoName.toLowerCase().includes(globalFilter.toLowerCase()) ||
-        demo.demoDescription.toLowerCase().includes(globalFilter.toLowerCase());
+    const search = globalFilter.toLowerCase();
+
+    return data.filter(demo => {
+      const name = demo.name?.toLowerCase() ?? '';
+      const desc = demo.description?.toLowerCase() ?? '';
+      const tags = demo.tags?.map(t => t.toLowerCase()) ?? [];
+
+      const matchesSearch = name.includes(search) || desc.includes(search);
 
       const matchesPlatforms =
         selectedPlatforms.length === 0 ||
-        selectedPlatforms.every(p => demo.platforms.includes(p));
+        selectedPlatforms.some(p => tags.includes(p.toLowerCase()));
 
       return matchesSearch && matchesPlatforms;
     });
-  }, [globalFilter, selectedPlatforms]);
+  }, [globalFilter, selectedPlatforms, data]);
 
   const columns = useMemo(
     () => [
-      columnHelper.accessor('demoName', {
+      columnHelper.accessor('name', {
         header: 'Demo Name',
         enableGlobalFilter: true,
         cell: info => (
@@ -81,7 +96,7 @@ export default function PlatformDemos() {
           </div>
         ),
       }),
-      columnHelper.accessor('demoDescription', {
+      columnHelper.accessor('description', {
         header: 'Description',
         enableGlobalFilter: true,
         cell: info => (
@@ -90,7 +105,7 @@ export default function PlatformDemos() {
           </div>
         ),
       }),
-      columnHelper.accessor('platforms', {
+      columnHelper.accessor('tags', {
         header: 'Deployments needed',
         enableGlobalFilter: false,
         cell: info => (
@@ -108,8 +123,8 @@ export default function PlatformDemos() {
         id: 'action',
         header: 'Action',
         cell: (info: CellContext<DemoData, unknown>) => {
-          const demoName = info.row.original.demoName;
-          const id = info.row.original.demoID;
+          const demoName = info.row.original.name;
+          const id = info.row.original.demoId;
           return (
             <Button
               onClick={() => NavigateToDemo(id, demoName)}
@@ -124,7 +139,7 @@ export default function PlatformDemos() {
         },
       },
     ],
-    []
+    [NavigateToDemo]
   );
 
   const table = useReactTable({