PMR - Frontend

The next-generation frontend web application for the Physiome Model Repository, built with Vue 3, TypeScript, and Tailwind CSS v4.

About

A modern, responsive web application for browsing and exploring computational models in the Physiome Model Repository. Built with Vue 3 and powered by a Rust-based backend, this project represents the next generation of the platform.

Features:

• 🎨 Light/Dark theme with system preference support
• 📱 Responsive design with Tailwind CSS v4
• ⚡ Built with Vue 3 Composition API and TypeScript
• 🧩 Atomic design component structure

Tech Stack

• Framework: Vue 3 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS v4
• Routing: Vue Router
• Testing: Vitest (unit) + Cypress (e2e)
• Code Quality: Biome (formatting and linting) + TypeScript

Project Structure

src/
├── assets/          # Global styles and CSS files
├── components/      # Vue components (atomic design)
│   ├── atoms/       # Basic building blocks
│   ├── molecules/   # Simple component groups
│   └── organisms/   # Complex components
├── composables/     # Vue composables
├── layouts/         # Layout components
├── router/          # Vue Router configuration
├── services/        # API service layer
├── types/           # TypeScript type definitions
└── views/           # Page-level components

Getting Started

Prerequisites

• Node.js 24.20+ (LTS recommended, for compatibility)
• Bun 1.4+ (latest recommended)

Installation

bun install

Environment Configuration

Copy the example environment file and configure as needed:

cp .env.example .env

Environment Variables:

• VITE_API_BASE_URL - Base URL for the PMR API server (default: http://127.0.0.1:9380 for local Rust backend)
• VITE_DOWNLOAD_API - Base URL of the service used for COMBINE and workspace archive downloads. (This will be removed after all download APIs are available on PMR3.)
• VITE_DOWNLOAD_HOST - Optional base URL used for workspace archive links when the site and download API are hosted on different origins. If unset, the app uses the current host. Not required for same-origin production deployments.
• VITE_GITHUB_CLIENT_ID - Public client ID of the GitHub OAuth application used for sign-in.
• VITE_GITHUB_AUTH_API - Base URL of the backend endpoint that completes GitHub OAuth authentication.
• VITE_GITHUB_ISSUES_URL - Optional GitHub issues URL for reporting bugs or providing feedback. Leave it unset or set it to your repository's issues page to override the default value.
• VITE_GA_MEASUREMENT_ID - Google Analytics 4 measurement ID. Leave unset to disable analytics.
• VITE_BASE_PATH - Deployment path used for generated asset and router URLs.
• VITE_ENABLE_GH_PAGES_SPA_REDIRECT - Enables GitHub Pages redirect helper when set to true.
• VITE_FEATURE_COMPARISON_SHEET_CSV_URL - CSV file URL for the feature comparison page.
• VITE_LOGIN_DISABLED - Set to true to disable login and hide the login button. If not defined, login is shown by default.

Note: To run the backend locally, see the pmrplatform repository for setup instructions.

Development

Start the development server with hot-reload:

bun run dev

The app will be available at http://localhost:5173/pmrapp-frontend/

Build

Type-check, compile and minify for production:

bun run build

Preview the production build:

bun run preview

Testing

Unit Tests

Run unit tests with Vitest:

bun run test:unit

End-to-End Tests

Run e2e tests in development mode:

bun run test:e2e:dev

Run e2e tests against production build:

bun run build
bun run test:e2e

Code Quality

Format code:

bun run format

Lint and fix code:

bun run lint

Run both format and lint:

bun run format && bun run lint

Development Tools

Recommended IDE Setup

• VS Code
• Vue - Official extension (disable Vetur if installed)

Browser DevTools

Chrome/Edge/Brave:

• Vue.js devtools
• Enable Custom Object Formatters in DevTools settings

Firefox:

• Vue.js devtools

Related Projects

• Backend: pmrplatform - Rust-powered backend platform
• Rust Demo: pmr3.demo.physiomeproject.org - Alternative frontend built with Leptos (Rust)
• Current Production: models.physiomeproject.org - Active Physiome Model Repository