Update README.md file

.github/ISSUE_TEMPLATE/bug-report---production.md

@@ -0,0 +1,30 @@
+---
+name: Bug report - Production
+about: Create a report for issues found in Live
+title: "[PROD] "
+labels: ''
+assignees: ''
+
+---
+
+## Issue
+*Please describe your issue clearly and concisely. If possible, include when you first encountered the issue, who it affects, a link to a relevant page, and any other information that might be helpful in diagnosing its cause.*
+
+## Steps to reproduce
+*If you can reliably reproduce the issue, please list the steps taken to do so. (Go to this URL..., click on..., Scroll down to..., See error)*
+
+*If applicable, add screenshots to help explain your problem.*
+
+## Environment
+*Please add your environment. e.g Browser, OS*
+
+## Expected behaviour
+*Please describe how this feature should be working.*
+
+## Related feature
+*Please cross-reference the build item to which this relates, if known/relevant*
+
+## Impact
+*How many users does this incident/problem affect?  e.g. all users; a majority of users; those submitting field reports; anyone looking at the xxx page, individual user*
+
+## Acceptance Criteria

APIDOCS.md

@@ -0,0 +1,85 @@
+# Alert Hub GraphQL Client Usage Guide
+
+## Introduction
+
+### Client
+Altair: https://altairgraphql.dev/
+
+### Installation Guide
+
+1. Add the [Altair](https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeellpciglgpaodhkhmapeljopja) chrome extension.
+2. Enable the extension and start it.
+3. Once you are in the Altair client, install [altair-graphql-plugin-graphql-explorer](https://altairgraphql.dev/docs/plugins/popular-plugins#altair-graphql-plugin-graphql-explorer). For installation follow the following instructions.
+    1. Go to the settings icon of Altair client.
+    2. Click settings.
+    3. Click `Toggle advanced mode`.
+    4. Add the below block in already existing configuration file. 
+    ```json
+    "plugin.list": [
+       "altair-graphql-plugin-graphql-explorer"
+    ]
+    ```
+    The config should now look like
+    ```json
+    {
+      "theme": "system",
+      "language": "en-US",
+      "addQueryDepthLimit": 3,
+      "tabSize": 2,
+      "plugin.list": [
+          "altair-graphql-plugin-graphql-explorer"
+      ]
+    }
+    ```
+    5. Save the changes.
+    6. Reload the window.
+
+For more information regarding the plugins, you can visit [altair plugins](https://altairgraphql.dev/docs/plugins/).
+
+## Project Configuration and Usage
+
+### Add Schema
+* Go to the [alert-hub-backend](https://github.com/IFRCGo/alert-hub-backend) repository and download the [schema.graphql](https://github.com/IFRCGo/alert-hub-backend/blob/develop/schema.graphql) file.
+> [!NOTE]\
+> The schema file might change in the future. Make sure to use the latest one.
+* Click `Docs` in Altair graphql client.
+
+![](https://s3-ap-southeast-1.amazonaws.com/tc-codimd/uploads/a575a073f6aa81839c739a21b.png)
+
+* Click the options button ``...`` and click `Load Schema...`.
+
+![](https://s3-ap-southeast-1.amazonaws.com/tc-codimd/uploads/a575a073f6aa81839c739a21c.png)
+
+* Select and load the downloaded schema file.
+
+### Add GraphQL URL
+Enter one of the following URL to the `Enter URL` field.
+Staging URL: (https://alert-hub.westeurope.cloudapp.azure.com/graphql/)
+Production URL: 
+
+### Running a query
+* Open Altair graphql explorer on the left panel.
+* Select the query you want to run along with the parameters you want the values for.
+> [!IMPORTANT]\
+> For mandatory parameters which are marked as `*` in the parameter selection, we need to pass the respective values using variables section or directly in the query.
+* Click on the green `Send Request` button on top right or the `(Send query MyQuery)` button directly above the query.
+* The response will be displayed on the right panel.
+
+### Running a query using variables
+> [!NOTE]\
+> Variables can only be used with the queries that accept arguments
+* Select the query you want to run and also select the parameters. The required parameters are identified by `*` after the parameter name. 
+* Click on the `$` sign next to the parameter. This will extract the current value into GraphQL variable.
+* Click on `VARIABLES` section below the query window.
+* Add the required arguments and corresponding values `JSON` format.
+  ```json
+  {
+    "pk": "1000"
+  }
+  ```
+* Or, we could also pass the value to parameter in the query itself. 
+* Run the query and the response will be displayed on the right panel.
+
+![](https://s3-ap-southeast-1.amazonaws.com/tc-codimd/uploads/a575a073f6aa81839c739a21d.png)
+
+Please follow this [official GraphQL documentation](https://graphql.org/learn/) for more information on how to use GraphQL.

README.md

@@ -1,87 +1,75 @@
-# React Base App
+# IFRC ALERT HUB
 
-React base app with some oompf
+Web client for the [Alert Hub](https://alerthub.ifrc.org/) platform
 
-## What is included?
+## Getting started
 
-### Vite
+### Prerequisites
 
-- Sourcemaps are generated on production build
-- `tsc`, `eslint` and `stylelint` are run on production build.
-- All of the assets will be compressed on production build.
-- The build is be placed under `build/` directory
+You can either use [`docker`](https://www.docker.com/) or [`yarn`](https://yarnpkg.com/) to locally run or build this application.
 
-### React
+### Local setup
 
-- Vite is configured with React Refresh
-- SWC is used instead of Babel
+#### 1. Clone the repo
 
-### PostCSS
+```bash
+git clone git@github.com:IFRCGo/alert-hub-web-app.git
+cd alert-hub-web-app
+```
 
-PostCSS is configured with the following plugins:
+#### 2. Install the dependencies
 
-- Preset Env
-- Nested CSS
-- Normalize CSS
-- Autoprefixer
-- CSS Modules
+```bash
+# Skip if running through docker
+yarn install
+```
 
-### Web Fonts
+#### 3. Setup environment variables:
 
-- Web fonts are downloaded and bundled in the production build.
-- Valid web font providers are:
-  - Google Fonts
-  - Bunny Fonts
-  - Fontshare
+Create a `.env` file with following variables
 
-### Absolute Imports
+```env
+APP_TITLE=
+APP_MAPBOX_ACCESS_TOKEN=
+APP_GRAPHQL_API_ENDPOINT=
+APP_GRAPHQL_CODEGEN_ENDPOINT=
+```
 
-- Vite is configured to resolve absolute imports defined on `tsconfig.json`
+You can contact IFRC team to get appropriate values for these variables
 
-### Environment Variables
+#### 4. Run dev instance
 
-Only environment variables prefixed by `APP_` will be passed to the application
+```bash
+yarn start
+# or
+docker-compose up
+```
 
-Variables can be defined using:
+## Directory Structure
 
-- `.env` file
-  - Use `.env` file to define secrets.
-- `docker-compose` file
-  - Use `docker-compose` file to define rest of the env variables.
+```
+.
+├── patches/ (Patches to any of the external dependencies)
+├── public/ (Content that needs to be copied during build)
+├── generated/ (Generated files: eg. Typescript Definitions)
+├── index.html (Base html file)
+└── src/
+    ├── App/
+    │   ├── index.tsx (Defines providers: eg. Auth, Route, Request, Alert)
+    │   └── routes.tsx
+            ├── index.tsx (Defines routes for the pages)    
+    ├── assets/ (images, icons)
+    ├── components/ (Commonly used components)
+    │   ├── domain/ (Components that are specific to a domain)
+    ├── config.ts (Defines configurations read from environment variables)
+    ├── declarations/ (Type declarations for external libraries)
+    ├── hooks (React Hooks)
+    ├── index.tsx (Initializes React)
+    ├── utils (Utility functions)
+    └── views/ (Pages that we can navigate on the platform)
+        └── RootLayout/
+            └── index.tsx (Defines root layout and requests fetched for DomainContext)
+```
 
-The user defined environment variables are validated using the configuration at `./env.ts`
-The typings for environment variables are defined at `./src/declarations/env.d.ts`.
-
-### Git Revision
-
-The commit hash is passed to the application through the environment variable `APP_COMMIT_HASH`
-
-### Test
-
-- `vitest` is used to run tests
-
-### Checks
-
-- `stylelint` is used to lint css files
-- `eslint` is used to lint javascript and typescript files
-- `tsc` is used to typecheck typescript files
-- `unimported` to used to detect unused javascript and typescript files
-
-### Docker
-
-Docker is setup to run vite on port 3000
-
-### Github Actions
-
-- A workflow is setup to run when:
-  - new commit is pushed to develop branch
-  - or a pull request to develop branch is opened
-- It checks for unused files, lint issues, failed tests and failed builds.
-
-### Pull Request Template
-
-- A generic pull request template is included.
-
-## What needs to be included?
-
-[Checklist](CHECKLIST.md)
+## External facing API
+Here is the documentation for [Alert Hub GraphQL Client Usage Guide](./APIDOC.md)