refactor

README.md

@@ -6,27 +6,57 @@ Multi-player game-timer timer with carousel navigation
 
 ```
 game-timer/
-├── docs/              # Documentation and project resources
-│   └── screenshots/   # Application screenshots
-├── public/            # Static assets and public-facing resources
-│   ├── css/           # CSS stylesheets
-│   ├── images/        # Images used by the application
-│   ├── icons/         # App icons for PWA
-│   ├── audio/         # Audio files
-│   ├── index.html     # Main HTML entry point
-│   ├── manifest.json  # PWA manifest
-│   └── sw.js          # Service Worker
-├── src/               # Source code
-│   └── js/            # JavaScript files
-│       ├── core/      # Core application logic
-│       ├── ui/        # UI-related code
-│       ├── services/  # External services integration
-│       └── utils/     # Utility functions
-├── Dockerfile         # Docker container definition
-├── .dockerignore      # Files to exclude from Docker build
-└── package.json       # Project metadata and dependencies
+├── css/            # CSS stylesheets
+├── icons/          # App icons
+├── images/         # Image assets
+├── js/             # Symbolic link to src/js for compatibility
+├── index.html      # Main HTML entry point
+├── manifest.json   # PWA manifest 
+├── sw.js           # Service Worker
+├── src/            # Source code
+│   └── js/         # JavaScript files
+│       ├── core/   # Core application logic
+│       ├── ui/     # UI-related code
+│       └── services/ # External services integration
+├── Dockerfile      # Docker container definition (nginx)
+├── .dockerignore   # Files to exclude from Docker build
+├── .env            # Environment variables for production
+├── .env.example    # Example environment variables template
+└── package.json    # Project metadata and deployment scripts
 ```
 
+## Environment Variables
+
+The application uses environment variables for configuration. These are loaded from a `.env` file at runtime.
+
+### Setting Up Environment Variables
+
+1. Copy `.env.example` to `.env`:
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Edit the `.env` file with your own values:
+   ```
+   # Public VAPID key for push notifications
+   PUBLIC_VAPID_KEY=your_public_vapid_key_here
+   
+   # Backend URL for push notifications
+   BACKEND_URL=https://your-push-server.example.com
+   ```
+
+3. For security, never commit your `.env` file to version control. It's already included in `.gitignore`.
+
+### Generating VAPID Keys
+
+For push notifications, you need to generate your own VAPID keys:
+
+```bash
+npx web-push generate-vapid-keys
+```
+
+Use the public key in your `.env` file and keep the private key secure for your backend server.
+
 # PWA Containerized Deployment
 
 This document provides step-by-step instructions to pull the source code and deploy the Progressive Web App (PWA) using Docker on a production server.
@@ -56,12 +86,24 @@ From the repository root, run the following command to build your Docker image:
 docker build -t 'game-timer:latest' .
 ```
 
-### 3. Run the Docker Container
-
-Once the image is built, run the container on port 8080 with:
+or use the npm script:
 
 ```bash
-docker run -d -p 8080:80 --name game-timer-container game-timer:latest
+npm run docker:build
+```
+
+### 3. Run the Docker Container
+
+Once the image is built, run the container on port 80 with:
+
+```bash
+docker run -d -p 80:80 --name game-timer game-timer:latest
+```
+
+or use the npm script:
+
+```bash
+npm run start
 ```
 
 ### 4. Verify the Deployment
@@ -75,29 +117,42 @@ docker ps
 View logs (if needed):
 
 ```bash
-docker logs game-timer-container
+docker logs game-timer
 ```
 
 After running the container, open your web browser and navigate to:
 
-```bash
-http://localhost:8080
+```
+http://localhost
 ```
 
 ### 5. Terminate
 
-To stop your running game-timer-container, use:
+To stop your running game-timer container, use:
 
 ```bash
-docker stop game-timer-container
+docker stop game-timer
+docker rm game-timer
+```
+
+or use the npm script:
+
+```bash
+npm run stop
 ```
 
 ## Development
 
-For local development without Docker, you can use:
+For local development without Docker, you can use any static file server such as:
 
 ```bash
-npm run dev
+python -m http.server
 ```
 
-This will start a local development server and open the application in your browser.
+or
+
+```bash
+npx serve
+```
+
+This will start a local development server and you can access the application in your browser.