Job Tracker: Part 1

Searching for jobs can be overwhelming. Many of the applications require a lot of time to complete in a thoughtful way, and it can be especially rough looking for an entry level job. They all somehow seem to require several years of experience from ‘entry level’ candidates. Aside from the stress and crazy hours you have to put in, it is tough to stay organized sometimes. You don’t just have to keep track of which jobs you have applied to, theres also interviews, follow up emails, thank you emails, take home code challenges, and potentially more depending on the company. A few weeks into my job search, I have a hodgepodge of different tracking methods set up. I have several different notes files, and have found the application tracking on most job listing sites to be frustratingly basic.

Last week, I realized what I had to do. I needed a new project to work on, and decided I should build a job tracker. This way, I could both have a project to help myself grow as a developer, and have a custom way to keep myself organized in the job search. This is part one of a series I will be adding to every week until this project is complete. This will be a single page app, with a React frontend. I am still undecided on what to do for the backend, but more on that next week.

The way I imagined this app was as a Kanban board where each column would be a different stage of the application process, and you could move each application between columns by dragging and dropping. When looking at the whole board, each application will render as a small list item with minimal information about the application, such as the name of the company and the position. However, the user will be able to expand each application to read or update information such as number of interviews they have been given so far, how they feel about the company/interview process, and more. Without further ado, lets get started!

I decided to use a drag and drop library called ‘react beautiful dnd’ because compared to other libraries I looked at(including my beloved ‘react-sortable-hoc’) it has very clear documentation on how to set up multiple columns that items can be dragged between. The one issue that I ran into is that the library is deprecated. I had some trouble getting the drag and drop to work at all, but found a super helpful comment that told me one of the prop names needed to be changed(more on that later). As unfortunate as it is that this library is no longer being supported, I don’t feel too bad using it since this is not a production app, just a personal productivity tool.

This weeks goal is just to get the drag and drop working with a few columns, so I am going to be following along with the docs to make a simple to do list with three columns. Next time, I will be customizing it more and changing it from a to do list to a job tracker.

There are 3 main components that go into making a drag and drop with ‘react-beautiful-dnd’

1. A ‘Droppable.’ This component is the place where items can be dropped. In our case, the Droppables will be our list columns. There is one issue that I found with the documentation for this component. It requires a prop called ‘innerRef,’ which should be set to ‘provided.innerRef.’ Provided is an object that ‘react-beautiful-dnd’ gives us to help with reordering items within a Droppable. However, for some reason, you must also set a prop called ‘ref’ equal to ‘provided.innerRef’ as well. I am not sure why this is the case, but it took me hours to figure out!
2. ‘Draggables.’ These components are the ones that get moved around. Our Draggables are the tasks that will be moved between the columns.
3. ‘DragDropContext.’ This component wraps the Draggable. Only things within the DragDropContext can be dragged and dropped.

Once these components have been set up, there are a few methods that we need to define and pass as props to the DragDropContext.

1. ‘OnDragEnd.’ This method defines what happens once we have completed a drag and dropped an item. Without this method, a Draggable would just revert to its original position when dropped.
2. ‘OnDragUpdate.’ This method is called whenever anything changes during a drag, such as a Draggable being put into a new Droppable.
3. ‘OnDragStart.’ We do not strictly need this one, but it is helpful. OnDragStart is called whenever a drag starts, and in our case, we have set it to change the background color whenever a drag is initiated. This effect makes it visually clear when things are being dragged and when they are not.

For ‘OnDragEnd’ and ‘OnDragUpdate,’ I recommend following examples from the ‘react-beautiful-dnd’ documentation. They have pretty thorough explanations for all of the props and methods that are needed for each type of drag and drop you can do. It is better to just use their logic, unless you need it to do something that is not in the documentation.

With all of this setup done, I can finally move on to customizing my drag and drop by adding a few more columns, some custom styling, and changing our data from tasks to job applications. I will be writing more about that next week. For now, you can check out my repo to see code it took to make this three column to do list.

Thanks for reading!