Small Job Tracker in React + Material UI (Updated on 13/4/2023)
Source: html – https://projects.juanmanuelarmas.com/html/jobtracker/
React/GitHub – https://github.com/jmcanario/job-search-project
Project Overview:
As a way of enhancing my React and Material UI skills, I embarked on a small project to create a job tracker that includes multiple functions. My ultimate goal is to organize all the pertinent information in separate applications, including data on companies, networking opportunities (events and contacts), and more. Essentially, it will be a digital notebook with added functionality.
Important:
This project uses only frontend technologies, so any added information will be deleted if you refresh the page. Also, the information used is not real.
Design Approach:
I just simply started to use material UI and research about it, due to my experience with Bootstrap, I do not find it difficult to implement it. Based on it being a small personal project, I decided to add features on the way.
Key Features:
- A progress bar of jobs I have applied to, similar to the job center model.
- A tool to record information on companies in the area or those I am interested in working for.
- A contacts page where I can keep track of the people I would be meeting at networking events and elsewhere.
- A calendar to add upcoming events and meetings.
- A to-do list to better structure my day-to-day activities.
This project is still in development, and I will continue to improve it over time. My next goal is to make it more mobile-friendly, but it is not at the moment. I would also improve the design, add features and the user experience.
Technologies Used:
- FullCalendar
- Material UI (and dayjs)
- React
Challenges and Solutions:
I encountered some small challenges where I was stuck for some days. Most of them were in the calendar section, where I encountered the following issues:
- Because I used Material UI date picker, I needed to use one of the APIs they use to format the dates and times. I found difficulties in adding this information in the form and showing it when I sent it. By using console.log, I discovered that the issue was with dayjs, which I then fixed by researching in their documentation page and experimenting.
- When I was able to solve this issue, I encountered another one that took me longer. The issue was that the new information was not being added to the array where all the events are stored after I pressed the add button. By accident, I discovered that pressing the button twice added the information to the array, but it did not show in the calendar. I solved these issues by asking for help from experts, so I often go to codebar.io where I was assigned a coach. This person helped me with brainstorming and found other teachers to assist me. First, I was adding the console.log in the wrong place, and to add it as I wanted, the teacher showed me some tricks to do it by making everything in a new object. Doing so, the button started to work. To solve the issue of the event not being added, the problem was the date format was incorrect. I learned a lot from them, and I am very grateful to have found them, so I will collaborate with them as much as I can in the future.
