Club administration, member onboarding, and event check-in in one React and Supabase application.

1. Create your local environment file.

   cp .env.example .env

2. Add your Supabase project values.

   VITE_SUPABASE_URL=
   VITE_SUPABASE_ANON_KEY=

3. Install dependencies.

   npm ci

4. Start the app.

   npm start

5. Open the local Vite URL shown in the terminal.

Attendify is a single-page web app for running clubs and tracking attendance without splitting the product into separate admin and participant applications. The same frontend handles:

• club owner authentication and administration
• member join flows driven by invite codes
• member dashboards backed by local browser state
• event check-in links and QR entry points
• attendance rules such as event windows and location-aware validation

The codebase is organized so the route a user sees depends on their role and on the state already stored in the browser.

src/App.tsx defines one router with owner, member, and public routes:

Attendify uses two forms of state together:

• Supabase auth sessions for club owners
• browser localStorage for member identities and joined-club data

src/pages/Entry.tsx reads those signals to route a user into the right experience. Member state is stored with keys such as attendify_clubs, attendify_member_id, and owner_confirmed, which lets a returning member go straight back to their dashboard or check-in flow.

Owners authenticate through AuthContext and manage their clubs through Supabase-backed pages. src/pages/Clubs.tsx resolves ownership through the club_owners table, then loads the linked club records. src/pages/ClubDetail.tsx expands that into operational tooling for:

• viewing club details
• managing members
• creating and editing events
• generating invite codes
• opening QR-based entry pages for join and check-in flows

The member path is intentionally lightweight. src/pages/ClubJoinPage.tsx accepts an invite code, looks up the club, creates or reuses a member_uuid, and stores the resulting membership locally. src/pages/Dashboard.tsx then combines those stored memberships with live event data so a member can see where they belong and what they can attend next.

src/pages/EventCheckinPage.tsx is the attendance engine. It can start from a plain /attend route or from a direct invite-code URL. The screen coordinates:

• event lookup by invite code
• member identification and reuse of the stored member UUID
• optional name matching when a member record already exists
• event timing rules
• location-aware attendance rules
• submission of the final check-in record

src/pages/EventCheckinQR.tsx generates QR entry points that turn an event invite code into a scannable handoff.

src/main.tsx calls setupDatabase() before rendering the app. That startup path lives in src/utils/dbMigrations.ts and is responsible for ensuring the members table supports the member_uuid field used by the join and check-in flows.

src/main.tsx also registers sw.js, so the app ships with service-worker support in the frontend bootstrap.

The repository includes database_schema.json and db_migration.sql as supporting schema references for setting up the backend side of the application.

• React 18
• TypeScript
• Vite 5
• React Router
• Supabase
• Tailwind CSS
• Ionic React
• Framer Motion

MIT