Job Application Management Frontend

This is the frontend for a Job Application Management system built using React and React Router. The application allows users to browse jobs, apply for jobs, and manage their profiles, while recruiters can manage companies, post jobs, and view applicants. Admin users have access to an additional interface for managing jobs and companies.

Demo Credentials:-

    Student Username: [email protected]
    Student Password: Santosh@1234

    Recruiter Username: [email protected]
    Recruiter Password: Durai@1234

   Admin Username: [email protected]
   Admin Password: admin@1234

Backend Code: https://github.com/hduraimurugan/cpp_backend

Features

Student Interface:

• Browse jobs and apply.
• View job details and manage profile.
• Login and Signup functionality.
  

    Student Username: [email protected]
    Student Password: Santosh@1234

Recruiter Interface:

• Manage companies.
• Post new jobs.
• View applicants for specific jobs.

    Recruiter Username: [email protected]
    Recruiter Password: Durai@1234

Admin Interface:

• Manage jobs and companies via a dedicated admin dashboard.
  
  
  
  

   Admin Username: [email protected]
   Admin Password: admin@1234

Protected Routes:

Routes are protected based on user roles to ensure only authorized users can access certain sections (e.g., recruiters or admins).

Technologies Used

• React
• React Router for navigation
• Redux
• Shadecn
• TailwindCSS for styling
• NodeJs
• MongoDB

Prerequisites

Ensure you have the following installed on your system:

• Node.js
• npm or yarn

Getting Started

1. Clone the Repository

git clone https://github.com/your-username/your-frontend-repo-name.git
cd your-frontend-repo-name

2. Install Dependencies

Install the required dependencies using npm or yarn:

npm install

or

yarn install

3. Run the Application

Start the development server:

npm start

or

yarn start

The application will run on http://localhost:3000.

Project Structure

├── src
│   ├── components
│   │   ├── auth
│   │   │   ├── Login.js
│   │   │   └── Signup.js
│   │   ├── admin
│   │   │   ├── Companies.js
│   │   │   ├── CompanyCreate.js
│   │   │   ├── CompanySetup.js
│   │   │   ├── AdminJobs.js
│   │   │   ├── PostJob.js
│   │   │   └── Applicants.js
│   │   ├── mainAdmin
│   │   │   ├── AdminHome.js
│   │   │   └── ProtectedRouteMain.js
│   │   ├── Home.js
│   │   ├── Jobs.js
│   │   ├── Browse.js
│   │   ├── Profile.js
│   │   └── JobDescription.js
│   ├── App.js
│   ├── App.css
│   └── index.js
├── README.md
└── package.json

Routing Setup

This application uses react-router-dom for navigation between different pages. Below is the routing configuration:

Main Routes

• / - Home page
• /login - Login page
• /signup - Signup page
• /jobs - List of available jobs
• /browse - Browse jobs
• /profile - User profile
• /description/:id - Job description page (with dynamic job ID)

Recruiter Routes (Protected)

• /admin/companies - List of companies (Requires recruiter access)
• /admin/companies/create - Create a new company (Requires recruiter access)
• /admin/companies/:id - Setup or edit company details (Requires recruiter access)
• /admin/jobs - List of jobs posted by the recruiter (Requires recruiter access)
• /admin/jobs/create - Post a new job (Requires recruiter access)
• /admin/jobs/:id/applicants - View job applicants (Requires recruiter access)

Admin Routes (Protected)

• /admin/main - Admin dashboard home (Requires admin access)

Route Protection

• ProtectedRoute: Used to protect recruiter-related routes.
• ProtectedRouteMain: Used to protect admin-related routes.

How to Modify

You can modify the route protection logic or add more routes in the App.js file using the createBrowserRouter function from react-router-dom. Here's an example of a protected route:

{
  path: "/admin/companies",
  element: <ProtectedRoute><Companies/></ProtectedRoute>
}

Customizing

• You can modify the styling by editing the App.css file.
• To customize the components or add new ones, navigate to the src/components/ folder and create or modify existing components.