frontend-context

Files (5)

• SKILL.md
• auth-context.md · references/
• pages-context.md · references/
• projects-context.md · references/
• shared-context.md · references/

SKILL.md (first lines)

## Stack

| Technology | Version | Purpose |
|------------|---------|---------|
| Next.js | 15 (App Router) | Framework |
| React | 19 | UI library |
| TypeScript | 5 | Language |
| Tailwind CSS | 4 | Styling |
| shadcn/ui | new-york style | Component library |
| Zod | 4 | Schema validation |
| react-hook-form | 7 | Form handling |
| Recharts | 3 | Charts |
| react-big-calendar | 1 | Calendar views |
| Lucide React | - | Icons |
| SweetAlert2 | 11 | Alert dialogs |
| jspdf / pdfjs-dist | - | PDF handling |
| xlsx | 0.18 | Spreadsheet handling |

**File Naming:**
- ✅ `useAuth.ts` (hooks use camelCase with `use` prefix)
- ✅ `auth.service.ts` (services use dot notation)
- ✅ `ProjectHistory.tsx` (components use PascalCase)
- ✅ `base-client.ts` (lib utilities use kebab-case)
- ✅ `common.ts` (types use camelCase)
- ❌ `Auth_Service.ts` (WRONG — no underscores)

## Scope Detection (ASK IF AMBIGUOUS)

| User Says | Action |
|-----------|--------|
| "add component" | Create in `modules/{domain}/components/` or `shared/components/` |
| "add page", "new page" | Create in `app/(dashboard)/` with proper layout |
| "add service", "connect API" | Create in `modules/{domain}/services/` extending BaseApiClient |
| "add hook" | Create in `modules/{domain}/hooks/` or `shared/hooks/` |
| "add form" | Use react-hook-form + zod, InputField component |
| "fix styling" | Check Tailwind classes, `globals.css` theme vars |

**Examples:**
- "Add a student profile page" → ONE page in `app/(dashboard)/list/students/[id]/`
- "Connect events to the API" → ONE service in `modules/events/services/`
- "Add a search component" → Reuse `shared/components/ui/TableSearch.tsx` or create new

## Directory Structure

```
frontend/
├── app/                          # Next.js App Router
│   ├── layout.tsx                # Root layout (Geist font, metadata)
│   ├── page.tsx                  # Auth check → redirect to role dashboard
│   ├── globals.css               # Tailwind + custom theme vars
│   ├── sign-in/                  # Public auth pages
│   ├── register/
│   ├── forgot-password/
│   ├── reset-password/[token]/
│   ├── confirm-account/
│   ├── hooks/                    # ⚠ Legacy hooks (use modules/ instead)
│   ├── lib/                      # ⚠ Legacy services (use modules/ instead)
│   ├── components/               # ⚠ Legacy components (use modules/ or shared/)
│   └── (dashboard)/              # Route group — requires auth
│       ├── layout.tsx            # Sidebar + Navbar + ProtectedRoute
│       ├── admin/                # Admin dashboard (stats, charts)
│       ├── dean/                 # Dean dashboard
│       ├── teacher/              # Teacher dashboard (calendar)
│       ├── student/              # Student dashboard (calendar)
│       ├── social-outreach/      # Social outreach module
│       ├── projects/             # Project CRUD + bulk upload
│       │   ├── admin/            # Admin project management
│       │   │   ├── new/
│       │   │   └── edit/[id]/
│       │   ├── bulk-upload/
│       │   └── [id]/             # Project detail
│       └── list/                 # Entity listings
│           ├── careers/
│           ├── degreeOptions/
│           ├── events/
│           ├── messages/
│           ├── students/[id]/
│           └── teachers/[id]/
├── modules/                      # ✅ Domain modules (preferred)
│   ├── auth/                     # Authentication — [details](references/auth-context.md)
│   │   ├── hooks/useAuth.ts
│   │   ├── services/auth.service.ts
│   │   └── types/
│   ├── events/                   # Event management
│   │   ├── services/events.service.ts
│   │   └── types/
│   ├── persons/                  # Teachers & students
│   │   ├── services/persons.service.ts
│   │   └── types/
│   └── projects/                 # Project management — [details](references/projects-context.md)
│       ├── components/
│       ├── services/projects.service.ts
│       └── types/
├── shared/                       # ✅ Cross-cutting utilities — [details](references/shared-context.md)
│   ├── components/
│   │   ├── ui/                   # InputField, Table, Pagination, TableSearch
│   │   └── layout/               # Menu, Navbar, ProtectedRoute, RoleProtectedRoute
│   ├── hooks/useUserRole.ts
│   ├── lib/
│   │   ├── api/base-client.ts    # BaseApiClient (fetch wrapper)
│   │   └── auth/token-manager.ts # JWT token storage
│   ├── types/common.ts
│   └── index.ts                  # Barrel exports
├── components/ui/                # shadcn/ui primitives (auto-generated)
├── lib/utils.ts                  # cn() helper
└── public/
```

## Architecture

The frontend uses a **modular architecture** with two layers:

**Module pattern** — Self-contained domain modules under `modules/` with own services, hooks, components, and types. Each module owns its full vertical slice.

| Module | Path | Description |
|--------|------|-------------|
| `auth` | `modules/auth/` | Authentication, JWT, password flows — [details](references/auth-context.md) |
| `projects` | `modules/projects/` | Project CRUD, iterations, reviews, bulk upload — [details](references/projects-context.md) |
| `events` | `modules/events/` | Event CRUD |

From davidleonmayor/proyecto-grado-unimayor, Apache-2.0.

More from davidleonmayor/proyecto-grado-unimayor