Vibe Coding Case Study: Creating a Community Directory Website with AI-Assisted Development

We Create a Directory Website Using Vibe Coding

Introduction and Project Overview

Project Introduction

The Hillsborough community website began as an idea to create a digital hub serving both residents and visitors to this vibrant area of Sheffield. Like many neighborhoods, Hillsborough had abundant local information, events, and businesses, but this knowledge was scattered across various platforms, social media pages, and physical noticeboards. By centralizing this information in a single, accessible digital space, I aimed to strengthen community connections while providing practical value to users.

What makes this project particularly interesting is that it was developed using vibe coding (prompt-based programming) – a modern approach where AI assists in generating code based on natural language instructions. This method allowed me to build a full-featured website with minimal manual coding, demonstrating how AI can dramatically accelerate development for entrepreneurs, community organisers, and small businesses. If you're interested in more AI-powered development solutions, check out our guide on vibe coding AI website builders for non-coders.

Project Scope and Requirements

From the outset, I identified several key requirements to make the website truly useful for the target audience:

The target audience included both longtime residents looking for specific local information and visitors wanting to discover what Hillsborough has to offer. This dual-audience approach influenced many design and content decisions throughout development.

Technical Stack Selection

This stack represents a sweet spot for vibe coding projects – modern enough to provide an excellent user experience, yet composed of well-documented technologies with strong community support, making them easier for AI to understand and generate correct code for.

Site Architecture and Organization

This architecture was designed to be expandable, allowing for the addition of new sections and features as community needs evolve. The clear separation of concerns also facilitated development using vibe coding, as I could focus on generating code for specific sections independently.

The Vibe Coding Development Process

Prompt-Based Development Approach

Vibe coding, or prompt-based programming, represents a paradigm shift in how websites and applications are built. Rather than manually writing every line of code, this approach leverages AI to generate functional code based on natural language instructions. For the Hillsborough community website, I embraced this methodology fully, using it to create everything from database schemas to frontend components.

My experience using this approach for a complex directory site revealed both its strengths and limitations. The speed of development was remarkable—features that might have taken days to code manually were implemented in hours. However, the quality of the output was directly proportional to the quality of my prompts. Vague instructions produced problematic code, while detailed, specific prompts yielded professional-grade results.

Project Initialization and Setup

The development journey began with foundational prompts to establish the project structure. My initial prompt was relatively straightforward:

Create a new React project using Vite with TypeScript for a community website. Set up the project with Tailwind CSS for styling and include the shadcn/ui component library. Establish a basic folder structure following best practices for a React application, including routing with React Router.

From this prompt, the AI generated the necessary configuration files, dependencies, and basic project structure. I then initiated the project with the standard npm commands and had a functional, albeit empty, application within minutes.

Next came the routing and navigation setup:

Create a navigation structure for a community website with the following pages: Home, News, Events, Business Directory (with nested routes for restaurants, pubs, cafes, etc.), Community Resources, and Contact. Implement React Router with a responsive navigation bar that collapses to a hamburger menu on mobile devices.

This prompt yielded a fully functional navigation system with all required routes configured. The responsive behavior worked immediately, adapting seamlessly between desktop and mobile views.

The project foundation was completed with a third setup prompt:

Set up Supabase integration for the project including authentication, database connection, and configuration for environment variables. Create a context provider for Supabase that makes the client available throughout the application.

Key Feature Implementation

Business Directory Development

The business directory represented the heart of the website and required the most complex implementation. I began with a prompt to establish the database structure:

Generate SQL commands to create a 'businesses' table in Supabase with fields for name, category (enum with types like restaurant, pub, cafe, retail, service), address, postcode, phone, email, website, description, opening_hours, and verified (boolean). Include appropriate constraints and indexes.

This produced well-structured SQL that I could execute directly in the Supabase interface. I followed this with a prompt for the directory's frontend components:

