From 5020d91277123d436d3ec23f4af4b2db26c88b25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Tue, 10 Mar 2026 10:10:28 +0800
Subject: [PATCH] Rewrite README with project overview, tech stack, and usage
 guide

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 README.md | 161 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 126 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 6f692f3..c83bdd6 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,161 @@
 # The Lucia Project Frontend
 
-## Description
+The frontend of the Lucia project, a process mining platform for
+analyzing, discovering, and comparing business process workflows.
 
-This template should help get you started developing with Vue 3 in Vite.
-This is the frontend of the Lucia project. It is being developed with [Vue 3](https://vuejs.org/) in [Vite](https://vitejs.dev/).
+Built with [Vue 3][vue], [Vite][vite], [Pinia][pinia],
+and [Tailwind CSS][tailwind].
 
-## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+## Features
 
-## Customize configuration
+- **Files** -- Upload, browse, and manage event log files (CSV).
+- **Discover** -- Visualize process maps ([Cytoscape.js][cytoscape]),
+  analyze performance metrics ([Chart.js][chartjs]), and run
+  conformance checking against user-defined rules.
+- **Compare** -- Side-by-side comparison of process maps and
+  dashboards.
+- **Account Management** -- User account CRUD with role-based
+  access control.
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-## Project Setup
+## Tech Stack
+
+| Category | Technologies |
+|----------|-------------|
+| Framework | Vue 3.5, Vue Router 5, Pinia 3 |
+| Build | Vite 7, TypeScript 5, Tailwind CSS 4 |
+| UI | PrimeVue 4, PrimeIcons, SweetAlert2 |
+| Visualization | Cytoscape.js (process maps), Chart.js (charts) |
+| HTTP | Axios with JWT refresh token handling |
+| Testing | Vitest 4 (unit/component), Cypress 15 (E2E) |
+| Linting | ESLint, Prettier |
+
+
+## Prerequisites
+
+- [Node.js][nodejs] (v18 or later)
+- npm
+
+
+## Getting Started
+
+### Install dependencies
 
 ```sh
-npm install
+npm ci
 ```
 
-### Compile and Hot-Reload for Development
+### Configure environment
+
+Copy `.env` to `.env.local` and set the backend API URL:
+
+```sh
+cp .env .env.local
+```
+
+```dotenv
+# .env.local
+VUE_APP_API_URL = "http://localhost:8000"
+```
+
+The dev server proxies `/api` requests to this URL.
+
+### Start development server
 
 ```sh
 npm run dev
 ```
 
-### Compile and Minify for Production
+The app will be available at `http://localhost:58249`.
+
+
+## Testing
+
+### Run unit and component tests
 
 ```sh
-npm run build
+npx vitest run
 ```
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+### Run E2E tests
 
-```sh
-npm run test:unit
-```
-
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
-
-```sh
-npm run test:e2e:dev
-```
-
-This runs the end-to-end tests against the Vite development server.
-It is much faster than the production build.
-
-But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+Build first, then run [Cypress][cypress] against the preview
+server:
 
 ```sh
 npm run build
 npm run test:e2e
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+For interactive E2E development with the Vite dev server:
 
 ```sh
-npm run lint
+npm run test:e2e:dev
 ```
 
-## Copyright
-Copyright 2022-2024 DSP, inc. All rights reserved.
 
-This software is proprietary. You may obtain, use, copy, edit or update this software with written agreements from DSP, inc.
+## Build for Production
+
+```sh
+npm run build
+```
+
+Output is in the `dist/` directory. Preview locally with:
+
+```sh
+npm run preview
+```
+
+
+## Project Structure
+
+```
+src/
+├── api/            # Axios client with JWT interceptors
+├── assets/         # CSS (Tailwind), static assets
+├── components/     # Reusable Vue components
+│   ├── Discover/   #   Map, Conformance, Performance
+│   ├── Compare/    #   Comparison sidebar
+│   └── File/       #   Upload modal
+├── module/         # Business logic (alerts, charts, sorting)
+├── router/         # Vue Router configuration
+├── stores/         # Pinia stores (state management)
+├── utils/          # Utility functions (emitter, escaping)
+└── views/          # Page-level route components
+    ├── Discover/   #   Map, Performance, Conformance
+    ├── Compare/    #   Dashboard, MapCompare
+    ├── Files/      #   File browser
+    ├── Upload/     #   File upload
+    └── Login/      #   Authentication
+```
+
+
+## Copyright
+
+Copyright 2022-2026 DSP, inc. All rights reserved.
+
+This software is proprietary. You may obtain, use, copy, edit or
+update this software with written agreements from DSP, inc.
+
 
 ## Authors
-Chia Yin
-chiayinin@gmail.com
-2024/3/29
+
+- Chia-Yin Kuo (chiayin.kuo@dsp.im)
+- imacat (imacat.yang@dsp.im)
+
+
+## Acknowledgments
+
+Code quality improvements assisted by [Claude Code][claude-code].
+
+
+[vue]: https://vuejs.org/
+[vite]: https://vitejs.dev/
+[pinia]: https://pinia.vuejs.org/
+[tailwind]: https://tailwindcss.com/
+[cytoscape]: https://js.cytoscape.org/
+[chartjs]: https://www.chartjs.org/
+[nodejs]: https://nodejs.org/
+[cypress]: https://www.cypress.io/
+[claude-code]: https://claude.ai/claude-code