FEDF Educational Dashboard Frontend

Build features for a React + TypeScript + Vite educational dashboard that tracks learning activities, streaks, skills, and insights with authentication-protected routes.

Architecture Overview

**Tech Stack:**

**Project Structure:**

Step-by-Step Instructions

1. Authentication & Protected Routes

**AuthContext is the single source of truth:**

**Protecting routes:**

2. Data Flow & API Integration

**Current state (mock APIs):**

**When integrating real backend:**

3. Component Patterns

**Dumb components (presentation):**

**Smart components (container):**

**Component organization:**

4. Routing & Pages

**Adding a new page:**

1. Create `src/app/newpage/page.tsx` (or `[param]/page.tsx` for dynamic routes)

2. Import in `App.tsx` and add `<Route>` entry

3. Wrap with `<ProtectedRoute>` if auth required

4. Load data from `api.ts` with types from `src/types/dashboard.ts`

**Dynamic routes:**

5. Styling Conventions

**Always use CSS variables from `App.css`:**

**Styling approach:**

6. Type Safety

**TypeScript conventions:**

7. Loading & Error States

**Pattern for data fetching:**

```typescript

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

useEffect(() => {

setLoading(true);

Promise.all([

getDashboardStats(),

getActivityData(),

// ... other calls

])

.then(([stats, activity]) => {

// Set state

})

.catch(error => {

// Handle error

})

.finally(() => setLoading(false));

}, []);

if (loading) return <div>Loading...</div>;

```

8. Development Commands

```bash

npm run dev # Start dev server on localhost:5173

npm run build # TypeScript compile + Vite build → dist/

npm run lint # ESLint check (use --fix for auto-fixes)

npm run preview # Preview production build

```

Critical Rules

**MUST:**

**AVOID:**

Common Tasks Examples

**Add authenticated page:**

1. Create `src/app/mypage/page.tsx`

2. Add to `App.tsx`: `<Route path="/mypage" element={<ProtectedRoute><MyPage /></ProtectedRoute>} />`

3. Use `useAuth()` for user data

4. Fetch data from `api.ts` on mount

**Create new component:**

1. File: `src/components/MyComponent.tsx`

2. Export: `export function MyComponent({ data }: Props) { ... }`

3. Add to `src/components/index.ts`: `export { MyComponent } from './MyComponent'`

4. Use: `import { MyComponent } from '../../components'`

**Replace mock API:**

1. Find function in `src/services/api.ts`

2. Replace body with real fetch/axios call

3. Keep return type matching `src/types/dashboard.ts`

4. Add error handling with try-catch

5. Test with real backend

Project Context

This is an educational dashboard tracking user learning activities with streaks, skills visualization, and personalized insights. The architecture prioritizes simplicity (Context API over Redux), type safety (strict TypeScript), and fast iteration (Vite HMR). Currently uses mock APIs ready to be swapped for real backend integration.