Labor Staffers (LS) is a veteran owned recruiting company based in Duncansville, PA focused on helping potential candidates to find new employment in various companies across the United States.

LS reached out to me to express their interest in a Strapi based headless site that integrates with their CRM tool RecruitCRM. The expressed frustrations with a previous develop who created a Strapi site that did not work properly, and another subsequent developer that created a WordPress site that did not work for the client's use case.

They were familiar with Strapi as an authoring tool and wished to move away from WordPress back into Strapi. Using my knowledge of GraphQL, Nuxt, and Tailwind, I created a new site from scratch that was free of the previous mistakes from the other developers. This particular site was very light on the design side, as the project was intended to be mostly about a fully working site as opposed to a redesign of an existing site.

Previous

Next

To create a reliable site that correct interfaced with the RecruitCRM platform, many technical pieces had to be completed.

These include:

Front-end development:

• Nuxt and Tailwind: A fully custom front-end build using NuxtJS version 3 and serverside middleware to keep queries secure and not client-side facing. This is paramount to hiding API keys. Along with this, I used Tailwind for quick styling across the site, including a custom interactplugin I created at my day job to reduce the amount of classes necessary for states like hover:, focus:, focus-within:, etc.

• GraphQL: Used to query the Strapi instance and get all of the content on the site as well as a GraphQL mutation to send submissions to the general contact form to Strapi.

• SendGrid API: To send emails alerting the client that they had gotten new form submissions and to check RecruitCRM, I leveraged the SendGrid API and Nuxt server middleware.

• Cloudflare Turnstile and Honeypot Fields: To help prevent spamming of the forms from bots, I implemented Cloudflare Turnstile and a honeypot field. Turnstile already blocks a significant amount of bots, but to help prevent unnecessary submissions, I implemented a hidden field that if filled out correctly prevents API requests but indicates a success message to trick bots into thinking the form submitted successfully.

• REST APIs: for both RecruitCRM and SendGrid, I relied on REST APIs to make external calls to services that would otherwise have needed to be written on their own. When a potential applicant or company submits to LS, I'm using Nuxt server middleware to submit the API call to prevent client side viewing of the API key (stored in a .env file).

Deployment:

The client already had a WordPress hosting plan on GoDaddy. While interfacing with GoDaddy regarding email they added additional services creating a large bill for the client. The WordPress hosting plan of course did not work for Strapi, so the client needed to be moved over to a VPS. I was able to jump in with a GoDaddy rep, refund unnecessary services, and move the client to a VPS for Strapi.

After setting up the Node server and deploying Strapi to the VPS, I created a Cloudflare Pages instance for the Nuxt front end of Labor Staffers. Utilizing Git and Cloudlfare Workers, I was able to setup continuous deployments for the site that let me deploy fixes quickly and run new GraphQl queries whenever new content is published on Strapi.