Core Components Overview

Introduction

Cat Web is built with a modular component architecture using React, TypeScript, and Material-UI (MUI). The application follows modern React patterns including hooks, functional components, and context-based state management.

Component Architecture

The core components are organized into several categories:

Authentication Components: Handle user authentication flows and protected routes
Layout Components: Define the application structure and navigation
Feature Components: Implement specific functionality like API testing

Available Components

AuthGuard

A higher-order component that protects routes by checking authentication status using Auth0. It handles loading states, unauthenticated users, and authentication errors. Learn more about AuthGuard →

MasterLayout

The main application layout component that provides a consistent structure across all pages. It includes an AppBar with navigation, a responsive Drawer menu, and a content container for nested routes. Learn more about MasterLayout →

ApiTesting

A developer-focused component for testing protected API endpoints. It provides a UI interface to call various API methods and view responses, useful for debugging and development. Learn more about ApiTesting → A simple login component that triggers the Auth0 authentication popup. It displays a centered login button and handles the authentication initiation flow.

Material-UI Integration

All components use Material-UI’s component library and theming system:

Components: AppBar, Drawer, Button, Box, Container, CircularProgress, etc.
Icons: Material Design icons from @mui/icons-material
Styling: The sx prop for inline styles with theme-aware values
Responsive Design: Built-in breakpoints and responsive utilities

TypeScript Support

All components are fully typed with TypeScript:

Explicit prop interfaces for component props
Type safety for state management
Auto-completion and IntelliSense support
Compile-time error checking

Component Communication

Auth0 Context

Most components use the useAuth0 hook from @auth0/auth0-react to access:

isAuthenticated: Current authentication status
isLoading: Loading state during authentication
user: User profile information
loginWithPopup(): Trigger authentication flow
logout(): End user session

React Router

Navigation is handled by React Router:

<Outlet />: Renders nested route components
<Link>: Client-side navigation
Route protection via AuthGuard wrapper

Custom Hooks

Components leverage custom hooks for shared functionality:

useApiService: Provides API client methods with authentication

Next Steps

Explore the individual component documentation pages for detailed prop definitions, usage examples, and implementation details:

Core Components

​Introduction

​Component Architecture

​Available Components

​AuthGuard

​MasterLayout

​ApiTesting

​Login

​Material-UI Integration

​TypeScript Support

​Component Communication

​Auth0 Context

​React Router

​Custom Hooks

​Next Steps

Build docs developers (and LLMs) love