Create a Business Directory page with filter sidebar and main content area displaying business cards in a responsive grid. Include filters for business category, postcode area, and verification status. Each business card should display the name, category, address, and a link to the full business page.

The AI generated a complete React component that implemented this design, including the filtering logic. For individual business pages, I used:

Generate a Business Detail page component that displays all information about a single business. Include a header with the business name and category, contact information section, description, opening hours displayed in a weekly schedule format, and a map showing the business location using Leaflet.

To populate the directory with initial data, I used:

Generate a table of 30+ verified restaurants/takeaways in Hillsborough, Sheffield (S6 postcode only) with realistic data for all fields in our business table. Format the data as SQL INSERT statements that can be executed in Supabase.

This provided a substantial dataset to begin testing with, though I later refined this data for accuracy.

Events Calendar Implementation

Create a SQL schema for an events table with fields for title, description, start_date, end_date, venue, address, postcode, price (which could be 'Free'), booking_url (nullable), source_url, and image_url (nullable).

Create a Supabase Edge Function that scrapes event information from the Hillsborough local community website and Facebook events pages. Parse the event details and store them in our events table. Include error handling and logging.

Create a calendar component that can display events in both a monthly calendar view and a list view. Allow filtering by date range, event type, and venue. Each event should display its title, date, venue, and price, with a click opening a modal with full details.

News Section Creation

The news section followed a similar pattern:

Create a database schema for news articles with fields for title, content (rich text), publication_date, author, category, featured_image_url, and featured (boolean).

Followed by the frontend implementation:

Create a News page that displays articles in reverse chronological order with pagination. Each article preview should show the title, publication date, a short excerpt, and featured image if available. Include filtering by category and a search function.

UI/UX Enhancement Process

With the core features implemented, I turned to enhancing the user experience:

Implement a global search component in the header that searches across businesses, events, and news articles. Results should be grouped by type and display relevant preview information for each item.

For responsive design improvements:

Review and enhance the responsive behavior of all pages, ensuring optimal display on devices from mobile phones to large desktops. Pay special attention to the business directory filters, calendar view, and navigation menu.

Styling consistency was addressed with:

Apply a consistent color scheme and typography throughout the site based on Hillsborough's community colors of green and gold. Ensure all components follow the same visual language with consistent spacing, rounded corners, and shadow effects.

These prompts generated code that significantly improved the site's visual coherence and usability across devices.

Database Integration

Database integration extended beyond the initial schema creation. As the project evolved, I needed to create relationships between tables and implement more complex queries:

Create SQL commands to establish relationships between the businesses, events, and venues tables. Events should reference venues by ID, and venues should be linkable to businesses where applicable.

For more complex data retrieval:

Generate a Supabase query function that retrieves upcoming events, joined with their venue information, filtered by category and date range, and ordered by start date.

These database interactions were integrated into the frontend components through context providers and custom hooks:

Create a React context and custom hooks for accessing the businesses, events, and news data from Supabase. Include functions for fetching, filtering, and sorting data based on user interactions.

Challenges, Solutions, and Optimization

Development Challenges Encountered

Building the Hillsborough community website using vibe coding presented several significant challenges that required creative problem-solving:

// Missing import in generated code
// import React from 'react';  <-- This was often missing

function BusinessCard({ business }) {
  return (
    <div className="card">
      {/* Component content */}
    </div>
  );
}

CREATE TABLE events (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  title TEXT NOT NULL,
  description TEXT,
  venue_name TEXT, -- This became problematic with inconsistent naming
  venue_address TEXT,
  start_date TIMESTAMP WITH TIME ZONE NOT NULL,
  end_date TIMESTAMP WITH TIME ZONE
);

CREATE TABLE venues (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name TEXT NOT NULL,
  address TEXT,
  postcode TEXT,
  business_id UUID REFERENCES businesses(id)
);

CREATE TABLE events (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  title TEXT NOT NULL,
  description TEXT,
  venue_id UUID REFERENCES venues(id),
  start_date TIMESTAMP WITH TIME ZONE NOT NULL,
  end_date TIMESTAMP WITH TIME ZONE
);

