Fem Devjobs

Fem Devjobs is a responsive, mobile-first job board web template built with Next.js, Tailwind CSS, and Sanity CMS that combines public job posting with an admin approval workflow.

What is Fem Devjobs?

Fem Devjobs is a front-end project that started as a coding challenge and evolved into a functional devjobs dashboard. It takes job postings submitted through a modal form, validates them with React Hook Form and Yup, sends them to Sanity CMS through Next.js API routes, and displays approved posts on a dynamic job listing page. The application runs on Next.js with static site generation, styled by Tailwind CSS, and uses Sanity as a headless content management system.

Key Features

• Next.js dynamic routing — job listings are generated using Static Site Generation, producing multiple static page permutations for performance.
• Tailwind CSS mobile-first design — the entire dashboard is styled with Tailwind, built mobile-first from the start.
• Sanity headless CMS backend — job data is hosted in Sanity, giving administrators a no-code interface to approve and edit job posts.
• Job posting modal with validation — anyone can submit a job through a front-page modal, validated client-side by React Hook Form and Yup before reaching the API.
• Admin approval workflow — submitted jobs are reviewed in Sanity Studio and only appear on the front page after being approved.
• Dark mode with system preference — a Next-Theme custom hook integrates system dark mode as default while allowing manual toggling, and the state is rehydrated on page reload.

Who is it for?

• Front-end developers — as a reference implementation for combining Next.js, Tailwind, and a headless CMS with form validation and dark-mode handling.
• Job board operators — as a starting point for a job listing site that needs moderated, user-submitted content without building a custom admin panel.
• Community managers — as a way to accept job posts from anyone while retaining approval control through Sanity Studio.

What can you do with it?

• Post a job listing: Submit a job through the modal form with validation; the listing is queued for admin approval.
• Manage listings via CMS: Edit and approve posts in Sanity's no-code interface without touching code.
• Browse jobs with client-side routing: View job details on pages generated statically by Next.js.

How does it work?

The workflow is straightforward: a user opens the modal, fills the form, and the data is validated with React Hook Form and Yup. On success, the job post is passed to a Next.js API route, which writes it to Sanity CMS. An administrator then reviews it in Sanity Studio and approves it, making it visible on the front page.

Pros and cons

• Pros: Static Site Generation delivers fast page loads; mobile-first styling works across devices; the CMS separation lets non-developers manage content; dark mode follows system settings and persists.
• Cons: Requires a Sanity project set up to store job data; job posts only appear after manual approval, so there is a delay before new listings go live.

FAQ

How does the job approval process work?

When a user submits a job through the modal, the post is sent to Sanity via a Next.js API route. It enters a draft state in Sanity Studio, where an administrator reviews it and publishes it. Only published jobs appear on the public dashboard.

Does the template support dark mode?

Yes. It uses a Next-Theme custom hook that reads the system dark mode setting as the default and also provides a manual toggle. The chosen state is preserved on page reload via rehydration.

What CMS backend is used?

Sanity, a headless CMS, hosts the job data. Its no-code interface allows job posts to be edited and approved without writing code.

Is there a separate admin panel?

No separate admin panel was built. Instead, Sanity Studio serves as the admin interface for approving and editing job posts submitted from the front page.