A enterprise-grade talent acquisition and recruitment engine engineered for low-latency job discovery, localized user journeys, and deterministic state transitions.
Portal is built on a modern, decoupled architecture designed to streamline candidate matching. The frontend client acts as a high-fidelity portal that connects global applicants to targeted career opportunities.
- Product Vision: To eliminate friction in recruitment workflows by providing candidates with real-time feedback loops, instantaneous profile syncing, and rich multi-criteria search selectors.
- User Experience Goals: Delivering sub-100ms interface transitions, accessible and bidirectional (RTL/LTR) interactions, and a clean minimalist aesthetic characterized by a custom dark-space visual architecture.
- Frontend Engineering Philosophy: Strictly adhering to declarative routing constraints, unidirectional data flows, runtime type safety at boundary interfaces, and client-side optimization patterns that minimize cumulative layout shift.
The Portal frontend is a responsive client application that exposes the recruitment ecosystem to authenticated candidates and anonymous users.
Users interact with the portal primarily through the job matching engine. Candidates filter vacancies across multiple dimensions—such as work mode, geographical location, job category, and experience criteria. Query matrices are synchronized in real-time with the central application state.
Security is handled through a seamless cookie-based authorization flow. Session persistence is managed through an abstract Zustand store, which triggers automatic session refresh patterns behind the scenes when a candidate's credentials expire. Authentication forms leverage automated input validation and localized translation lookups.
Upon authentication, candidates gain access to a protected workspace. Within this dashboard, users can track current job applications, view status updates, and update their primary profile attachments. The upload pipeline is designed to support multipart payloads for user avatars and professional CV files.
The UI incorporates a unified translation engine. With a single click, users can toggle the localized layout between English (left-to-right) and Arabic (right-to-left). The DOM reacts dynamically, restructuring elements, resetting text directions, and loading appropriate typography settings.
Traditional recruitment portals often suffer from high operational latency, bloated bundle sizes, and rigid layouts that fail to accommodate multi-language markets. This leads to high abandonment rates during application processes and insecure session handling.
Portal was developed as a direct solution to these challenges:
- Decoupled State: By isolating network calls and persisting session states inside a structured local client storage framework, we avoid unnecessary server round-trips and provide a resilient offline-first read environment.
- Performance-First Design: Built with Tailwind CSS v4 and Vite, the portal ensures minimal style payloads and rapid initial page loads.
- Bilingual Compliance: A core requirement of modern enterprise systems is localized support. Portal supports RTL and LTR layouts natively, eliminating layout breaks when translating content.
Fully fluid layouts engineered using Tailwind CSS. The application scales from a slide-out mobile menu drawer to full widescreen desktop dashboard arrays.
Cookie-scoped authorization mechanisms that support automatic session renewal, credential verification, signup workflows, and secure sign-out operations.
Route-level navigation guards that evaluate candidate credentials before allowing transition to restricted sub-routes, automatically redirecting anonymous sessions to the login state.
Dynamic template rendering that displays action controls conditionally, restricting file uploads and job applications to authorized candidate profiles.
Data-driven workspace components that track the candidate's active application progress, showing real-time feedback status and chronological application history.
A reactive state layer powered by Zustand. It separates business logic from views and selectively persists credentials and user settings in storage (portal-storage).
An Axios client instance customized with request interceptors to pass localized headers and response interceptors to orchestrate token-refresh requests on HTTP 401 errors.
Declarative validation schemas engineered with Zod that intercept form submissions and map translated error messages directly to individual inputs.
A modular library of components—including layouts, filter panels, load indicators, and interactive forms—designed to optimize maintainability.
A design system based on Tailwind v4 color variables, featuring a high-contrast dark space theme anchored by a signature mint brand tone (#00FFB9) and deep navy background (#000028).
A layout system built to adjust automatically to document directions (dir="rtl" or dir="ltr"), featuring clean text styling, accessible form labels, and keyboard-friendly menus.
Resilient handling of async fetch failures, providing instant toast notifications and graceful component state fallbacks without crashing the app.
Non-blocking, programmatic status updates delivered via react-hot-toast to notify users of successful applications, profile modifications, or system errors.
Custom spinner overlays and visual loading indicators that mask API network latency and prevent cumulative layout shifts during async mounting.
A structured search interface that parses and cleans search criteria before submitting search queries to the backend.
Segmented data-fetching limits combined with job list counters to prevent list bloat and ensure fast client processing times.
Key metric blocks and stats displays that present metrics (such as candidate applications and partner counts) in clear, structured panels.
Custom multipart/form-data integrations that handle direct file uploads for candidate CVs and avatar images, complete with real-time UI feedback.
A default, optimized dark color palette designed to decrease eye strain, improve text contrast, and maintain a premium SaaS aesthetic.
Vite-driven build steps, tree-shaken Lucide icons, lazy routing layouts, and partial state persistence queries that keep application memory footprints minimal.
The UI architecture isolates user interaction, global application state, and data fetching operations:
graph TD
subgraph Presentation Layer
Routes[AppRoutes]
Layouts[MainLayout]
Pages[Pages]
Components[Reusable Components]
end
subgraph Logical State Layer
Store[Zustand Store]
Validation[Zod Schemas]
I18n[i18n Translation]
end
subgraph Data Access Layer
Axios[Axios Instance]
API[Backend API REST]
end
Routes --> Layouts
Layouts --> Pages
Pages --> Components
Components --> |Trigger Actions & Selectors| Store
Components --> |Validate Form Inputs| Validation
Store --> |Apply Translations| I18n
Store --> |API Requests| Axios
Axios --> |HTTPS request-reply / interceptors| API
- Node.js (version 18.0.0 or higher)
- npm (version 9.0.0 or higher)
Create a .env file in the root directory:
VITE_API_URL=http://localhost:3000/apiInstall project dependencies:
npm installLaunch the local development environment:
npm run devCompile and bundle the production assets:
npm run buildRun ESLint to check for stylistic and program errors:
npm run lint