**# React Vibe — NHS Careers Board Demo

A responsive NHS-style careers board built with React, Vite and TailwindCSS as part of a frontend/UI demonstration project inspired by the type of digital experiences produced by Vibe Agency.

Overview

This project demonstrates modern frontend development practices including reusable React components, responsive layouts, modal interactions, dynamic state management and persistent local storage.

The application allows users to browse NHS primary care vacancies, create new listings through a modal form, manage tags and locations through custom dropdown components, and persist jobs locally in the browser.

Built as a lightweight frontend-focused demo with an emphasis on clean UI, responsiveness and component structure.

Live Demo

🔗 Live Site: https://lewishardy.co.uk/vibe/

Features

• Responsive job board UI
• React component architecture
• TailwindCSS utility-first styling
• Headless UI modal integration
• Dynamic job creation
• Custom dropdown/select menus
• Multi-select tag support
• Relative timestamps ("Posted 2 hours ago")
• localStorage persistence
• Reset to default JSON dataset
• Click-outside menu closing
• Demo interaction popups
• Line-clamped responsive card layouts

Tech Stack

• React
• Vite
• TailwindCSS
• Headless UI
• JavaScript (ES6+)

Local Development

Clone the repository:

git clone https://github.com/lew-hardy/react-vibe.git

Install dependencies:

npm install

Start development server:

npm run dev

Production Build

npm run build

Project Structure

src/
├── components/
├── data/
│   └── jobs.json
├── AddJobForm.jsx
├── JobPost.jsx
├── JobPosts.jsx
├── App.jsx
├── index.css
└── main.jsx

Notes

• Job data persists using browser localStorage
• "Reset Jobs" restores the default JSON dataset
• Apply and More Info actions are demo-only interactions
• Designed primarily as a frontend/UI demonstration project

Author

Lewis Hardy

Frontend / Ecommerce / Full Stack Developer **