Turva Landing Page

This is the landing page for Turva - our 21st Century Clinical Safety Compliance Platform.

Tech Stack

This project is built with modern web technologies:

• React 19 - UI library with latest features including concurrent rendering
• Vite - Fast build tool and development server with HMR (Hot Module Replacement)
• Mantine UI - Modern React components library with excellent theming support
• TypeScript - Type-safe JavaScript with strict configuration
• React Router - Declarative routing for React applications
• Yarn 4 - Package manager

Project Structure

src/
├── app/
│   ├── App.tsx                    # Main app component with routing
│   └── contexts/
│       └── ConfigurationContext.tsx  # Global configuration context/state
├── pages/
│   ├── LandingPage/               # Home page component
│   └── ResourceNotFoundPage/     # 404 error page
├── types/
│   └── Configuration.ts          # TypeScript type definitions
├── resources/images/              # Static assets
├── theme.ts                       # Mantine UI theme configuration
└── main.tsx                       # Application entry point

Development Setup

Prerequisites

• Node.js (version compatible with React 19)
• Yarn 4.9.2 (included in the project)

Installation

1. Clone the repository
2. Install dependencies:

yarn install

Development Server

Start the development server with hot module replacement:

yarn dev

The application will be available at http://localhost:5173 (or the next available port).

Available Scripts

• yarn dev - Start development server
• yarn build - Build for production (TypeScript compilation + Vite build)
• yarn lint - Run ESLint for code quality checks
• yarn preview - Preview production build locally

Key Features & Architecture

Theming

The application uses a custom Mantine theme (theme.ts) with:

• Custom color palette including "turva" brand colors
• Dark mode support with custom dark color scheme
• Consistent component styling (no border radius by default)

Configuration Management

Global app configuration is managed through React Context (ConfigurationContext.tsx):

• Persists user preferences to localStorage
• Currently supports dark mode toggle
• Easily extensible for additional configuration options

Routing

Uses React Router v7 with:

• Browser router with basename support for deployment flexibility
• Simple route structure: home page (/) and catch-all 404 page
• Configured in App.tsx

TypeScript Configuration

The project uses a multi-config TypeScript setup:

• tsconfig.json - Project TypeScript configuration

Strict TypeScript settings are enabled for better code quality.

Styling

• PostCSS with Mantine preset for CSS processing
• Custom breakpoint variables defined in postcss.config.cjs

Development Notes

Code Quality

• ESLint configured with TypeScript, React, and React Hooks rules
• Strict TypeScript configuration with unused variable detection

Package Management

• Uses Yarn 4 with node-modules linker for compatibility
• Modern imports configuration in package.json supporting multiple file extensions

Build Process

• Vite handles bundling and optimization
• TypeScript compilation happens before build
• Development server supports modern ES modules

Deployment Considerations

The application is configured for flexible deployment:

• BASE_URL environment variable support for subdirectory deployment
• Static asset optimization through Vite
• Production build outputs to dist/ directory

Contributing

When contributing:

1. Follow the existing TypeScript strict configuration
2. Maintain the established project structure
3. Use the configured ESLint rules
4. Test locally with yarn dev before submitting changes