David Fox - BlogJob Listing App

Concept Image

Job Listing App

Live URL: Job Listing App

Overview

The Job Listing App is a full-stack application that allows users to view, add, edit, and delete job listings. Built with modern web technologies, it ensures a responsive and interactive user experience.

Features

  • Responsive Design: Fully responsive, ensuring compatibility across all devices.
  • Job Management: Add, edit, delete, and view job listings.
  • Pagination: Browse job listings with pagination support.
  • Prop Validation: Ensures component reliability through prop types validation.

Technologies Used

  • Frontend: React, Tailwind CSS, Vite
  • Backend: Node.js, Express, JSON-Server
  • Others: Concurrently

Installation and Setup

  1. Clone the repository:

shCopy codegit clone https://github.com/maesterfox/jobListingApp.git
cd jobListingApp

  1. Install dependencies:

shCopy codenpm install

  1. Start the development server:

shCopy codenpm run dev

  1. Open your browser and navigate to http://localhost:5173.

Usage

  • Viewing Jobs: Navigate to the home page for recent job listings or the "Browse Jobs" page for all listings with pagination.
  • Adding a Job: Click on "Add Job", fill in the details, and submit.
  • Editing a Job: Click on "Edit Job", update the details, and submit.
  • Deleting a Job: Click on "Delete Job" and confirm the deletion.

Development Process

  1. Initial Setup: Used Vite for fast development. Installed React, Tailwind CSS, and JSON-Server.
  2. Component Design: Created reusable components like JobListing and JobPage.
  3. State Management: Managed state with React’s hooks.
  4. Styling: Applied Tailwind CSS for consistent and rapid styling.

Live Project

Repo