npm package: @suman-jangili/health-frontend
Description: A daily wellness check‑in tool where employees optionally submit health metrics.
Author: Suman Jangili
Latest version: 0.1.0

📄 `@suman-jangili/health‑frontend`

## Regulatory-First Design: Health‑Check‑in App for Remote Workers
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

**Building privacy‑by‑law systems from day 1. Start with the law, end with trust.**
> In today's data-protection landscape, regulations like GDPR, CCPA, HIPAA, and DPDPA should form the foundation of product architecture.
- A React single‑page application built with Create‑React‑App that provides a daily wellness check‑in UI for employees.
- The app includes a questionnaire, a manager dashboard, and a policy viewer, all wrapped in a modern Material‑UI design.
- Designed to be HIPAA‑compatible while respecting EU data‑rights (CCPA, GDPR).

---

### Table of Contents
1. [Project Overview](#project-overview)
2. [Features](#features)
3. [Prerequisites](#prerequisites)
4. [Getting Started](#getting-started)
5. [Building for Production](#building-for-production)
6. [Docker Image](#docker-image)
7. [Publishing to npm](#publishing-to-npm)
8. [Scripts Reference](#scripts-reference)
9. [Configuration & Environment Variables](#configuration--environment-variables)
10. [Contributing](#contributing)
11. [License](#license)

---

### Project Overview
The **health‑frontend** package is a front‑end client that talks to a backend API (e.g., the Rust service `regulatory_api`).
It is written in **TypeScript**, styled with **Material‑UI v7**, and uses **Emotion** for CSS‑in‑JS.
The repository lives at:
[https://github.com/sumanjangili/regulatory-first/tree/main/health-frontend](https://github.com/sumanjangili/regulatory-first/tree/main/health-frontend)

---

### Features
- **Daily wellness questionnaire** – employees can optionally submit health metrics.
- **Manager dashboard** – view aggregated responses, filter by team/date.
- **Policy viewer** – display company health policies in a clean UI.
- **Responsive design** – works on desktop and mobile browsers.
- **Zero‑access encryption** – all network traffic is intended to be secured via HTTPS (handled by the backend).
- **Environment‑driven backend URL** – configurable via VITE_BACKEND_URL.

---

#### Prerequisites
| Tool | Minimum version |
| ---- | --------------- |
| Node.js | 20.x (the Docker image uses node:20-alpine) |
| npm | 9.x (bundled with Node 20) |
| Docker | 24.x (for container builds) |
| Git | any recent version |

---

### Getting Started
```bash
# Clone the repo
git clone https://github.com/sumanjangili/regulatory-first.git
cd regulatory-first/health-frontend

# Install dependencies
npm ci   # uses the lockfile for reproducible installs

# Set the backend URL (optional, defaults to http://localhost:3000)
export VITE_BACKEND_URL=http://localhost:3000   # Bash/Zsh
# set VITE_BACKEND_URL=http://localhost:3000   # PowerShell

# Start the development server
npm start
```
The app will be reachable at http://localhost:3000 (CRA’s default port).
Hot‑module replacement (HMR) is enabled, so changes are reflected instantly.
### Building for Production
```bash
npm run build          # CRA creates ./build
# Optional helper that also renames the folder to ./dist (mirrors Docker behaviour)
npm run build:dist
```
- The output directory contains an optimized, minified bundle ready for static hosting.
- By default the folder is named build; the Dockerfile renames it to dist internally.

### Docker Image
A multi‑stage Dockerfile is provided to produce a tiny Alpine‑based image that serves the static files with the serve CLI.
#### Build the image
```bash
docker build -t health-frontend:latest .
```
#### Run the container
```bash
docker run -p 8080:80 health-frontend:latest
```
The app will be reachable at `http://localhost:8080`.
#### How the Dockerfile works
1. **Builder stage** – installs Node dependencies, runs `npm run build` (producing `./build`).
2. **Rename step** – `mv ./build ./dist` (executed inside the image).
3. **Runner stage** – installs the global `serve` binary, copies the `dist` folder, and starts the server with:
```bash
CMD ["serve", "-s", "dist", "-l", "80"]
```
The `VITE_BACKEND_URL` environment variable is injected at runtime, allowing the container to point to the appropriate backend service (e.g., `regulatory_api` in a Docker Compose stack).
#### Docker Compose snippet (example)
```js
version: "3.9"
services:
  health-frontend:
    image: health-frontend:latest
    ports:
      - "8080:80"
    environment:
      VITE_BACKEND_URL: http://regulatory_api:3000
    depends_on:
      - regulatory_api

  regulatory_api:
    # Rust API service definition …
```

---

### Publishing to npm
The package is **public** (`private: false`) and ready for publishing.
1. **Ensure the version is incremented** (`npm version patch|minor|major`).
2. **Run the optional rename script** if you want the `dist` folder included in the published tarball:
```bash
npm run build:dist
```
3. **Publish**
```bash
npm publish --access public
```
The files field in package.json limits the published content to `dist/` and `README.md`.
> **Note:** The published artifact contains the compiled static site, not the source code. If you wish to distribute the source as well, add the relevant directories to the files array or remove the field entirely.

---

### Scripts Reference
| Script | Description |
| ------- | ----------- |
| `start` | Launches CRA development server (`react-scripts start`). |
| `build` | Generates an optimized production bundle in `./build`. |
| `build:dist` | Runs `npm run build` then renames `build → dist` (mirrors Docker behavior). |
| `test` | Executes CRA test runner (`react-scripts test`). |
| `eject` | Ejects CRA configuration (use with caution). |

---

### Configuration & Environment Variables
| Variable | Purpose | Default |
| -------- | ------- | ------- |
| `VITE_BACKEND_URL` | URL of the backend API that the frontend calls. Must be a full HTTP(S) URL. | http://localhost:3000 (development) |
| `NODE_ENV` | Set automatically by CRA (development or production). | -- |

All `VITE_` prefixed variables are automatically exposed to the client bundle by Vite/CRA.

---

### Contributing
1. Fork the repository.
2. Create a feature branch (git checkout -b feat/your-feature).
3. Make your changes, ensuring the TypeScript compiler passes (npm run build).
4. Write or update tests if applicable.
5. Submit a pull request against the main branch.
Please adhere to the existing code style (Prettier + ESLint) and include a brief description of the change in the PR body.

---

### License
`This project is licensed under the **MIT** license. See the `LICENSE` file for details.

> For any questions, open an issue on GitHub or contact the maintainer at contact@sumanjangili.com.