Skip to main content

​
What is Cat Web?

Cat Web is a modern, secure inventory catalogue web application that provides an intuitive interface for managing and organizing catalog items. Built with React 19 and TypeScript, it offers a robust foundation for inventory management with enterprise-grade authentication and a clean, responsive user interface.

​
Key Features

Secure Authentication

Integrated Auth0 authentication with role-based access control

Modern UI

Material-UI components for a polished, responsive interface

Type-Safe

Built with TypeScript for reliable, maintainable code

Fast Development

Vite-powered build system with hot module replacement

​
Tech Stack

Cat Web is built with modern web technologies:
  • React 19 - Latest React with improved performance and developer experience
  • TypeScript - Type-safe code with excellent IDE support
  • Vite - Lightning-fast build tool and dev server
  • Material-UI (MUI) - Comprehensive React component library
  • Auth0 - Enterprise-grade authentication and authorization
  • React Router - Declarative routing for React applications

​
Architecture Overview

Cat Web follows a component-based architecture with clear separation of concerns: 
src/
├── components/       # Reusable UI components
│   ├── AuthGuard.tsx    # Protected route wrapper
│   ├── Login.tsx        # Authentication UI
│   └── MasterLayout.tsx # Main layout wrapper
├── pages/           # Page-level components
│   ├── Dashboard/       # Main dashboard view
│   ├── EditItem/        # Item CRUD operations
│   └── ApiTests/        # API testing interface
├── services/        # API communication layer
│   └── api-service.ts   # Backend API calls
├── hooks/           # Custom React hooks
│   └── useApiService.ts # API service hook
└── App.tsx          # Root application component

​
Authentication Flow

The application uses Auth0 for secure authentication: 
<Auth0Provider
  domain={import.meta.env.VITE_AUTH0_DOMAIN}
  clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
  authorizationParams={{
    redirect_uri: window.location.origin,
    audience: import.meta.env.VITE_AUTH0_AUDIENCE,
  }}
>
  <App />
</Auth0Provider>
All protected routes are wrapped with the AuthGuard component, which handles:
  • Loading states during authentication
  • Redirecting unauthenticated users to login
  • Error handling for authentication failures

​
API Service Layer

The application features a centralized API service for backend communication: 
export class ApiService {
  static accessTokenProvider: () => Promise<string>;
  
  static async getPhoneNumbers(getAccessToken: () => Promise<string>) {
    const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/phone-numbers`, {
      headers: {
        Authorization: `Bearer ${await getAccessToken?.()}`,
      },
    });
    return await res.json();
  }
}
The API service automatically handles authentication tokens and provides a clean interface for all backend operations.

​
Next Steps

Ready to get started? Follow the installation guide to set up your development environment.

Installation

Learn how to install and run Cat Web locally

Build docs developers (and LLMs) love

Get started for freeTalk to us