Rewrite README with project overview, tech stack, and usage guide
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
161
README.md
161
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
|
||||
|
||||
Reference in New Issue
Block a user