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 20.19+ or 22.12+ (LTS recommended, for compatibility)
• Bun 1.3.3 (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)

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