PiATS- Applicant Tracking System

This repository contains the frontend for the PiATS, a modern Applicant Tracking System (ATS). It provides a platform for candidates to view job openings, submit applications, and for recruiters to manage jobs and review applicants.

This project was bootstrapped with Vite and is built using React, TypeScript, and Tailwind CSS.

Key Features

• Job Listings: Publicly accessible page to browse and search for open positions.
• Job Details: A detailed view for each job, including description and requirements.
• Online Applications: A user-friendly form for candidates to apply for jobs directly.
• Recruiter Dashboard: A protected area for recruiters to manage job postings.
• Applicant Viewer: A protected view for recruiters to see all applicants for a specific job.
• Responsive Design: A modern, responsive UI built with shadcn/ui and Tailwind CSS.

Tech Stack

This project utilizes a modern frontend stack:

• Framework: React
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Routing: React Router
• Data Fetching & State Management: TanStack Query
• Form Handling: React Hook Form with Zod for validation.
• Linting: ESLint

Project Structure

The src directory is organized as follows:

src/
├── assets/         # Static assets like images and icons
├── components/     # Reusable React components
│   ├── ui/         # UI components from shadcn/ui
│   └── ProtectedRoute.tsx # Component for handling protected routes
├── hooks/          # Custom React hooks
├── lib/            # Utility functions
├── pages/          # Top-level page components for each route
├── App.tsx         # Main application component with routing
└── main.tsx        # Application entry point

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Make sure you have Node.js (v18 or higher) and npm installed.

Installation

1. Clone the repository:

   git clone <YOUR_GIT_URL>

2. Navigate to the project directory:

   cd talent-pipeline-builder-ats

3. Install NPM packages:

   npm install

Running the Application

To start the development server, run:

npm run dev

The application will be available at http://localhost:5173 by default.

Available Scripts

In the project directory, you can run the following commands:

Command	Description
npm run dev	Starts the development server with Hot-Reloading.
npm run build	Bundles the app for production.
npm run preview	Serves the production build locally for preview.
npm run lint	Lints the codebase using ESLint.

Routing

The application uses react-router-dom for client-side routing. Here are the main routes:

Path	Page Component	Description
/	Index	Displays the list of available jobs.
/jobs/:jobId	JobDetails	Shows details for a specific job.
/jobs/:jobId/apply	ApplicationForm	A form to apply for a specific job.
/login	Login	The login page for recruiters.
/dashboard	Dashboard	Recruiter dashboard (Protected).
/dashboard/jobs/:jobId/applicants	Applicants	View applicants for a job (Protected).
*	NotFound	A fallback page for any other route.

Authentication

Authentication is handled on the client side.

• The Login page simulates a login process and, upon success, stores an isAuthenticated flag, userRole, and a token in localStorage.
• The ProtectedRoute component checks for the isAuthenticated flag in localStorage to determine if a user can access protected routes like /dashboard.
• Logging out removes these items from localStorage and redirects the user to the login page.

Deployment

To deploy this application, you first need to create a production-ready build:

npm run build

This command generates a dist folder in the project root, which can be deployed to any static site hosting service like Vercel, Netlify, or GitHub Pages.