Initialize frontend folder structure with documentation and path aliases

package.json

@@ -48,8 +48,5 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.3",
     "vite": "npm:rolldown-vite@^7.2.2"
-  },
-  "overrides": {
-    "vite": "npm:rolldown-vite@7.2.2"
   }
 }

src/README.md

@@ -0,0 +1,106 @@
+# Source Directory Structure
+
+This document describes the organization of the InterviewMint frontend source code.
+
+## Directory Overview
+
+```
+src/
+├── assets/          # Static assets (images, fonts, etc.)
+├── components/      # Reusable UI components
+│   ├── common/      # Shared components (Button, Input, Card)
+│   ├── ui/          # UI-specific components (Modal, Dropdown)
+│   └── forms/       # Form components
+├── pages/           # Page-level components
+├── features/        # Feature-specific modules
+├── hooks/           # Custom React hooks
+├── services/        # API services and external integrations
+│   ├── api/         # API client and services
+│   ├── storage/     # Storage utilities
+│   └── analytics/   # Analytics services
+├── store/           # Zustand state management
+├── types/           # TypeScript type definitions
+├── utils/           # Utility functions and helpers
+├── constants/       # Application constants
+├── config/          # Configuration files
+├── layouts/         # Layout components
+└── styles/          # Global styles and theme
+
+## Architecture Principles
+
+### Component Organization
+
+- **Components**: Reusable UI building blocks, organized by category
+- **Pages**: Route-level components that compose features and components
+- **Features**: Self-contained modules with their own components, hooks, and logic
+- **Layouts**: Structural wrappers that define page templates
+
+### State Management
+
+- **Zustand** for global state management (auth, user preferences, etc.)
+- **React Query** for server state (API data fetching and caching)
+- **Local state** (useState) for component-specific state
+
+### Code Organization Best Practices
+
+1. **Colocation**: Keep related code close together
+2. **Single Responsibility**: Each module should have one clear purpose
+3. **Dependency Direction**: Dependencies should flow toward the domain layer
+4. **Abstraction Levels**: Separate business logic from presentation
+
+### Import Conventions
+
+Use path aliases for cleaner imports:
+
+```tsx
+// Bad
+import { Button } from '../../../components/common/Button';
+
+// Good
+import { Button } from '@/components/common';
+```
+
+Configure path aliases in `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+## Technology Stack
+
+- **React 19** - UI library
+- **TypeScript** - Type safety
+- **Vite** - Build tool and dev server
+- **React Query** - Server state management
+- **Zustand** - Client state management
+- **Axios** - HTTP client
+- **Zod** - Schema validation
+
+## Getting Started
+
+1. Explore each directory's README.md for specific guidelines
+2. Follow existing patterns when adding new code
+3. Write tests for critical functionality
+4. Keep components small and focused
+5. Document complex logic
+
+## File Naming Conventions
+
+- **Components**: PascalCase (e.g., `UserCard.tsx`)
+- **Hooks**: camelCase with `use` prefix (e.g., `useAuth.ts`)
+- **Utils**: camelCase (e.g., `formatters.ts`)
+- **Types**: PascalCase (e.g., `User.ts`)
+- **Constants**: UPPER_SNAKE_CASE or camelCase files (e.g., `API_ENDPOINTS`)
+
+## Additional Resources
+
+- [React Best Practices](https://react.dev/learn)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+- [Zustand Documentation](https://zustand-demo.pmnd.rs/)
+- [React Query Documentation](https://tanstack.com/query/latest)

src/components/README.md

@@ -0,0 +1,34 @@
+# Components
+
+This directory contains reusable UI components organized by category.
+
+## Structure
+
+- **common/** - Shared components used across the application (e.g., Button, Input, Card)
+- **ui/** - UI-specific components (e.g., Modal, Dropdown, Tooltip)
+- **forms/** - Form-related components (e.g., FormInput, FormSelect, FormCheckbox)
+
+## Naming Convention
+
+- Use PascalCase for component names (e.g., `Button.tsx`, `UserCard.tsx`)
+- Each component should have its own folder if it includes styles or tests
+- Export components from index files for cleaner imports
+
+## Example
+
+```tsx
+// components/common/Button/Button.tsx
+export interface ButtonProps {
+  label: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary';
+}
+
+export const Button: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary' }) => {
+  return (
+    <button className={`btn btn-${variant}`} onClick={onClick}>
+      {label}
+    </button>
+  );
+};
+```

src/components/common/index.ts

@@ -0,0 +1,2 @@
+// Export common components here
+// Example: export { Button } from './Button';

src/components/forms/index.ts

@@ -0,0 +1,2 @@
+// Export form components here
+// Example: export { FormInput } from './FormInput';

src/components/ui/index.ts

@@ -0,0 +1,2 @@
+// Export UI components here
+// Example: export { Modal } from './Modal';

src/config/README.md

@@ -0,0 +1,69 @@
+# Config
+
+This directory contains application configuration files and setup.
+
+## Structure
+
+Configuration for libraries, services, and application setup.
+
+## Example
+
+```tsx
+// config/axios.ts
+import axios from 'axios';
+import { API_BASE_URL, API_TIMEOUT } from '@/constants';
+
+export const axiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: API_TIMEOUT,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor
+axiosInstance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// Response interceptor
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      // Handle unauthorized
+      localStorage.removeItem('token');
+      window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+// config/reactQuery.ts
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 30, // 30 minutes
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+```
+
+## Best Practices
+
+- Initialize third-party libraries here
+- Keep configuration separate from constants
+- Use environment variables for sensitive data
+- Export configured instances, not raw configurations

src/config/index.ts

@@ -0,0 +1,3 @@
+// Export configuration here
+// Example: export { axiosInstance } from './axios';
+// Example: export { queryClient } from './reactQuery';