How aruku-interactive/ifm-core-ui works
This is a React/Vite web-app template with authentication flows, protected pages, and an example users page. The main workflow routes users through sign-in/sign-up and account confirmation, then uses the authentication context to call auth services, persist session cookies, notify users, and navigate. A separate example page fetches and displays users. Edges are limited to relationships shown in excerpts, the source index, or README; some page-to-form and provider wiring is not shown.
Main entry points: routes.tsx Route table · AuthContext.tsx Auth provider · Users.tsx Users page · PrivateLayout.tsx Private layout
Components 19
Routing and pages
- Route table
src/configs/routes.tsx - Auth layout
src/layouts/AuthLayout.tsx - Private layout
src/layouts/PrivateLayout.tsx
Authentication
- Auth pages
src/pages/auth - Auth forms
src/components/auth - Auth provider
src/context/AuthContext.tsx
Services and state
- Loading state
src/hooks/auth/useAuthState.tsx - Auth service
src/services/auth.service.ts - API service
src/services/api.service.ts - HTTP transport
src/configs/axios.tsx - Cookie service
src/services/cookie.service.ts - Notifications
src/services/notification.service.ts
Example users
- Users page
src/pages/example-users/Users.tsx - Users list
src/pages/example-users/components/UsersList.tsx - Users hook
src/pages/example-users/hooks/useUsers.ts - Users service
src/pages/example-users/services/users.service.ts
Other components
- User
- Application API
- JSONPlaceholder API
Connections 18
- User → Route table: navigates
- Route table → Auth layout: routes auth
src/configs/routes.tsx - Route table → Private layout: routes private
src/configs/routes.tsx - Route table → Auth pages: routes auth
src/configs/routes.tsx - Route table → Users page: routes users
src/configs/routes.tsx - Auth provider → Loading state: uses state
src/context/AuthContext.tsx - Auth provider → Auth service: calls auth
src/context/AuthContext.tsx - Auth provider → Cookie service: reads and writes
src/context/AuthContext.tsx - Auth provider → Notifications: notifies
src/context/AuthContext.tsx - Auth pages → Auth forms: uses forms
src/pages/auth/ResendConfirmationCode.tsx - Private layout → Auth provider: accesses provider
src/layouts/PrivateLayout.tsx - Auth service → API service: calls API
src/services/auth.service.ts - API service → HTTP transport: delegates HTTP
src/services/api.service.ts - HTTP transport → Application API: sends requests
- Users page → Users hook: uses hook
src/pages/example-users/Users.tsx - Users page → Users list: renders list
src/pages/example-users/Users.tsx - Users hook → Users service: loads users
src/pages/example-users/hooks/useUsers.ts - Users service → JSONPlaceholder API: fetches users
src/pages/example-users/services/users.service.ts