Web Application

This is the web interface for OWOX Data Marts - an open-source solution for Data Analysts. This web application provides a user-friendly interface for managing Data Marts.

Technologies Used

• React: v19.1.0 - UI library for building the user interface
• TypeScript: v5.7.3 - For type-safe JavaScript development
• Tailwind CSS: v4.1.8 - For utility-first styling
• Vite: v6.3.5 - For fast development and optimized builds
• Node.js packages: Various dependencies for UI components and development tools

Project Structure

The project follows a monorepo structure using npm workspaces.

Getting Started

Prerequisites

• Node.js (latest LTS version recommended)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/OWOX/owox-data-marts.git
   cd owox-data-marts

2. Install dependencies:

   npm install

Development

To start the development server:

# From the root directory to run all workspaces:
npm run dev

# Or to run just the web app:
cd apps/web
npm run dev

The application will be available at http://localhost:5173 (or another port if 5173 is already in use).

Building for Production

To create a production build:

# From the root directory:
cd apps/web
npm run build

The built files will be in the apps/web/dist directory.

To preview the production build:

npm run preview

Available Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run lint:fix - Run ESLint with automatic fixes
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run preview - Preview the production build

Error Handling

The app uses React Router errorElement to catch runtime errors and display a user-friendly fallback instead of the default React crash screen.

There are two error boundary components in src/components/errors/:

• RootErrorBoundary — full-page fallback when MainLayout itself crashes (uses a plain <a href="/"> since the router may be broken).
• LayoutErrorBoundary — in-layout fallback when a child page crashes. The sidebar stays visible so users can navigate away without reloading.

Dev-only error details

Both components include a collapsible block that shows the error message and stack trace:

{import.meta.env.DEV && error instanceof Error && (
  <details>
    <summary>Error details</summary>
    <pre>{error.message}{'\n\n'}{error.stack}</pre>
  </details>
)}

Part	Purpose
import.meta.env.DEV	Vite built-in — true during npm run dev, false in production builds. Vite statically replaces it at build time, so the entire block is tree-shaken out of the production bundle.
error instanceof Error	TypeScript type guard — ensures .message and .stack are safely accessible. Non-Error throws (e.g. strings, Response objects) skip this block.
<details> / <summary>	Native HTML disclosure widget — collapsed by default, click to expand. No JS needed.

In production, users see only the friendly message and action buttons. In development, developers can expand the details to see the full stack trace inline without opening browser DevTools.

Related Documentation

• For information about the overall project, see the main README
• For UI components documentation, check the /packages/ui

Contributing

Contributions are welcome! Please see the Contributor guide for details on how to contribute to the project.