Searching for and tracking jobs is a tedious task that for most involves a spreadsheet. The accessibility of spreadsheets makes them the go to tool but they lack integration with other applications and become unmanagable at scale quickly.
5SecondJobs empowers a precise search where users can efficently discern job match and seamlessly move a job application's status. Let's delve into the features of the application and the development process.
Features
The web application is composed of three separate pages including the jobs, saved, and completed pages. Each page has a similar composition with a filter bar at the top and an infinite paginated scroll of job listings below.
The filters include job title search, location, and experience level. Filters are bookmarkable and the URL dynamically changes in response to changes in the filter selection. Additionally, the job listing count regarding a set of filters is displayed on the right of the search bar.
The job listing are displayed in an infinite paginated scroll. Each job card presents available key information about a given job and expands to show additional details. User actions include opening job links, marking listings as saved, completed, or deleted.
The companies a user applied for are also tracked and job listing for the same given company show the last applied date. These pages are only available upon logging in and these routes are protected with authentication.
I plan to add the ability to update the status of a job application beyond completion with a predefined set of options and an additional text field. Further, I will implement an export to csv feature for completed jobs for portability.
Implementation
I used Next.js as a full-stack framework to build both the React frontend and the serverless backend using its built-in route handlers. For UI, I used Tailwind, Heroicons, and Framer Motion. For authentication, I used Auth.js. For state management, I used React Query. For my database I used PostgreSQL.
I deployed the web application to Vercel using a serverless setup and I'm hosting my serverless Postgres database on Neon Tech.
What was the most difficult technical challenge?Setting up the infinite paginated scroll with React Query was the most difficult challenge. From the beginning of the project, I wanted the application to be fast and responsive. To achieve, this I used streaming with fallback UI and prefetching. Initially, when I started I thought I would want to prefetch my whole initial view but then quickly realized that using Suspense boundary lines provided a much more responsive experience.
The difficulties arised when I made a module a client component and then a server function that was dependent on that module stopped working. I addressed this by decoupling my main query functions, so job listing could be obtained on the server by calling a server function not an API and the client would call the APIs. In this process I gained a deep understanding on the relationship between client and server side rendering.
I value good design. Ideologically, "form follows function" encompasses my design ethos for functional web applications. The job cards display only the essential information required for deciding whether to pursue a role. The visual design clearly distinguishes different types of information and each job card occupies the same amount of space to maintain uniformity. This improves readability by reducing the amount of shifting text when jobs are removed from the view.
Web Scraping
The data in the website is obtained from a Node.js script that scrapes and parses a job board API. As the usage policy is not stated, I did not publish the script. Additionally, 5SecondJobs is not a commercial product and only a personal project. For the script I used Axios for fetching, Knex for database migrations, Postgres-Node for database querying, and Winston for error logging.
To mitigate API rate limiting and possible bot detection software, the time between request is generated using a log-normal distribution. Further, I have set up exponential request retries with Axios Retry.
Workflow Demostration
Workflow of searching, saving, and completing a job listing.
Conclusion
5SecondJobs successfully met its objectives and provides a more intuitive job tracking workflow than traditional spreadsheets. Through the development process, feedback from both technical and general users continually guided my focus and helped me identify the most important aspects of the user experience. Building this application, I learned that involving users early on leads to a more valuable product and managing my own development is crucial for delivering a succesful product.