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.