/
├── public/              # Static assets (images, fonts)
├── src/
│   ├── components/      # React components
│   │   ├── admin/       # Admin dashboard components
│   │   ├── auth/        # Authentication components
│   │   ├── ui/          # Reusable UI components
│   │   └── editor/      # MDX editor components
│   ├── config/          # Configuration files
│   │   └── api.ts       # API configuration
│   ├── data/            # Mock data for development
│   ├── hooks/           # Custom React hooks
│   ├── layouts/         # Astro layouts
│   ├── lib/             # Utility libraries
│   │   └── apiClient.ts # HTTP client
│   ├── pages/           # Astro pages (routes)
│   ├── schemas/         # Zod validation schemas
│   ├── services/        # API service layer
│   ├── styles/          # Global styles
│   ├── types/           # TypeScript type definitions
│   └── env.d.ts         # Environment type definitions
├── .env.example         # Example environment variables
├── astro.config.mjs     # Astro configuration
├── package.json         # Project dependencies
├── tsconfig.json        # TypeScript configuration
└── tailwind.config.js   # Tailwind CSS configuration

// 1. User logs in
import { login } from './services/authService';

const { user, token } = await login({
  email: '[email protected]',
  password: 'password123'
});

// 2. Token stored in localStorage
localStorage.setItem('auth_token', token);
localStorage.setItem('user_data', JSON.stringify(user));

// 3. Token sent with all API requests
const headers = {
  'Authorization': `Bearer ${token}`,
  'Content-Type': 'application/json'
};

// 4. Auto-refresh on 401 errors
if (response.status === 401) {
  await attemptTokenRefresh();
}

// Example: Using the auth store
import { useAuthStore } from './stores/authStore';

const { user, isAuthenticated, login, logout } = useAuthStore();

// The store persists to localStorage automatically
if (isAuthenticated) {
  console.log('Current user:', user);
}