rohit7030/job-portal-web-application

Purpose and Runtime

This is a Vite-served React job portal for two roles: job seekers browse/save/apply to jobs, while recruiters create companies, post jobs, and review applications. The frontend uses Tailwind/Shadcn UI, Clerk authentication, and Supabase/PostgreSQL as its backend service. Bootstrap begins at src/main.jsx, with the top-level application in src/App.jsx.

Application Shell and Routing

src/App.jsx defines the page-level application flow, while src/layouts/app-layout.jsx provides the authenticated/shared layout and src/components/Header.jsx exposes primary navigation and user controls. Public-facing landing and job discovery views are in src/pages/landing.jsx, src/pages/job-listing.jsx, and src/pages/job.jsx.

Authentication and Access Boundary

Clerk supplies registration/sign-in and user identity; its publishable key is injected through Vite environment configuration. src/components/protected-route.jsx is the main authorization boundary for restricted workflows, and src/pages/onboarding.jsx captures initial role/profile setup needed before role-specific actions. Client code should treat Clerk identity as the actor identity passed to database operations.

Supabase Data Access

Supabase is initialized in src/utils/supabase.js using VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY. Domain-specific API modules isolate database operations:

• Jobs: src/api/apiJobs.js

• Companies: src/api/apiCompanies.js

• Applications: src/api/apiApplication.js

This creates a clear boundary between page/component interaction code and Supabase queries, including PostgreSQL-backed and potentially realtime data behavior.

Job Discovery and Candidate Workflow

Candidates load listings through src/pages/job-listing.jsx, inspect a selected posting in src/pages/job.jsx, and submit an application through src/components/apply-job.jsx. Job presentation is encapsulated by src/components/job-card.jsx; saved-job behavior is represented by src/pages/saved-job.jsx. The primary flow is: job API fetch → listing/card UI → job-detail page → application API write → application status display.

Recruiter and Company Workflow

Recruiters create/select company context through src/components/add-company-drawer.jsx, then create job records from src/pages/post-job.jsx. Recruiter-owned postings are surfaced in src/pages/my-jobs.jsx and src/components/created-jobs.jsx. This flow establishes company ownership before job creation, then uses the job/application APIs to retrieve postings and associated candidates.

Application Management and Shared UI

Application records are rendered for recruiter review via src/components/created-applications.jsx and src/components/application-card.jsx; these are the core UI stage for tracking candidate status. Shared asynchronous request state is centralized in src/hooks/use-fetch.js. Reusable visual primitives under src/components/ui are Shadcn-style components, with global styling in src/index.css and src/App.css.