README.md

JOBSTER - A React.js Redux CRUD App

JOBSTER is a powerful CRUD application built using React.js and Redux. Its primary functionality revolves around displaying, adding, updating, and deleting job records, complemented by insightful data visualization in the form of charts. The app leverages the RESTful API provided by https://jobify-prod.herokuapp.com/api/v1/toolkit to seamlessly perform these CRUD operations.

Key Features:

• Display: JOBSTER fetches job data from the API and presents it in an intuitive and user-friendly interface, ensuring a seamless browsing experience for users.
• Add: Users can effortlessly add new job listings using a streamlined form. The app validates the input to ensure accurate and complete job information.
• Update: JOBSTER enables users to edit existing job records, empowering them to make changes and updates as needed.
• Delete: Users have the ability to remove job listings that are no longer relevant, providing a flexible and dynamic job management experience.
• Data Visualization: JOBSTER utilizes Recharts, a powerful charting library, to present job-related data in visually appealing charts. This helps users gain insights and analyze trends effortlessly.

Dependencies:

• Axios: A popular JavaScript library used for making HTTP requests. It is employed to communicate with the API and perform the necessary CRUD operations.
• Normalize.css: A CSS reset library that ensures consistent rendering across different browsers and devices.
• React-Redux: The official Redux bindings for React, providing a seamless integration of Redux into the React application.
• React-Toastify: A notification library for React that allows for displaying informative and customizable toasts and notifications to enhance the user experience.
• Recharts: A comprehensive charting library for React that offers a wide range of chart types and customization options.
• Styled-Components: A powerful CSS-in-JS library that enables writing component-level styles using JavaScript, enhancing the modularity and maintainability of the application.

Project Setup:

1. Clone the repository: git clone https://github.com/huzaifaghazali/jobster.git
2. Install dependencies: npm install
3. Start the development server: npm start

Please ensure that you have the latest version of Node.js and npm installed before proceeding with the above steps.

Usage:

• To access the Jobster application, navigate to the provided URL.
• Use the intuitive interface to browse, add, update, and delete job records.
• Take advantage of the visually appealing charts to gain insights and analyze job-related data.

Pictures:

1. Landing Page

   

2. Login Page

   

3. Register Page

   

4. Dashboard Page

   

5. Search Page

   

6. Jobs Page

   

7. Add Jobs Page

   

8. Edit Job Page

   

9. Profile Page

   

10. Area Chart

    

11. BarChat