📄 @suman-jangili/health‑frontend

Regulatory-First Design: Health‑Check‑in App for Remote Workers

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
2. Features
3. Prerequisites
4. Getting Started
5. Building for Production
6. Docker Image
7. Publishing to npm
8. Scripts Reference
9. Configuration & Environment Variables
10. Contributing
11. 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

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

# 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

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

docker build -t health-frontend:latest .

Run the container

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:

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)

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:

npm run build:dist

3. Publish

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 [email protected].