Skip to content

Latest commit

 

History

History
185 lines (146 loc) · 4.5 KB

README.md

File metadata and controls

185 lines (146 loc) · 4.5 KB

Job Listing Web Application

Project Overview

This is a Job Listing Web Application where users can:

  • View a list of job opportunities on the left-hand side.
  • Click on a job to view its details on the right-hand side dynamically.
  • Filter jobs by location using a search bar.
  • Sort jobs by posted date or other criteria.
  • Pagination support for better navigation through job listings.

The application is built with:

  • Frontend: React.js (styled with Tailwind CSS)
  • Backend: Node.js, Express.js, and MongoDB (via Mongoose)
  • Deployment:

Features

Frontend Features

  • Dynamic job listing: Displays job opportunities fetched from the backend.
  • Search by location: Filters jobs based on user input.
  • Pagination: Allows users to navigate jobs in chunks.
  • Sort and Filters: Jobs can be sorted by posted date or other parameters.
  • Responsive Design: Works seamlessly across devices.

Backend Features

  • REST API:
    • /api/jobs: Fetches all job data.
    • /api/jobs?location=<location>: Filters jobs by location.
  • MongoDB Integration: Data is fetched from a MongoDB database populated with job listings.

Project Structure

Frontend

frontend/
├── public/
├── src/
│   ├── components/
│   │   ├── JobDetails.jsx
│   │   ├── JobList.jsx
│   │   ├── SearchBar.jsx
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
├── .gitignore
├── package.json
├── tailwind.config.js

Backend

backend/
├── src/
│   ├── config/
│   │   ├── db.js
│   ├── controllers/
│   │   ├── jobController.js
│   ├── models/
│   │   ├── job.js
│   ├── routes/
│   │   ├── jobRoutes.js
│   ├── app.js
├── .env
├── .gitignore
├── package.json

Prerequisites

Ensure you have the following installed:

  • Node.js (v14+)
  • MongoDB
  • npm or yarn
  • Git

Getting Started

Clone the Repository

git clone https://github.com/karthik738/job-listing.git
cd job-listing

Backend Setup

  1. Navigate to the backend folder: 
    cd backend
  2. Install dependencies: 
    npm install
  3. Set up your environment variables in a .env file: 
    MONGO_URI=<your_mongo_connection_string>
PORT=5000
  4. Start the backend server: 
    npm start

Frontend Setup

  1. Navigate to the frontend folder: 
    cd frontend
  2. Install dependencies: 
    npm install
  3. Start the frontend development server: 
    npm run dev

Deployment

Backend Deployment (Railway)

  1. Log in to Railway.app.
  2. Create a new project and link your GitHub repository.
  3. Add your .env variables to Railway's environment settings.
  4. Deploy the backend.

Frontend Deployment (Vercel)

  1. Log in to Vercel.
  2. Create a new project and link your GitHub repository.
  3. Configure the build settings:
    • Framework: React.js
    • Build command: npm run build
    • Output directory: dist
  4. Deploy the frontend.

Assumptions and Challenges

Assumptions

  • Users are searching for jobs primarily based on location.
  • Default sort is by relevance unless specified otherwise.

Challenges

  • Handling large data sets with efficient pagination.
  • Ensuring seamless integration between frontend and backend.

Live URLs

Screenshots

Homepage Screenshot

Search Screenshot

Sort Screenshot

Api Screenshot

Contributing

Feel free to contribute! Please fork the repository and make a pull request.

License

This project is licensed under the MIT License.