Next.js 16 & Supabase : Build A Job Portal App From Scratch

Build the home page UI and authentication screens for a Next.js 16 and Supabase job portal. Organize public and private routes with route groups and add login and register pages.

Build a register page on the home route with a centered white form on a gray background, using schachen form and react-hook-form to collect name, email, password, and role.

Build the login page for a Next.js 16 app by adapting the registration form and adding a Lucid React back icon; validate the login flow and prep for database authentication.

Set up supabase authentication backend by creating a supabase account and project, integrate it with a Next.js app via dotenv variables for project URL and API key, and install supabase-js.

Create a new supabase table named user profiles with columns name, email unique, password, role, profile_pic, resume_url, bio; enable row-level security and set full permissions policy.

Implement a Next.js 16 server action for registering users with Supabase, hashing passwords with bcrypt, checking existing emails, and inserting into user profiles table, with toast alerts and login navigation.

Implement a login user api with jwt-based authentication via bcrypt and Supabase that validates email, role, and password, and issues a signed token with a three-day expiry.

Fetches and displays the logged-in user on both recruiter and job seeker dashboards by retrieving the JWT from cookies in a Next.js 16 app using server actions, routing by role.

Protect private routes with next.js proxy middleware by checking the token in cookies and redirecting unauthenticated users to login, while routing authenticated users to dashboards based on role.

learn to build a role-driven layout in Next.js 16 with a private layout and header, rendering menus for recruiters and job seekers and content by route.

Fetch and display the logged-in user across the app using a global state store with Zustand, updating the user with a set function.

Open and customize the sidebar menu items using the sheet component, render role-based job seeker and recruiter menus with icons and paths, enable navigation, and include a full-width logout button.

Design a centered spinner component in the UI folder with a height prop defaulting to 100vh, and prepare the recruiter and job seeker dashboards for the next jobs module.

Explore the back end of the recruiter portal's jobs module, listing a recruiter's jobs with title, location, type, salary range, status, and reusable add/edit form with last date to apply.

Create a jobs table in Supabase with recruiter id linked to user profiles, title, description, location, job type, min/max salary, experience, last date to apply, status, and skills; enable RLS.

Develop server actions for the jobs CRUD operations in a Next.js 16 app using Supabase, including create, get by id, edit, delete, and get jobs by recruiter.

Set up the front end for a job portal by creating files and folders and building reusable components like a job form and a page title for add and edit.

Build a job form UI for a Next.js 16 app, featuring title, description with a rich text editor, location, job type, salary ranges, experience, last date to apply, and status.

This lecture demonstrates building a job form skills section with chips in React and Next.js setup: parse comma separated input, add and delete skills, manage state, and validate before submission.

Build a Next.js 16 and Supabase job portal by implementing the create job server action in a form, managing loading state and skills for add and edit.

Fetch and display the logged-in recruiter’s jobs in a client component table, with loading states, status badges, and edit navigation for each job.

Implement the edit job flow by fetching a job by id from URL, populating the form, and updating the job on submit, including skills handling and sorting by created date.

Wire up delete job by id to the server action, refetch the jobs on success, and prepare the job seeker portal to display active jobs with filtering, viewing, and applying.

Create a next.js 16 job seeker browse page that shows active jobs with a collapsible filter panel and a reusable job card, linking to detailed job pages.

Build a Next.js 16 job details page by reading the id from the url, fetching job and recruiter data, and rendering an apply area with cover letter and resume inputs.

Style the job details description with a rich text editor css and wysiwyg classes, and customize the resume selector with a hidden input and a styled label showing selected file.

Create the filters user interface for the job seeker jobs page as a client component, with keywords, location, job type, and min/max salary. Push the query string via the router.

Implement filter logic for job portal by reading query params to build a Supabase query. Map frontend fields to database columns and apply keywords as skills, salary ranges, and experience.

Create the applications table and build server actions to submit a job application, storing the cover letter, resume URL, job id, recruiter id, and job seeker id.

Enable users to build a job portal with Next.js 16 and Supabase by uploading resumes to storage and generating public URLs, then submit applications with cover letters.

Display the logged in job seeker's applications in a simple table, fetching job details from the applications table via Supabase, with loading states and a view cover letter dialog.

Build a recruiter portal feature to display job applications with a reusable applications table, fetching applications by job id and showing applicant name, email, and resume URL.

Learn to display job applications in the recruiter table by fetching the job and its applications, resolving a two-foreign-key join with user profiles, and enabling status updates and resume viewing.

Display all job applications in the recruiter portal by fetching data via recruiter id, showing applicant name, email, job title, location, and status.