jobvalley.com

Technical implementation of the corporate website jobvalley.com

Jobvalley is a personnel service provider specialising in the placement of students and young professionals.

I was hired by Studitemps GmbH as a full-stack software engineer to realize the relaunch of their corporate website studitemps.de in 2021. In close collaboration with the marketing and UX/UI departments we formed a great team to get the project started. After a big renaming of the company to "jobvalley" the website also changed is now jobvalley.com.

To this day I am still involved as the lead engineer to further develop and maintain the website.

Responsibilities

  • Technical implementation of the website as lead developer
  • Frontend and backend development as well as DevOps tasks
  • Technical consulting and close collaboration with the UX/UI and marketing departments
  • Setting up the Contentful CMS together with Next.js and Tailwind
  • Implementation of a component library with Storybook
  • Implementation of a job listing API with Next.js and MongoDB
  • Error monitoring with Bugsnag
  • Integration of 3rd party tools like Google Tag Manager, Cookiebot and Matelso

Special Features

  • Blog
  • Job search form
  • Fast-loading pre-generated static sites
  • Automatic image optimisation

Engineering details

The website is built with Next.js, which consumes data from the headless CMS Contentful via a GraphQL API. Most of the pages are static, pre-generated pages which can be delivered immediately from the server. These pages can thus be loaded much faster, which leads to better user experience and SEO ranking. Also images are automatically optimized into small, modern formats like webp, which gives the page another performance boost.

We use Tailwind - a very powerful CSS library, based on utility-classes. With that, we don't need to write much custom CSS anymore. Instead we just combine Tailwind's utility classes. Our components now consist of just one single JS file without an accompanying CSS file. This allows very flat directory hierarchies, which in the end also leads to a smaller and cleaner code base.

In order to develop UI components in isolation we use Storybook. It also acts as a well-organised component library, which helps us to keep track of our components. It also gives other developers a nice overview over the building blocks of our UI.

The website also includes a job search form, which consumes a custom built job listings API. This REST-like API acts as a facade to another external SOAP service and enhances it with filtering and geographic area search based on MongoDB.

Tech stack

  • React
  • Next.js
  • Contentful
  • Tailwind
  • GraphQL
  • Node JS
  • MongoDB
  • Bugsnag
  • Vercel