shuvrotokumar/halalhire-frontend

1. Overall shape

- This is a Next.js App Router frontend for HalalHire, not a backend service.

- The repository is organized primarily by route folders under app/, with each route owning its page entrypoint, local components, and CSS Modules.

2. Composition root

- app/layout.tsx is the app shell where the major cross-cutting providers are mounted.

- The important global layers are:

- Redux provider

- i18n provider

- global styling via app/globals.css

- This is the boundary where app-wide state, localization, and styling become available to all routes.

3. Main product domains

- The UI splits into a few large domains:

- Marketing/content pages: home, about, industries, resources, FAQ, contact, legal pages

- Jobs marketplace: job listings and job detail pages

- Companies marketplace: company listing and company detail pages

- User/company account flows: auth, onboarding, profiles, verification, settings, subscriptions

- These domains are mostly isolated as route-level feature trees.

4. Public marketing and information pages

- Routes like app/page.tsx, about, industries, resources, contact, faq, privacy, terms, imprint, cookies, and accessibility are mostly informational.

- They are composed from reusable section components under the same route subtree, which suggests a content-driven frontend with strong page composition rather than a monolithic CMS layer.

5. Job marketplace subsystem

- app/jobs and app/jobs/[id] implement the job browsing and job detail experience.

- Shared building blocks live in app/components/Job*:

- search and filtering

- job cards and detail sections

- sidebar, match, and feature panels

- modals for edit/delete/application actions

- User-facing job actions also connect to saved/applied jobs pages, indicating a workflow from browse → inspect → act → track.

6. Company marketplace subsystem

- app/companies and app/companies/[id] cover company discovery and company profile detail pages.

- The company detail page is split into focused sections like hero, stats, about, sidebar, and CTA blocks.

- Related company lifecycle pages exist separately: onboarding, verification, subscription, team management, active subscriptions, profile, and requirements.

7. Authenticated user and onboarding flows

- Routes such as auth, completed_auth, forgot_pass, reset_pass, forgot_code, create_user_verify, identity_doc, personal_info, professional_info, and photos_finalize form a staged account setup and recovery flow.

- user_profile, user_settings, user_saved_jobs, and user_applied_jobs represent the post-auth user account area.

- This suggests the frontend supports multi-step identity and profile completion, not just simple login/logout.

8. Company admin/workflow flows

- Routes like company_profile, company_team, company_ver, company_req, company_subscription, company_active_subscriptions, and company_on indicate a parallel company-side administration area.

- These screens are likely tied to subscription, verification, team membership, and job request/approval workflows.

- The presence of request detail routes and decision modals points to a review/approval process for employer-side actions.

9. Shared interaction layer

- app/components/ contains reusable UI primitives and cross-route interaction components such as:

- navbar, footer, hero/feature blocks

- job and company cards

- modal dialogs for apply/chat/confirm/edit/delete/accept/reject

- forms and side panels

- app/context/ModalContext.tsx, AuthContext.tsx, and RegistrationContext.tsx provide local UI/workflow state that sits above individual pages but below the Redux data layer.

10. State management and backend boundary

- The persistent application state is handled with Redux Toolkit, with slices in redux/Slice/ for auth and registration.

- Server data is fetched through RTK Query endpoint modules in redux/api/.

- redux/api/baseApi.js is the key integration boundary: it reads the API base URL from config/envConfig.js, so the frontend is configured to talk to an external backend rather than hosting business logic itself.

- services/auth.service.js, Utils/decode-access-token.js, Utils/local-storage.js, and redux/TokenCleanup.jsx handle token/storage concerns around authentication.

11. Localization subsystem

- Internationalization is a first-class architectural concern.

- i18n.ts and i18next.config.ts define the locale setup, while translation files live in public/locales/<lang>/translation.json.

- Supported languages include Arabic, German, English, and Turkish.

- The selected language is persisted via the i18next cookie, making localization state part of the client-side session experience.

12. Static assets and delivery

- public/ holds static assets, including locale JSON and a demo video.

- Styling is primarily through CSS Modules colocated with each component, with global styles reserved for app-wide defaults.

- The repo also includes standard frontend tooling: TypeScript, ESLint, PostCSS/Tailwind support, and Next.js build/runtime configuration.

13. Architecture in one sentence

- The app is a localized, Redux-powered Next.js frontend that routes users through public content, job/company browsing, and authenticated employer/candidate workflows, while all remote data comes from an external API layer behind RTK Query.