Why and how I built nextjobs

Firstly let me start off by explaining how nextjobs came into existence. At the date of writing this post (28th Sep '03) i have spent about four weeks building site, before which i was made redundant from my previous employment which enjoyed very much. But unfortunately not everything has a way of working out, so i embarked on a journey to build something that would showcase what i can do and push me to new levels allowing me to learn in the process.

In the spirit of looking for a new job i decided to build what is fundamentally a fairly basic concept - a job board. I wasn't overly impressed with the options for searching remote work online so why not build my own? I liked this idea because eventually i can monetise job posts and build to the spec and stack of my choosing while potentially also creating a passive revenue stream.

The stack

Let's take a look through the stack and see what and why i used the tech i chose.

1. Next.js

Primarily the stack starts with Next.js - you probably already know what it is but for those who don't it's a React based framework that React itself now recommends when starting a new react project.

I've been using Next.js for around 4-5 years and ever since the first time i completely fell in love with it. Next.js allows you to create static websites, web apps and full-stack applications with incredible ease.

Nextjobs uses the app directory, server actions, Vercel edge functions and so many of the awesome features such as next/image, next/link and api routes allowing me to build a versatile, performant and modern web application.

Next.js also utilises Vercel Edge Functions under the hood when using the experimental app directory which is now automatically available from next/server. An example use case that is implemented on the nextjobs website would be automatically generating opengraph-images for social media sites such as LinkedIn, Twitter (now X) and Facebook etc.

2. MongoDB + MongoDB Compass

For not many other reasons than I enjoy using MongoDB and that i'm familiar with it, MongoDB and MongoDB Compass make it very easy to fire up databases with and collections.

3. Prisma + Prisma Accelerate

So in order to create realtional data between data models i use the object-relational mapper software (or ORM), Prisma. Prisma is extremely good for my needs and reduces the complexity of setting up databases that have Users, Jobs & Companies where a user can both own and belong to a company that possesses jobs that also can be created by a user. Prisma makes this process very simple.

Prisma Accelerate allows you to take advantage of Vercel Edge Functions such as the opengraph-image automation that i mentioned earlier by allowing you to use the Prisma Client at the edge. You can see this in action on any of our job posts.

4. NextAuth

NextAuth is an out-of-the box authentication package that allows your users to authenticate with your chose OAuth providers such as in our case; Github and Google. It's also very simple to configure and get up and running with your database.

5. Cloudinary

After viewing a fantastic tutorial on handling image uploads with Cloudinary by Hamed Bahram i simply decided to follow his advice and guidance when handling the image uploads for our company profiles.

6. Typescript

I've been using Typescript and coding with it for a few years now and put simply i love it. Typescript can at times be a pain but almost always get passed these pains and find myself learning. The concept of type safe scripting and avoiding pesky conflicts on large applications is one of the many bonuses.

7. Formik forms and Yup Validation

Ever since i was introduced to Formik and Yup by a colleague at a small esports startup i previously had the pleasure of working for i've never looked back or even sideways for forms and validation. Since the dawn of my coding career over 15 years ago i can't tell you enough how i hated handling forms and validation. Formik makes forms extremely easy to handle, plays well with typescript and dare i say can even make developing forms enjoyable.

Conclusion

With the exception of a few additional packages, i've covered most of what is used behind the scenes for the nextjobs build. I'll be adding more and more features daily or weekly depending on size and complexity, but i strongly welcome and encourage users to report bugs, usability issues and suggestions to me over on my Twitter/X.