Hirescape is a powerful, full-stack job management platform designed to make job listing, application tracking, and user management smooth and intuitive. With a sleek UI, advanced filtering, and pagination, Hirescape provides a seamless user experience for job seekers and recruiters alike.

->Frontend: -React.js + Next.js – Blazing-fast front-end framework for dynamic and SEO-friendly pages. -Tailwind CSS – Utility-first CSS framework for responsive design and UI customization. -React Query Toolkit – For managing server state and simplifying data-fetching.

->Backend: -Node.js + Express – Scalable backend for handling server logic and API routes. -MongoDB – Document-based NoSQL database for flexible, fast data storage.

->Authentication: -JWT-based authentication for secure and stateless user login and registration.

->Deployment/DevOps: -Docker – For containerized deployment and consistent development environments. -GitHub Actions – CI/CD for automated testing, builds, and deployments.

->Hosted on Vercel / AWS for high availability and performance.

• 📝 Job Management – Effortlessly create, update, and manage job listings.
• 🔒 Authentication – Secure user registration and login.
• 🔍 Advanced Search & Filtering – Easily search and filter job listings by categories, location, type, and more.
• 📊 Responsive Dashboard – Track job listings, manage user activity, and gain insights into platform usage.
• 💡 Sleek UI – Clean, user-friendly interface built with Tailwind CSS for both mobile and desktop views.
• 🔄 Pagination – Efficient pagination for job listings to enhance performance and usability.
• 📱 Mobile-Responsive – Optimized for all device sizes, ensuring smooth functionality everywhere.

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/engraya/hirescape
cd hirescape

Project Structure

Setup 1.Navigate to the frontend folder:

cd ../hirescape

2.Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and go to:

http://localhost:3000

Installation

Install the project dependencies using npm:

# Clone the repository
git clone https://github.com/engraya/hirescape

# Navigate into the project
dc hirescape

# Install dependencies
npm install   # or yarn install

🧱 Project Structure (Simplified)

src/
├── components/       # Reusable UI components (Buttons, Forms, Cards)
├── assets/           # Static files and images
├── layouts/          # Layouts for different page structures
├── lib/              # Utility functions and database configurations
├── pages/            # React components for routing (Home, Login, Dashboard, etc.)
├── types/            # TypeScript types
├── services/         # Functions for interacting with the backend APIs
├── store/            # State management logic (using React Query)
├── styles/           # Global CSS and Tailwind configurations
└── utils/            # Helper functions (pagination, search, etc.)

1. User Authentication: Users can securely sign up and log in with JWT tokens for session management.
2. Job Listings: Create and manage job listings with ease. Users can update and delete listings from their dashboard.
3. Dashboard: The dashboard provides a quick overview of job listings, along with easy navigation for posting new jobs, viewing existing ones, and monitoring applications.
4. Search & Filtering: Users can search for jobs by keyword, location, and category, and apply advanced filters to narrow down results.
5. Pagination: Pagination ensures that large job listings are efficiently displayed in smaller chunks for faster page load times.

• 🔴 Real-time Notifications – Get real-time updates when new job applications or listings are posted.
• 📊 Admin Analytics – Admin dashboard to track site usage, popular jobs, and application trends.
• 🧑‍🤝‍🧑 User Roles and Permissions – Add user roles (admin, recruiter, job seeker) with customized access controls.
• 💬 Job Seeker Messaging – Direct messaging between recruiters and job seekers.

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch: git checkout -b feature-branch
3. Commit changes: git commit -m "Added new feature"
4. Push to GitHub: git push origin feature-branch
5. Open a Pull Request 🎉

• React.js for its flexible component-based architecture.
• Next.js for server-side rendering and building static pages.
• Tailwind CSS for beautiful, responsive design.
• MongoDB for scalable, flexible data storage.
• Vercel and AWS for fast and reliable cloud hosting.
• JWT for secure and stateless authentication.

You can deploy Hirescape on platforms like Vercel, Render, AWS Lambda, Firebase Functions, or Heroku.

Vercel Deployment

• Push the project to a GitHub repository.
• Connect your GitHub repo to Vercel.
• Set up the environment variables in Vercel's dashboard for production.
• Deploy the app to Vercel.
• Vercel will automatically build and deploy the app whenever changes are pushed to your main branch.

• 👨‍💻 Author: Ahmad Yakubu Ahmad (@engraya)
• 📧 Email: [email protected]
• 🌐 Portfolio: https://engrahmadaya.vercel.app