Skip to content

Latest commit

 

History

History
249 lines (201 loc) · 7.36 KB

README.md

File metadata and controls

249 lines (201 loc) · 7.36 KB
Raw

Job Board Starter

A modern, minimal job board built with Next.js 15, Tailwind CSS, and Airtable. Features static generation, client-side search, and a clean UI with Geist font.

Job Board Starter Screenshot

Features

  • Built with Next.js 15
  • Styled with Tailwind CSS
  • Airtable as the backend
  • Client-side search with memoization
  • Server-side caching with 5-minute revalidation
  • Content-specific loading states
  • Fully responsive
  • Fast and SEO friendly
  • Modern UI with Geist font, Tailwind CSS, and Shadcn UI
  • Incremental Static Regeneration (ISR) for real-time updates
  • Rich text support for job descriptions
  • Comprehensive job metadata with multi-select career levels
  • Advanced salary structure with currency and time unit support
  • Smart pagination with URL-based navigation
  • Sorting options (newest, oldest, highest salary)
  • Dynamic jobs per page selection
  • Featured job posts with distinct styling
  • Similar jobs suggestions based on title and location
  • URL-based filter persistence for sharing and bookmarking
  • Comprehensive filtering system with multiple parameters
    • Job type (Full-time, Part-time, Contract)
    • Career level (18 standardized levels)
    • Remote work preference
    • Salary ranges
    • Visa sponsorship status
  • Enhanced user experience
    • Keyboard navigation for search (Escape to clear)
    • Loading states with smooth transitions
    • Smart pagination with dynamic range
    • No page jumps during filtering
    • Accessible UI with ARIA labels

Quick Start

  1. Clone the repository:
git clone https://github.com/tomaslau/jobboardstarter
cd jobboardstarter
npm install
  1. Set up Airtable:
  • Create a new base in Airtable
  • Create a table named "Jobs" with these fields: 
    title: Single line text
company: Single line text
location: Single line text
type: Single select (Full-time, Part-time, Contract)
salary_min: Number
salary_max: Number
salary_currency: Single select (USD, EUR, GBP)
salary_unit: Single select (hour, day, week, month, year, project)
description: Long text (with rich text enabled)
apply_url: URL
posted_date: Date
status: Single select (active, inactive)
remote_friendly: Single select (Yes, No, Not specified)
career_level: Multiple select (Internship, Entry Level, Associate, Junior, Mid Level, Senior, Staff, Principal, Lead, Manager, Senior Manager, Director, Senior Director, VP, SVP, EVP, C-Level, Founder, Not Specified)
visa_sponsorship: Single select (Yes, No, Not specified)
job_timezone: Single line text
featured: Checkbox
  • Create a Personal Access Token at https://airtable.com/create/tokens
  • Add these scopes to your token:
    • data.records:read
    • schema.bases:read
  • Add your base to the token's access list
  1. Environment Setup: Create a .env file:
AIRTABLE_ACCESS_TOKEN=your_token_here
AIRTABLE_BASE_ID=your_base_id_here
  1. Development:
npm run dev

Visit http://localhost:3000 to see your job board.

Configuration

The job board can be easily customized through a single configuration file at config/config.ts:

export const config = {
  // Marketing & SEO
  badge: "The #1 Open Source Tech Job Board",
  title: "Find Your Next Tech Role",
  description: "Browse curated tech opportunities...",
  url: process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000",
  
  // Navigation
  nav: {
    title: "JobBoard",  // Navigation bar text
    icon: "Briefcase",  // Lucide icon name
    github: {
      show: true,  // Show/hide GitHub button
      url: "https://github.com/yourusername/yourrepo",
    },
  },
}

Environment-Aware URLs

The site URL automatically adjusts based on the environment:

  1. Uses NEXT_PUBLIC_SITE_URL if provided
  2. Falls back to localhost:3000 in development
  3. Uses production URL in production

Navigation Customization

  • Icon: Uses Lucide icons - choose any icon by name
  • Title: Customize the text shown in the navigation bar
  • GitHub: Toggle GitHub button visibility and set repository URL

Environment Variables

⚠️ IMPORTANT: Never commit your API keys or sensitive credentials to the repository!

Required environment variables:

  • AIRTABLE_ACCESS_TOKEN=your_token_here
  • AIRTABLE_BASE_ID=your_base_id_here

Create a .env file in your project root and add these variables there.

Data Revalidation

The job board uses Next.js Incremental Static Regeneration (ISR) and server-side caching to keep data fresh:

  • Pages automatically revalidate every 5 minutes
  • Server-side caching with unstable_cache
  • Content-specific loading states
  • New jobs appear without manual rebuilds
  • Maintains fast static page delivery
  • Zero downtime updates

You can adjust the revalidation interval in:

  • app/page.tsx (job listing page)
  • app/jobs/[id]/page.tsx (individual job pages)

Project Structure

app/
  layout.tsx          # Root layout with Geist font
  page.tsx           # Home page with job listings
  jobs/
    [id]/
      page.tsx       # Individual job page
      loading.tsx    # Loading state for job page
lib/
  db/
    airtable.ts     # Airtable integration and salary formatting
  utils/
    formatDate.ts   # Date formatting utilities
components/
  ui/
    job-details-sidebar.tsx  # Job details sidebar
    post-job-banner.tsx     # Post job promotion banner
    similar-jobs.tsx        # Similar jobs suggestions
  jobs/
    JobCard.tsx     # Job listing card

Salary Structure

The job board supports a comprehensive salary structure:

  • Minimum and maximum salary ranges
  • Multiple currencies (USD, EUR, GBP)
  • Various time units (hour, day, week, month, year, project)
  • Smart formatting (e.g., "$80k/year" or "$80k - $100k/year")
  • Salary-based sorting with normalization to annual USD

Pagination and Sorting

  • URL-based pagination for better UX and SEO
  • Configurable items per page (10, 25, 50, 100)
  • Sort by newest, oldest, or highest salary
  • Maintains state in URL parameters
  • Elegant pagination UI with ellipsis for large page counts

URL Parameters

The job board supports comprehensive URL parameters for sharing and bookmarking:

  • page - Current page number
  • per_page - Items per page (10, 25, 50, 100)
  • sort - Sort order (newest, oldest, salary)
  • types - Comma-separated job types (Full-time, Part-time, Contract)
  • roles - Comma-separated career levels
  • remote - Remote work filter (true)
  • salary - Comma-separated salary ranges
  • visa - Visa sponsorship filter (true)

Example URLs:

/?types=Full-time,Contract&roles=Senior,Lead&remote=true
/?salary=50K-100K,100K-200K&visa=true&page=2
/?sort=salary&per_page=25

Customization

Styling

The project uses Tailwind CSS for styling. Main configuration files:

  • tailwind.config.ts: Theme configuration
  • app/globals.css: Global styles
  • components/*: Individual component styles

Data Source

Current implementation uses Airtable. To use a different data source:

  1. Modify lib/db/airtable.ts
  2. Implement the same interface for job data

Deployment

  1. Push to GitHub
  2. Deploy on Vercel:
    • Connect your GitHub repository
    • Add environment variables
    • Deploy

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - feel free to use this for your own job board!

Support

If you find this helpful, please ⭐️ this repository!

Credits

Built by Tomas Laurinavicius