Job board code starter for BCMS and Nuxt

Did you know you do not need to pay extra money for job board software? If you're looking to build a job board or a career page for an organization, all you need is a headless CMS that provides you with all the features you need for a job board system.

One such Headless CMS is BCMS, an intuitive headless CMS that empowers developers to manage and model content with modern tech stacks. To simplify your job board development experience, BCMS offers the following features:

Decoupling Architecture: Break free from limitations. Manage and structure job content independently from the user interface, opening up boundless possibilities for customization.

Effortless content creation: Create and modify job listings, company profiles, and application forms effortlessly without impacting the seamless experience for job seekers.

Multi-platform publishing: BCMS excels at seamlessly publishing content across various platforms and devices, ensuring your job board reaches a global audience without a hitch.

Get to the world: Expand your job board's reach with BCMS's multilingual capabilities, enabling content translation and localization to attract talent worldwide.

HR Analytics: Stay in control with BCMS's powerful analytics and seamless job submission management, empowering your HR team to make data-driven decisions.

In this article, we will build and deploy a Job board application that uses Nuxt on the front end and BCMS as the backend CMS to track applications and manage content.

This application is not a standalone application like a LinkedIn Jobs but will be like a career page on a website where they list job openings and visitors can apply.

But you can take the same approach and expand it further to build a standalone job board like LinkedIn or Indeed with relative ease.

Sign up at https://app.thebcms.com/

Log in to your dashboard and create a BCMS Instance; choose which version you want, either the cloud version or the self-hosted version. For this project, I will be using the cloud version.

Modeling data in a headless CMS means defining the structure and organization of your content, such as articles, products, or job listings, by specifying the types of information each content item can have (e.g., title, description, image).

A flexible data model makes this process effortless, allowing developers to fetch and display this content across various platforms and devices through API calls without being tied to a specific frontend design.

Now, for BCMS, two features make all this possible

Now, let's plan out how we will model our data or, in other words, create our job posting template.

From the image above, you can see the first things you'll need:

Now, let's delve deeper into the full detail page and uncover what additional elements you need:

With all of this completed, it's time to start modeling your data on BCMS. Here's how to do this:

Now go to your BCMS and create a new template named "Opening" (or any name you choose) with an optional description.

Add the properties listed above (except the application form) into our newly minted template. Some properties are already generated for us, including the Title, Slug, and the Created At /Updated at dates. (Not visible on the BCMS, but we'll get it when we fetch the data.)

Your template should look something like this at this point:

Next Step: Create the template for the application form. These are what we need for the application form:

Your template should look something like this at this point:

The next step is to add an entry to your opening template and add one or two entries so we can fetch them in the next step.

After you've done that, navigate to the key manager and create an API key, which you'll use to fetch data, create the API key, and toggle all permissions on for the key.

Nuxt is an intuitive web framework based on Vue.js that makes building web applications simple and powerful. With Nuxt, you can build any kind of website or web application with optimized performance in mind.

We will now create a BCMS project that uses Nuxt using the BCMS CLI. To use the CLI.

First, Install the CLI npm install @becomes/cms-cli -g

Second, create a BCMS project bcms --website --create and follow the prompts.

This will generate a BCMS Nuxt project for you with your env and other configurations properly hooked up to your BCMS. Now go into the folder in your terminal and run npm run dev and go to http://localhost:3000

Alright, coding enthusiasts, it's time to create our very own template! This simple yet powerful template will serve as a guide for this tutorial. To create your template, head over to our code editor and follow these steps:

index.vue - This is the welcoming mat of our Nuxt application, the home page where all the job openings will be displayed. We'll use a special tool called 'NuxtLink component', provided by Nuxt, to dynamically navigate to the details of each job post.

[slug].vue - This is a dynamic path that can change based on the content. The brackets let Nuxt know this page isn't static. So, for example, you could have blog.com/hello-world or blog.com/hello-nuxt. The part after the slash ('hello-world' or 'hello-nuxt') is what we call a 'slug'. These slugs allow us to fetch data dynamically, meaning it changes based on what the slug is.

For BCMS, this slug is generated for us when modeling our data. So, we fetch data for an opening using its slug. This is why it makes sense to name it [slug], though we can name it anything. More on data fetching later on.

Now, it's time to fetch data from our CMS and display it on our Nuxt frontend. Empowered by the robust capabilities of Typescript, we'll seamlessly extract information from BCMS. This will transform how our application interacts with data, bringing a new level of dynamism and interactivity.

To get started, create a script tag in your pages/index.vue file in between the template tag and style tag, like this.

With that created, we'll now use a method: useAsyncData provided to us by Nuxt to fetch data from an API or a module. In this case, we'll use the BCMS module to query the data for us automatically.

In the code above, you see an imported module named OpeningEntry, This is a typescript Interface that defines the type of a variable. It Might be named differently depending on what you named your Template when modeling data in BCMS. As for me, I named mine Opening so it is now OpeningEntry.

To check your name, go to 'bcms' in the root folder, open 'types', and find 'entry'. You'll see a list of your created templates. Look for the one handling job openings.

Looks like magic, right? 😊

The BCMS CLI automatically adds these interfaces during app creation. This helps TypeScript fetch your data in the defined format, offering benefits like:

Now, let's populate the template with what you have fetched.

Loop through all the possible job posts we might have using v-for="opening in entries" and attach a unique identifier to them using their ID. :key="opening._id"

With that done, you now have access to the values of fetched content, and you can now use those values in their respective fields, as shown in the code.

Remember, if your variable names differ, your editor will suggest the correct ones, thanks to BCMS's TypeScript feature.

The returned date for the createdAt date is not in a readable format; rather, it is in milliseconds. So, we'll convert it to readable format using JavaScript. So, in our script tag, we can create a function that expects the milliseconds and format it using the options.

So you can now pass milliseconds to formattedDate in your template.

For [slug].vue, instead of fetching all openings, we'll retrieve just one using the slug. This dynamic path activates when we select an opening from the home page. We'll import this slug from Nuxt to query data from BCMS.

Take note that this time around OpeningEntry is without brackets OpeningEntry[].

First, you’ll start with the sidebar div.

One More thing. On our HTML, add a v-if="opening tag to your job description div
 

<h1 class="job-explainer-title">
        {{ opening.meta.en?.title }}
</h1>

<div class="job-explainer-description">
    <pre v-for="(item, index) in opening?.meta.en?.job_description" v-html="opening?.meta.en?.job_description[index].value"></pre>
</div>
<div class="job-explainer-profile">
    <pre v-for="(item, index) in opening?.meta.en?.candidate_profile" v-html="opening?.meta.en?.candidate_profile[index].value"></pre>
 </div>
 <div class="job-explainer-perks">
    <pre v-for="(item, index) in opening?.meta.en?.job_perks" v-html="opening?.meta.en?.job_perks[index].value"></pre>
</div>

const function = importFunction;
const applicationData = {
  Name: "Nyore Chadere",
  Cv: cv-File,
  Github: https://github.com/chaderenyore,
  ...otherData
};
function.send(data);