Job Tracker
Job listing
The Job Tracker app displays the entire list of three job postings with no filters applied. Each row in the table contains the position title, company, status, job description, and action buttons. The interface keeps the same layout of filters and forms as in the first image, but displays all the data from the database.
Listing jobs by criteria
The Job Tracker application filters and displays only one job posting based on the term "CREATEQ" entered in the search field. The table shows the position "Frontend Developer" with the status Offered and a detailed job description. Input fields and filters are located above the table, while action buttons (edit and delete) are on the right side.
"JobForm in React: Managing input and editing of jobs with validation"
This piece of code represents the JobForm React functional component, which is used to enter new jobs or modify existing ones in the Job Tracker application. useState hooks are used to monitor the entered values in the form — title (position name), company (company name), status (application status), description (job description) and error (error message). useEffect reacts when the editJob value is changed. If the user edits an existing entry, the form fields are automatically filled with that ad's data, and previous errors are cleared. The handleSubmit function intercepts the form submission (e.preventDefault()), checks that all fields are filled (using trim() to ignore blank spaces) and, if any fields are missing, sets an error message. Only if the validation is successful will the add or update job logic be called.
Add, delete and edit jobs with localStorage support
This part of the React application manages the job list using React's useState and useEffect. First, the jobs state is initialized by checking whether a list of jobs already exists in localStorage — if there is, it loads and parses it from JSON format, and if not, it creates an empty list. Every time the list of jobs changes (jobs state), useEffect refreshes localStorage so that the data is permanently saved and available even after a page refresh. The addJob function adds a new job to the end of the list, while deleteJob removes a job at the given index and, if that particular job is currently being edited, stops editing by setting editIndex to null. The startEdit function is used to mark a job that the user wants to edit, storing its index in the editIndex state so that job can be displayed and edited in the form. Thus, this logic allows the user to add, delete and change jobs with automatic data saving in the browser's local memory.