Rawbank Signup App - React TypeScript with Material-UI

Build a React TypeScript banking signup application with Material-UI integration and Supabase authentication, optimized for non-tech-savvy users.

Architecture Principles

1. Self-Contained Components (PRIORITY)

Always create self-contained, reusable components with their own state management and styling.

**Component Structure:**

**Example:**

```typescript

interface ComponentProps {

title: string;

onSubmit: (data: FormData) => void;

loading?: boolean;

}

const ComponentName: React.FC<ComponentProps> = ({ title, onSubmit, loading = false }) => {

// Component logic

return (

// JSX

);

};

export default ComponentName;

```

2. Custom Hooks for Data Access (PRIORITY)

Extract all data fetching and state management into custom hooks.

**Hook Patterns:**

**Example:**

```typescript

const useCustomHook = (param: string) => {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(false);

const [error, setError] = useState(null);

const fetchData = useCallback(async () => {

// Data fetching logic

}, [param]);

useEffect(() => {

fetchData();

}, [fetchData]);

return { data, loading, error, refetch: fetchData };

};

```

3. Material-UI Skeleton Loading (PRIORITY)

Always use Material-UI Skeleton components for loading states instead of spinners.

**Implementation:**

```typescript

import { Skeleton } from "@mui/material";

const LoadingComponent = () => (

<Box>

<Skeleton variant="text" width="60%" height={40} />

<Skeleton variant="rectangular" width="100%" height={200} sx={{ mt: 2 }} />

<Skeleton variant="circular" width={40} height={40} sx={{ mt: 2 }} />

</Box>

);

```

4. Vector Illustrations (PRIORITY)

Add vector illustrations for better UX in empty states, success states, and onboarding.

**Example:**

```typescript

const IllustrationIcon: React.FC<{ size?: number; color?: string }> = ({

size = 64,

color = "primary.main",

}) => (

<Box sx={{ width: size, height: size, color }}>

<svg viewBox="0 0 24 24" fill="currentColor">

{/* SVG path data */}

</svg>

</Box>

);

```

5. UX for Non-Tech-Savvy Users (CRITICAL)

**PRIORITY Guidelines:**

**Input Field Example:**

```typescript

<TextField

label="Numéro de téléphone"

placeholder="+243 XXX XXX XXX"

helperText="Nous utiliserons ce numéro pour vous envoyer des notifications importantes"

InputProps={{

startAdornment: (

<InputAdornment position="start">

<PhoneIcon color="primary" />

</InputAdornment>

),

}}

/>

```

**Section with Illustration Example:**

```typescript

<Box sx={{ textAlign: 'center', mb: 3 }}>

<PersonIcon sx={{ fontSize: 80, color: 'primary.main', mb: 2 }} />

<Typography variant="h5" gutterBottom>

Informations Personnelles

</Typography>

<Typography variant="body2" color="text.secondary">

Ces informations nous aident à créer votre compte en toute sécurité

</Typography>

</Box>

```

**Form UX Guidelines:**

File Structure

```

src/

├── components/ # Self-contained UI components

│ ├── forms/ # Form-specific components

│ ├── layout/ # Layout components

│ └── ui/ # Reusable UI components

├── hooks/ # Custom hooks for data access

│ ├── useAuth.ts # Authentication hook

│ ├── useForm.ts # Form management hook

│ └── useSupabase.ts # Supabase operations hook

├── types/ # TypeScript type definitions

├── utils/ # Utility functions

├── theme/ # Material-UI theme configuration

└── assets/ # Static assets including SVGs

```

Common Patterns

Form Components

```typescript

const FormComponent: React.FC<FormProps> = ({ onSubmit, initialData }) => {

const { data, loading, error, handleSubmit } = useForm(initialData);

if (loading) return <FormSkeleton />;

return <form onSubmit={handleSubmit}>{/* Form fields */}</form>;

};

```

Data Display Components

```typescript

const DataComponent: React.FC<DataProps> = ({ dataId }) => {

const { data, loading, error } = useData(dataId);

if (loading) return <DataSkeleton />;

if (error) return <ErrorIllustration />;

if (!data) return <EmptyStateIllustration />;

return <DataDisplay data={data} />;

};

```

Authentication Components

```typescript

const AuthComponent: React.FC = () => {

const { user, loading, signIn, signOut } = useAuth();

if (loading) return <AuthSkeleton />;

return user ? <UserDashboard /> : <SignInForm />;

};

```

Material-UI Best Practices

Theme Usage

Component Selection

Responsive Design

Supabase Integration

Authentication

Database Operations

Development Workflow

Before Creating Components

1. Check if similar component exists

2. Determine if it should be self-contained

3. Plan props interface

4. Consider loading states needed

Before Creating Hooks

1. Identify data access pattern

2. Determine parameters and return values

3. Plan error handling strategy

4. Consider caching and optimization

Before Adding Loading States

1. Identify content to be loaded

2. Design matching skeleton components

3. Implement progressive loading if needed

4. Test loading states thoroughly

Before Adding Illustrations

1. Determine illustration purpose

2. Choose appropriate SVG format

3. Implement proper theming

4. Test accessibility and responsiveness

Quality Checklist