react-jobs is a ReactJS project that allows users to manage job listings with ease. The application is built with a component-based design and offers features like adding, editing, viewing, and deleting jobs. The app includes multiple pages for job listings, adding and editing jobs, and other necessary functionality. The application uses several modern tools and libraries for an enhanced user experience and performance.
- View Jobs: Browse through the available job listings.
- Add Jobs: Add new job listings to the database.
- Edit Jobs: Modify existing job listings.
- Delete Jobs: Remove job listings from the database.
- Routing: Implemented using React Router, Link, and Route to enable smooth navigation without page reloads.
- Notifications: Integrated pop notifications using react-toastify for adding, updating, and deleting job listings.
- Loading Indicators: Used react-spinners to display loading spinners while pages load.
- Custom Icons: Utilized react-icons for an enhanced user interface.
- Multiple Pages: Includes separate pages for Home, Job Listings, Add Job, Edit Job, and Job Details.
- API Integration: The backend is powered by json-server, serving a document as a database with API methods passed as props to React components.
- Route Loaders: Used loaders for edit job listing and delete job listing routes to pre-fetch data before rendering the route element.
-
Frontend:
- ReactJS (Component-based design)
- React Router (Routing)
- Vite (For faster loading and packaging)
- Tailwind CSS (For styling)
- React Icons (For icons)
- React Spinners (For loading indicators)
- React Toastify (For notifications)
-
Backend:
- json-server (For simulating a REST API)
- Clone the repository:
git clone https:/deepankkartikey/react-jobs.git
- Navigate to the Project directory:
cd react-jobs - Install all dependencies:
npm install
- Start the json-server:
npm run server
- Start the react-jobs application:
npm run dev
- Open the browser and go to:
http://localhost:3000/