// This wouldn't work in Edge Functions
import fs from 'fs';
import cheerio from 'cheerio';

export async function scrapeEvents() {
  // Problematic code...
}

import { createClient } from '@supabase/supabase-js';
import cheerio from 'cheerio';

export async function scrapeEvents() {
  const supabase = createClient(
    process.env.SUPABASE_URL,
    process.env.SUPABASE_SERVICE_ROLE_KEY
  );
  
  try {
    const response = await fetch('https://hillsborough-events-site.com');
    const html = await response.text();
    // Processing with cheerio...
  } catch (error) {
    console.error('Scraping failed:', error);
  }
}

Add a search bar to the existing BusinessDirectory component that maintains compatibility with the current filter system. The search should filter by business name and description, while the existing category and location filters should still work in combination with the search term.

Prompt Optimization Strategies

Through trial and error, I discovered several strategies that would have significantly improved my prompt efficiency:

Create a community website with the following structure: Home page featuring latest news and upcoming events, News section with filtering and pagination, Events calendar with list and calendar views, Business Directory with categories (restaurants, pubs, cafes) and detailed business pages, Community Resources section, and Contact page. Use React, TypeScript, Tailwind CSS, shadcn/ui, and Supabase for backend functionality. The design should be responsive and follow modern web accessibility standards.

Design a complete Supabase database schema for a community website with tables for users, business_listings (with fields for name, category, contact details, location, hours), events (with relationships to venues and categories), news_articles, and community_posts. Include appropriate relationships, constraints, and RLS policies.

Create a standardized component library with the following: Card components (BusinessCard, EventCard, NewsCard), SearchBar component, FilterPanel component, and PageHeader component. Each should follow the same design language with consistent styling, responsive behavior, and proper TypeScript typing.

Implement the complete business directory functionality including: database schema, API integration, listing page with filtering and search, detail pages with maps and contact information, and admin interface for verification.

Create the restaurant listing page with these test cases in mind: empty search results should display a friendly message, searches with more than 20 results should implement pagination, filtering by multiple criteria should work correctly, and the layout should adapt appropriately to mobile, tablet, and desktop screens.

Add TypeScript documentation to all components including prop definitions, usage examples, and any caveats. Create a README.md explaining the project structure, setup process, and deployment workflow.

Token Efficiency Considerations

Working with AI models highlighted the importance of token efficiency. Each prompt consumes tokens, which directly impacts cost and response time.

Deployment Process

Preparing the Hillsborough community website for deployment required several important steps:

# Build the project
npm run build

# Test the production build locally
npm run preview

# Deploy to Vercel
vercel --prod

The deployment process was remarkably smooth, requiring minimal adjustments to the development code. This speaks to the quality of the AI-generated code, which followed modern best practices for React applications.

Lessons Learned

Conclusion: The Future of Vibe Coding for Web Development

The Hillsborough community website demonstrates the remarkable potential of vibe coding for creating practical, functional web applications. What began as a simple concept evolved into a comprehensive community resource with multiple integrated features, all developed through AI-assisted programming.

This approach isn't just about coding faster—it fundamentally changes who can build sophisticated digital products. Non-developers with domain knowledge can now create solutions that previously required specialized technical skills, opening new possibilities for community projects, small businesses, and entrepreneurs.

The technology is still evolving, with current limitations around complex state management, performance optimisation, and specialised integrations. However, these boundaries continue to expand rapidly as AI models improve.

For those considering similar projects, my advice is clear: invest time in thorough planning, develop a strategic prompting approach, and embrace the iterative nature of the process. The results will likely exceed your expectations, delivering capabilities that would have been out of reach through traditional development methods.

Vibe coding isn't replacing traditional development—it's expanding who can participate in building the digital world. And that might be its most revolutionary aspect of all.

Frequently Asked Questions