# README

## description

A simple CMS project

<!-- AI: fill feature below -->

## Features

T.B.A.

<!-- AI: fill stack below -->

## Tech Stack

T.B.A.

## Project Structure

T.B.A.

## Getting Started

1 AI tools/co-pilot

```prompt
please read and follow steps in the markdown files in `98_AI_workspace` folder thanks.
```

<!-- AI: please fill the step to setup project below -->

2 Install dependencies:

```bash
cd 03_source/docker
./89_dc_up.sh

./03_mobile.sh
./02_cms_backend_bash.sh
./01_frontend_bash.sh

cd -

```

3 Run development server:

```bash
npm start
```

4 Build for production:

```bash
npm run build
```

5 Deploy to GitHub Pages:

```bash
npm run deploy
```

<!-- AI: pleae fill the test command here -->

6 Test

```bash
npm test  # runs "react-scripts test"
```

## Modular Design

Components follow `CellX_Y` naming convention where:

- `X` represents the row number
- `Y` represents the column number

Each component is self-contained with:

- Logic in `index.tsx`
- Styles in `style.module.scss`

## Uptime Kuma Integration

The dashboard displays status badges from Uptime Kuma. Each badge shows:

- Service name
- Current status (up/down)
- Response time
- Uptime percentage

To add a new service:

1. Get the status ID from your Uptime Kuma instance
2. Create a new Cell component
3. Add the badge using `ShowUptimeKumaBadge` component