I'll create a mobile-first technician directory app for South Africa using React (for better component organization) with modern UI/UX. Here's the initial setup: { "name": "sa-technician-directory", "version": "1.0.0", "scripts": { "start": "vite", "build": "vite build" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2", "framer-motion": "^10.12.16", "react-icons": "^4.8.0", "date-fns": "^2.30.0" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@vitejs/plugin-react": "^4.0.3", "vite": "^4.3.9" } } SA Technician Directory

import React from 'react' import ReactDOM from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' import App from './App.jsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( ) import { Routes, Route } from 'react-router-dom' import { AnimatePresence } from 'framer-motion' import Home from './pages/Home' import Services from './pages/Services' import Messages from './pages/Messages' import TechnicianProfile from './pages/TechnicianProfile' import Navbar from './components/Navbar' import Footer from './components/Footer' export default function App() { return (

} /> } /> } /> } />

) } :root { --primary: #2a4365; --secondary: #3182ce; --accent: #00c6ff; --text: #2d3748; --light: #f7fafc; --dark: #1a202c; --success: #48bb78; --warning: #ed8936; --danger: #e53e3e; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text); background-color: var(--light); line-height: 1.6; } .app { display: flex; flex-direction: column; min-height: 100vh; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.25rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background-color: var(--primary); color: white; border: 1px solid var(--primary); } .btn-primary:hover { background-color: var(--secondary); border-color: var(--secondary); } @media (max-width: 768px) { .container { padding: 0 0.5rem; } } import { useState } from 'react' import { motion } from 'framer-motion' import { FiMenu, FiX, FiSearch, FiUser, FiMessageSquare } from 'react-icons/fi' import { Link } from 'react-router-dom' export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const provinces = [ 'Gauteng', 'Western Cape', 'KwaZulu-Natal', 'Eastern Cape', 'Limpopo', 'Mpumalanga', 'North West', 'Free State', 'Northern Cape' ] return (

SATech

{/* Mobile Menu */} {isOpen && (

)}

) } import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from 'react-icons/fa' export default function Footer() { return ( ) } import { useState } from 'react' import { motion } from 'framer-motion' import TechnicianCard from '../components/TechnicianCard' import FilterSidebar from '../components/FilterSidebar' const technicians = [ { id: 1, name: "Thabo Mbeki", profession: "Electrician", province: "Gauteng", rating: 4.8, services: ["Wiring", "Lighting", "DB Board"], priceRange: "R200-R500/hr", available: true, image: "https://randomuser.me/api/portraits/men/1.jpg" }, { id: 2, name: "Nomsa Khumalo", profession: "Plumber", province: "KwaZulu-Natal", rating: 4.5, services: ["Leaks", "Installations", "Drainage"], priceRange: "R150-R400/hr", available: false, image: "https://randomuser.me/api/portraits/women/1.jpg" }, { id: 3, name: "James Smith", profession: "IT Support", province: "Western Cape", rating: 4.9, services: ["Networking", "Hardware", "Software"], priceRange: "R300-R600/hr", available: true, image: "https://randomuser.me/api/portraits/men/2.jpg" } ] export default function Home() { const [searchTerm, setSearchTerm] = useState('') const [filters, setFilters] = useState({ province: '', service: '', minRating: 0, availability: false }) const filteredTechnicians = technicians.filter(tech => { const matchesSearch = tech.name.toLowerCase().includes(searchTerm.toLowerCase()) || tech.profession.toLowerCase().includes(searchTerm.toLowerCase()) const matchesProvince = !filters.province || tech.province === filters.province const matchesRating = tech.rating >= filters.minRating const matchesAvailability = !filters.availability || tech.available return matchesSearch && matchesProvince && matchesRating && matchesAvailability }) return (

Find Qualified Technicians

setSearchTerm(e.target.value)} />

{filteredTechnicians.length > 0 ? ( filteredTechnicians.map(tech => ( )) ) : (

No technicians found matching your criteria

)}

) } import { motion } from 'framer-motion' import { FiStar, FiMessageSquare, FiClock } from 'react-icons/fi' import { Link } from 'react-router-dom' export default function TechnicianCard({ technician }) { return (

{technician.available ? ( Available ) : ( Unavailable )}

{technician.name}

{technician.profession}

{technician.rating}

Province: {technician.province}

Services: {technician.services.join(', ')}

Price: {technician.priceRange}

View Profile

) } import { useState } from 'react' const provinces = [ 'Gauteng', 'Western Cape', 'KwaZulu-Natal', 'Eastern Cape', 'Limpopo', 'Mpumalanga', 'North West', 'Free State', 'Northern Cape' ] const services = [ 'Electrician', 'Plumbing', 'IT Support', 'Appliance Repair', 'Auto Mechanic', 'Carpentry', 'Painting', 'Air Conditioning', 'Building' ] export default function FilterSidebar({ filters, setFilters }) { const [isOpen, setIsOpen] = useState(false) return (

Filters

Province

Service Category

Minimum Rating

setFilters({...filters, availability: e.target.checked})} /> Available Now

) } import { FaTools, FaPlug, FaWrench, FaLaptop, FaCar, FaHammer, FaPaintRoller, FaSnowflake, FaBuilding } from 'react-icons/fa' const services = [ { id: 1, name: "Electricians", icon: , description: "Certified electricians for all your wiring, lighting and electrical needs." }, { id: 2, name: "Plumbers", icon: , description: "Professional plumbing services for leaks, installations and drainage." }, { id: 3, name: "IT Support", icon: , description: "Computer repairs, networking, and IT solutions for home and business." }, { id: 4, name: "Appliance Repair", icon: , description: "Fix your broken appliances with our expert technicians." }, { id: 5, name: "Auto Mechanics", icon: , description: "Qualified mechanics for all vehicle repairs and maintenance." }, { id: 6, name: "Carpentry", icon: , description: "Custom woodwork, furniture repair and installation services." }, { id: 7, name: "Painting", icon: , description: "Interior and exterior painting services for homes and businesses." }, { id: 8, name: "Air Conditioning", icon: , description: "Installation, repair and maintenance of AC units." }, { id: 9, name: "Building", icon: , description: "Construction and renovation services for all types of buildings." } ] export default function Services() { return (

Service Categories

{services.map(service => (

{service.icon}

{service.name}

{service.description}

))}

) } import { useState } from 'react' import { FiSend, FiPaperclip, FiCalendar } from 'react-icons/fi' const conversations = [ { id: 1, technician: "Thabo Mbeki", profession: "Electrician", lastMessage: "I can come tomorrow at 2pm", unread: true, avatar: "https://randomuser.me/api/portraits/men/1.jpg" }, { id: 2, technician: "Nomsa Khumalo", profession: "Plumber", lastMessage: "The pipe replacement will cost R1200", unread: false, avatar: "https://randomuser.me/api/portraits/women/1.jpg" } ] export default function Messages() { const [activeChat, setActiveChat] = useState(1) const [message, setMessage] = useState('') const activeConversation = conversations.find(conv => conv.id === activeChat) const messages = [ { id: 1, sender: 'technician', text: 'Hello, how can I help you today?', time: '10:30 AM' }, { id: 2, sender: 'user', text: 'I need help with some electrical wiring in my home', time: '10:32 AM' }, { id: 3, sender: 'technician', text: 'I can come tomorrow at 2pm', time: '10:35 AM' } ] return (

Messages

{/* Conversation List */}

Conversations

{conversations.map(conv => (

setActiveChat(conv.id)} >

{conv.technician}

{conv.unread && ( New )}

{conv.profession}

{conv.lastMessage}

))}

{/* Chat Area */}

{activeConversation && ( <>

{activeConversation.technician}

{activeConversation.profession}

{messages.map(msg => (

{msg.text}

{msg.time}

))}

setMessage(e.target.value)} />

)}

) } import { useParams } from 'react-router-dom' import { FiStar, FiMessageSquare, FiClock, FiMapPin, FiDollarSign } from 'react-icons/fi' const technicians = [ { id: 1, name: "Thabo Mbeki", profession: "Electrician", province: "Gauteng", city: "Johannesburg", rating: 4.8, reviews: 42, services: ["Wiring", "Lighting", "DB Board", "Security Systems"], priceRange: "R200-R500/hr", available: true, image: "https://randomuser.me/api/portraits/men/1.jpg", about: "Certified electrician with 10 years of experience in residential and commercial electrical work. Specializing in wiring, lighting installations and DB board upgrades.", experience: "10 years", certifications: ["Wireman's License", "ECSA Registration"], portfolio: [ "https://images.unsplash.com/photo-1590959651373-a3db0f38a961", "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab", "https://images.unsplash.com/photo-1540932239986-30128b30d0e5" ], testimonials: [ { id: 1, name: "Sarah Johnson", rating: 5, comment: "Thabo did an excellent job rewiring our home. Professional and efficient!", date: "2023-05-15" }, { id: 2, name: "David Smith", rating: 4, comment: "Great service, fixed my lighting issues quickly. Would recommend.", date: "2023-04-22" } ] } ] export default function TechnicianProfile() { const { id } = useParams() const technician = technicians.find(tech => tech.id === Number(id)) if (!technician) { return (

Technician not found

) } return (

{/* Header Section */}

{technician.name}

{technician.profession}

{technician.rating} ({technician.reviews} reviews)

{technician.city}, {technician.province}

{technician.available ? ( Available Now ) : ( Currently Unavailable )}

Hourly Rate

{technician.priceRange}

{/* Main Content */}

{/* Left Column */}

{/* About Section */}

About

{technician.about}

Experience

{technician.experience}

Certifications

{cert}

{/* Services Section */}

Services Offered

{technician.services.map((service, index) => ( {service} ))}

{/* Portfolio Section */}

Portfolio

{technician.portfolio.map((img, index) => (

))}

{/* Testimonials Section */}

Testimonials

{technician.testimonials.map(testimonial => (

{testimonial.name}

{testimonial.rating}

{testimonial.comment}

{testimonial.date}

))}

{/* Right Column - Booking Widget */}

Book an Appointment

Service Needed

Date

Time

Notes (Optional)

Deposit will be deducted from final payment

) } To run the app: 1. Install dependencies with `npm install` 2. Start the development server with `npm start` The app includes: - Mobile-first responsive design - Technician directory with filtering - Real-time messaging interface - Service categories page - Detailed technician profiles - Booking system - Modern UI with animations - South African province-specific filtering