About recruiterre-mint

A modern Job Board made with Nuxt Content V3

n

Published by

README.md

👔 Recruiterre - Modern Job Board

A modern job board application built with Nuxt 3, featuring real-time search, filtering, and an interactive map interface.

Demo · Report Bug · Request Feature

💝 Support My Work

This template and many others are available at NuxtMint.com

Join our friendly Discord community to get help, share your ideas, and connect with other developers!

Features

🔍 Real-time job search and filtering
🗺️ Interactive location mapping with Leaflet
💅 Modern UI with Tailwind CSS
🎨 Smooth animations and transitions
📱 Fully responsive design
⚡ Server-side rendering with Nuxt 3
📝 Markdown-based job listings
🔄 Dynamic content with @nuxt/content

Setup

Make sure to install dependencies:

pnpm install

Development Server

Start the development server on http://localhost:3000:

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Deployment

We recommend using Cloudflare for deployment. This project is optimized for serverless environments and uses @nuxt/content for content management.

Setup with Cloudflare

Create a D1 database in your Cloudflare account
Update your nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    database: {
      type: 'd1',
      binding: '<YOUR_BINDING_NAME>',
    },
  },
});

Deploy using Cloudflare Pages with the following settings:
- Build command: pnpm build
- Build output directory: dist
Bind your D1 database to the project Page in your Page settings in CloudFlare (Bindings -> Add binding -> Service -> D1 -> Select your database -> Bind to project)
Re-deploy the project

The deployment will automatically handle:

Server-side rendering
Content database integration
Asset optimization
Global CDN distribution

Tech Stack

Nuxt 3 - The Vue Framework
Tailwind CSS - Utility-first CSS framework
Leaflet - Interactive maps
@nuxt/content - Content management
TypeScript - Type safety
Vue 3 - Progressive JavaScript Framework

Project Structure

├── assets/                 # Static assets like CSS, images
│   └── css/               # Global CSS files
├── components/            # Vue components
│   ├── JobCard.vue       # Job listing card
│   ├── JobListings.vue   # Job listings container
│   ├── JobFilters.vue    # Search and filter components
│   └── HomeHero.vue      # Landing page hero section
├── content/              # Content management
│   └── jobs/             # Job listing markdown files
├── layouts/              # Page layouts
│   └── default.vue       # Default application layout
├── pages/                # Application routes
│   ├── index.vue         # Homepage
│   └── jobs/             # Job-related pages
│       └── [slug].vue    # Individual job page
├── public/               # Public static files
├── nuxt.config.ts        # Nuxt configuration
└── tailwind.config.ts    # Tailwind CSS configuration

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Acknowledgments

Nuxt for the amazing Vue framework
Tailwind CSS for the utility-first CSS framework
Leaflet for the interactive mapping capabilities
Heroicons for the beautiful icons
The Vue.js community for their invaluable resources and support

License

This project is open source and available under the MIT License.

Check out the deployment documentation for more information about deploying to production.

recruiterre-mint