build: implement version management and deployment automation

README.md

@@ -17,6 +17,7 @@ A comprehensive React + TypeScript frontend starter template with built-in routi
   - [Installation](#installation)
 - [Project Structure](#project-structure)
 - [How to Use](#how-to-use)
+- [Release and Deployment](#release-and-deployment)
 - [Scripts](#scripts)
 - [Setting up Blackbox for File Encryption](#setting-up-blackbox-for-file-encryption)
 
@@ -32,6 +33,9 @@ A comprehensive React + TypeScript frontend starter template with built-in routi
 - **Lazy Loading**: Code-splitting for performance
 - **Breadcrumbs**: Automatic navigation breadcrumbs
 - **EditorConfig**: Consistent coding styles across editors
+- **Material UI**: Comprehensive UI component library
+- **Automated CI/CD**: GitHub Actions for deployment and releases
+- **Release Management**: Automated versioning and changelogs
 
 ## Feature Usage Guidelines
 
@@ -100,51 +104,11 @@ This template provides many features to make development easier. However, not al
 
 ## Project Structure
 
-````markdown
+```markdown
 # Vite + React + TypeScript Template with ESLint & Prettier
 
 This template provides a consistent starting point for frontend projects built with Vite, React, and TypeScript. It integrates ESLint and Prettier to enforce code quality and style consistency across multiple development environments.
-
-## Features
-
-- **Vite**: A fast and modern build tool for development.
-- **React + TypeScript**: Scaffolding for React projects with TypeScript support.
-- **ESLint**: Configured with support for React, TypeScript, and Prettier integration.
-- **Prettier**: Ensures consistent code formatting.
-- **EditorConfig**: Standardizes indentation, line endings, and other settings across editors.
-- **Ready-to-Use Folder Structure**: Simplifies project setup.
-
-## ESLint Configuration
-
-This template includes a robust ESLint setup using the Flat Config format. The configuration supports:
-
-- The latest ECMAScript features (`ecmaVersion: 'latest'`).
-- TypeScript linting using `@typescript-eslint/parser` and `@typescript-eslint/eslint-plugin`.
-- React-specific linting with `eslint-plugin-react-hooks` and `eslint-plugin-react-refresh`.
-- Prettier integration via `eslint-plugin-prettier`, ensuring formatting issues are reported as ESLint errors.
-- Pre-configured rules for React and TypeScript development.
-
-## Prettier Configuration
-
-The template includes a `.prettierrc` file with the following settings:
-
-```json
-{
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "arrowParens": "always",
-  "printWidth": 80,
-  "tabWidth": 2
-}
 ```
-````
-
-Prettier is seamlessly integrated with ESLint, so all formatting issues are reported during linting.
-
-Here's the updated **How to Use** section along with the **Scripts**:
-
----
 
 ## How to Use
 
@@ -221,7 +185,37 @@ Here's the updated **How to Use** section along with the **Scripts**:
     npm run test:ui
     ```
 
----
+## Release and Deployment
+
+This project includes a comprehensive CI/CD pipeline for releases and deployments. For detailed information about the release process, see [PIPELINE.md](./PIPELINE.md).
+
+### Main Branch Initialization
+
+When starting a new project with an empty main branch:
+
+```bash
+npm run init-main
+```
+
+This will initialize the main branch from your develop branch, allowing the deployment pipeline to function properly.
+
+### Release Process
+
+1. Make your changes on the develop branch
+2. The CI pipeline automatically creates release branches with semantic versioning
+3. To manually release a new version:
+   ```bash
+   npm run release
+   ```
+4. To create a distributable package:
+   ```bash
+   npm run package
+   ```
+   This creates a `release.zip` file containing the built application
+
+### Promoting Pre-releases to Production
+
+Use the GitHub Actions workflow "Promote Release to Production" to merge a release branch into main, triggering production deployment.
 
 ## Scripts
 
@@ -236,10 +230,11 @@ Here's the updated **How to Use** section along with the **Scripts**:
 - **`npm run test:coverage`**: Generate a coverage report for the tests.
 - **`npm run test:ui`**: Open the Vitest UI for managing and running tests interactively.
 - **`npm run setup`**: Set up editor configurations and git hooks for consistent code formatting.
+- **`npm run init-main`**: Initialize and sync the main branch from develop branch.
+- **`npm run release`**: Create a new release with proper versioning and changelog updates.
+- **`npm run package`**: Build the project and create a ZIP archive for distribution.
 
----
-
-### Setting up Blackbox for File Encryption
+## Setting up Blackbox for File Encryption
 
 To securely encrypt sensitive files in this project using **StackExchange Blackbox**, follow these steps:
 

package.json

@@ -16,7 +16,8 @@
     "test:ui": "vitest --ui",
     "setup": "bash ./scripts/setup-editor.sh",
     "init-main": "bash ./scripts/init-main-branch.sh",
-    "release": "npx release-it"
+    "release": "npx release-it",
+    "package": "npm run build && cd dist && zip -r ../release.zip ."
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -59,7 +60,7 @@
     "prettier": "^3.4.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.15.0",
-    "vite": "^6.0.2",
+    "vite": "^6.2.5",
     "vitest": "^3.1.1"
   },
   "msw": {

scripts/init-main-branch.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e
+
+echo "Starting main branch initialization..."
+
+git fetch --all
+
+CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
+if [ "$CURRENT_BRANCH" != "develop" ]; then
+  echo "Checking out develop branch..."
+  git checkout develop || { echo "Failed to checkout develop branch"; exit 1; }
+fi
+
+git pull origin develop
+
+if git show-ref --quiet refs/heads/main; then
+  echo "Main branch exists locally, checking out..."
+  git checkout main
+  echo "Resetting main branch to match develop..."
+  git reset --hard develop
+else
+  echo "Main branch doesn't exist locally, creating..."
+  git checkout -b main
+fi
+
+echo "Pushing changes to remote main branch..."
+git push -f origin main
+
+echo "Main branch has been successfully initialized and synced with develop!"
+
+git checkout develop
+
+echo "Process completed. You're now back on the develop branch."