✦ Angular Event Checkin Board

Angular event registration desk with ticket scanning, guest queues, zone capacity, badge printing, and API-ready mock data.

---

✨ Highlights

• Event check-in board with scanner input, guest manifest, venue zones, and badge queue
• Mock attendees, ticket codes, access tiers, venue zones, and event metadata shaped like a future API
• Working actions: scan ticket, check in guest, undo check-in, flag for review, clear review, queue badge, print badge, export CSV
• Local persistence for attendee status and badge queue changes
• Angular Signals for computed stats, filtered guest lists, zone capacity, and badge preview
• Tailwind-first UI with Lucide Angular SVG icons and no component CSS files

🧱 Angular Structure

The app is intentionally split into small standalone components instead of one large root template:

src/app/
|-- app.config.ts
|-- app.html
|-- app.spec.ts
|-- app.ts
|-- data/
|   `-- mock-event-checkin.ts
|-- models/
|   `-- event-checkin.ts
|-- services/
|   `-- checkin-state.ts
`-- features/
    `-- checkin/
        |-- checkin-board.component.html
        |-- checkin-board.component.ts
        `-- components/
            |-- attendee-queue/
            |-- badge-preview/
            |-- event-brief/
            |-- metric-strip/
            |-- scanner-panel/
            `-- zone-turnstile/

App only mounts the feature. CheckinStateService owns state and actions. Feature components focus on one UI responsibility each.

🛠️ Tech Stack

• Angular 21 with standalone components
• Angular Signals and computed state
• TypeScript 5.9
• Tailwind CSS 4 via @tailwindcss/postcss
• Lucide Angular SVG icons
• Vitest through the Angular CLI unit-test builder

🔌 Mock API Contract

The mock event data lives in src/app/data/mock-event-checkin.ts and follows backend-friendly shapes:

• EventInfo
• VenueZone
• Attendee
• CheckinStats

The UI reads and mutates state through CheckinStateService, so the mock source can later be replaced with HttpClient endpoints.

🚀 Local Development

npm install
npm start

Open http://localhost:4200.

🧪 Checks

npm test -- --watch=false
npm run build

🌐 Vercel Deployment

The repository includes vercel.json for Angular static deployment:

{
  "framework": "angular",
  "buildCommand": "npm run build",
  "outputDirectory": "dist/angular-event-checkin-board/browser"
}

📄 License

MIT License. See LICENSE.