I have a job listing platform called Jobbyist built with Vite + React + TypeScript and Supabase. The app currently renders entirely client-side (SPA), which means Google's crawler sees almost empty HTML on the initial page load, hurting SEO and Google Jobs eligibility. Help me implement a practical SSR or pre-rendering strategy. Specifically: 1. Evaluate whether to migrate to Vite SSR, use Vite's prerender plugin, or move key pages to a framework like Remix or Next.js (weighing migration cost vs SEO gain). 2. Identify which pages MUST be server-rendered: /jobs, /jobs/[slug], /jobs/[country], and any city-specific pages. 3. Write a concrete implementation plan that keeps our existing Supabase data layer and React component architecture intact. 4. Show me how to configure Vite's @vitejs/plugin-react with prerendering for our job detail pages, including the JSON-LD JobPosting schema injection. 5. Explain how to set up dynamic sitemap generation from our Supabase jobs table so Google can crawl all live job listings. Constraints: we use Supabase for auth and database, the repo is deployed via GitHub Actions, and we want to avoid a full framework rewrite if possible.

I'm building a job search UX for Jobbyist (React + TypeScript + Supabase). I want to redesign the search and filter experience to match the UX quality of LinkedIn Jobs or Seek.com. Here's what I need: 1. A debounced search input (300ms) that queries Supabase full-text search on job title, company name, and skills. 2. Filter chips/pills for: Location (city), Job Type (full-time/part-time/contract/remote), Industry/Category, Salary Range (ZAR bands), and Date Posted (today/this week/this month). 3. All active filters must be reflected in the URL as query params (e.g. /jobs?q=developer&city=johannesburg&type=remote) so pages are shareable and indexable. 4. On mobile, filters should collapse into a bottom sheet drawer. 5. Results should show a count ("342 jobs found") that updates live. 6. Zero-results state should suggest related searches or broaden filters automatically. Write the complete React component code including the Supabase query builder logic, URL sync with useSearchParams, and the mobile-responsive filter drawer. Use TypeScript throughout.

Design and code a high-converting job detail page for Jobbyist (React + TypeScript). The page should follow best-in-class UX for a South African job board. Requirements: 1. Hero section: Job title (H1), company name with logo, location badge, job type badge, salary range (if available), and a sticky "Apply Now" button that stays visible on scroll. 2. Trust signals: "Posted X days ago", application deadline countdown if < 7 days, "X people have viewed this job" counter (use a fake-realistic number from Supabase impressions or randomised), and a "Verified listing" badge if the company is verified. 3. Job description section: Well-formatted with bullet points parsed from the raw description text, "About the Company" expandable section, and required skills displayed as tag chips. 4. Sidebar (desktop) / bottom section (mobile): "Similar Jobs" (3 cards), "Jobs at [Company]" (3 cards), and a "Save Job" button that requires auth. 5. Social sharing: WhatsApp share button (critical for SA market), LinkedIn share, and copy-link. 6. Schema: Confirm the JSON-LD JobPosting schema is injected in the with all required Google fields. Provide the complete React component, Tailwind CSS classes, and any required Supabase query hooks.

Design a progressive onboarding flow for Jobbyist that maximises sign-up conversion for South African job seekers, particularly students and young professionals aged 18–35. The flow should: 1. Allow full job browsing WITHOUT requiring sign-up ("browse before you commit" principle). 2. Trigger a soft sign-up prompt only when a user tries to: save a job, set up a job alert, apply via the platform, or upload a CV. 3. The sign-up modal should be minimal: Google OAuth, LinkedIn OAuth, and email/password — no lengthy forms at this stage. 4. After sign-up, a 3-step wizard collects: (a) job preferences (role, location, job type), (b) career stage (student / entry-level / experienced / manager), and (c) CV upload (optional, skippable). 5. Immediately after onboarding completion, show a personalised "Your Jobs" dashboard populated from their preferences. 6. A/B test two variants: one that shows the wizard immediately after sign-up, and one that shows it inline in the dashboard. Write the React + TypeScript component code for the sign-up modal, the 3-step wizard, and the personalised dashboard query using Supabase. Include Supabase Auth integration with Google and LinkedIn OAuth configuration.

I want to build a WhatsApp job alert system for Jobbyist targeting South African job seekers. WhatsApp has ~90%+ penetration in SA and email open rates are poor among our target demographic. Help me design and implement: 1. A "Get Job Alerts on WhatsApp" CTA on the jobs listing page that links to a WhatsApp Business opt-in flow using the wa.me API with a pre-filled message like "I want job alerts for [role] in [city]". 2. A Supabase table (whatsapp_subscribers) to store: phone number, job preferences (role, city, job type), consent timestamp, and opt-out status. 3. A Supabase Edge Function that runs on a schedule (daily at 8am SAST), queries new jobs posted in the last 24 hours matching each subscriber's preferences, and sends WhatsApp messages via the WhatsApp Business API (or a service like Wassenger or Wati). 4. Opt-out handling: users can reply "STOP" to unsubscribe, which should update their record in Supabase. 5. A simple admin view in the Jobbyist dashboard showing subscriber count, opt-out rate, and top requested job categories. Include all Supabase schema SQL, the Edge Function TypeScript code, and the WhatsApp message templates (following WA's 24-hour policy correctly).

I need to create a programmatic SEO system for Jobbyist that generates landing pages for every combination of job category and South African city. This is how platforms like Indeed and Pnet dominate long-tail search traffic. Build me: 1. A URL structure plan: /jobs/[category]/[city] (e.g. /jobs/software-developer/johannesburg, /jobs/accountant/cape-town). Categories and cities should be slugified. 2. A Supabase query that fetches: total job count for that combo, top 10 job listings, top 3 hiring companies, and average salary if data available. 3. A React page component (CountryCityJobsPage) that uses this data with a unique H1 like "Software Developer Jobs in Johannesburg (47 open roles)", a unique meta description, and the full filtered job listing. 4. A Supabase function or script that generates a complete list of all valid [category × city] combinations that have at least 3 active jobs (to avoid thin content). 5. Auto-generated XML sitemap entries for all these pages, updated daily when new jobs are posted. 6. Internal linking: each city page should link to the top 5 related categories in that city, and each category page should link to the top 5 cities for that category. Provide all the TypeScript/React code, Supabase queries, and sitemap generation logic.

I have JobPosting JSON-LD schema markup implemented in my Jobbyist platform (src/components/SEOHead.tsx and related files). I want to audit it for full Google Jobs eligibility and fix any gaps. Please: 1. Provide the complete list of Google's required vs recommended JobPosting schema fields as of 2025, with a note on which ones will PREVENT rich results if missing (title, description, datePosted, hiringOrganization, jobLocation) versus which ones improve but don't block (validThrough, baseSalary, jobLocationType). 2. Write a TypeScript function generateJobPostingSchema(job: JobType) that maps our Supabase job record to a fully compliant schema object, handling: remote vs hybrid vs on-site via jobLocationType and applicantLocationRequirements, ZAR salary with baseSalary.currency, EMPLOYMENT_TYPE mapping from our DB values, hiringOrganization with @type, name, sameAs (company website URL), and logo (company logo URL or fallback). 3. Show how to handle the case where salary data is missing (Google recommends including even if "competitive") without triggering the "missing required field" warning. 4. Write a GitHub Actions step that runs a Rich Results validation check on a sample of job URLs after every deployment using Google's Rich Results Test API. My job TypeScript type is: { id, title, company, company_logo_url, location_city, location_country, is_remote, employment_type, salary_min, salary_max, description, posted_at, expires_at, apply_url }

I want to build a "Career Hub" content section on Jobbyist (za.jobbyist.africa/career-hub) that attracts South African job seekers through informational content and converts them to registered users. Help me: 1. Generate a content strategy: identify the top 30 high-volume, low-competition keywords South African job seekers search for (e.g. "how to write a South African CV", "average salary for accountant Johannesburg", "how to find a job with no experience South Africa"). Categorise them by intent: informational, navigational, transactional. 2. Design a content template structure for two article types: (a) Salary Guide pages (e.g. "Software Developer Salary in South Africa 2025") that pull real average salary data from our Supabase jobs table, and (b) Career Guide pages (e.g. "How to Become a Data Analyst in South Africa") that are written content with internal links to relevant job listings. 3. Build the React page components for both article types, including proper H1/H2 structure, FAQ schema (for Google's FAQ rich results), and a sidebar CTA "Browse [X] open [role] jobs now" that links to the filtered job search. 4. Create a Supabase content table schema for storing these articles (slug, title, body_html, category, target_keyword, meta_description, published_at, author). 5. Design an automated salary data aggregation query that calculates median salary ranges from our job postings table, broken down by role and city, to power the Salary Guide pages with real data. Output all React/TypeScript components and Supabase SQL schemas.

I need to optimise my Jobbyist React + Vite + Supabase app for Google's Core Web Vitals. Our users are primarily on mobile in South Africa where average connection speeds are moderate. Audit and fix: 1. LCP (Largest Contentful Paint): The hero section with a job search bar and featured jobs list is likely the LCP element. Show me how to: preload critical resources, use Suspense boundaries with skeleton loaders (not spinners), and cache the first Supabase query (featured jobs) using React Query's staleTime configuration so repeat visits are instant. 2. CLS (Cumulative Layout Shift): Job cards likely cause CLS when images load or data arrives. Implement: explicit width/height on company logo images, skeleton placeholders with exact height before job cards load, and reserve space for the job count counter. 3. INP (Interaction to Next Paint): The filter/search interaction is likely slow. Show me how to use useDeferredValue and useTransition in React 18 to keep the UI responsive while Supabase queries run. 4. Bundle size: Run a Vite bundle analysis and identify which packages are causing large chunks. Show how to code-split the jobs listing vs the dashboard vs the employer portal into separate lazy-loaded routes. 5. Image optimisation: Job listing pages often have company logos from various CDNs. Implement a WebP conversion and lazy loading strategy. Provide specific code changes for each optimisation, targeting a Lighthouse mobile score of 80+.

I need to set up a complete technical SEO infrastructure for Jobbyist, which operates as multiple country subdomains: za.jobbyist.africa (South Africa), ng.jobbyist.africa (Nigeria), ke.jobbyist.africa (Kenya), etc. Set up: 1. A dynamic XML sitemap generator (Supabase Edge Function or GitHub Actions script) that outputs: /sitemap-index.xml pointing to /sitemap-jobs.xml (all active job listings), /sitemap-pages.xml (static pages + category/city combos), and /sitemap-content.xml (career hub articles). Job sitemaps should include from the job's posted_at date and daily. 2. Hreflang implementation: since each subdomain targets a different country but the content language is English, write the correct hreflang tags for each subdomain (e.g. en-ZA for za., en-NG for ng., en-KE for ke., and x-default pointing to the root jobbyist.africa). Explain where to add these — in the of each page, not just the homepage. 3. Robots.txt configuration: allow all job listing pages, disallow /dashboard, /admin, /api, and any Supabase-related paths. 4. Google Search Console setup steps: how to verify ownership of each subdomain separately using the HTML meta tag method (preferred for Vite SPAs), and how to link GSC to Google Analytics 4. 5. Write the Supabase Edge Function code for the dynamic sitemap that queries all jobs with is_active=true and expires_at > now(), grouped by country. Output all configuration files, code, and step-by-step GSC verification instructions.

My job platform Jobbyist has an old JBoard-powered subdomain (jobs.jobbyist.co.za) that is deactivated and showing error pages in Google's search results. This is creating crawl errors, 404s, and is likely damaging my domain authority. I need to fix this cleanly. Help me: 1. Write the correct 301 redirect configuration to redirect all traffic from jobs.jobbyist.co.za/* to za.jobbyist.africa/jobs (or equivalent). Show how to set this up via: Cloudflare rules (if using Cloudflare), Nginx server config, or DNS-level redirect depending on hosting provider. 2. Submit a Google Search Console "Remove URLs" request for the indexed broken pages, and explain the correct process for bulk URL removal of an entire subdomain. 3. Set up a monitoring script (using GitHub Actions or a free tool like UptimeRobot) that alerts me if any important URLs on my platform return non-200 status codes. 4. Audit my robots.txt and sitemap to ensure the deactivated JBoard subdomain is disallowed and not in any sitemap file. 5. Once redirects are in place, write a fetch-based crawler script I can run locally to check that all old jobs.jobbyist.co.za URLs now correctly 301-redirect to the right destination on za.jobbyist.africa. This is urgent — the broken subdomain has been indexed by Google and is showing up in search results for "Jobbyist South Africa jobs".

South African job seekers are highly wary of fake job listings and recruitment scams. I need to build a visible company verification and trust system for Jobbyist. Design and implement: 1. A Supabase employer_verifications table with: company_id, verification_status (unverified/pending/verified/premium), verification_method (CIPC number check / domain email match / manual review), verified_at, and verifier_notes. 2. A CIPC (Companies and Intellectual Property Commission) registration number input field on the employer sign-up form, with a validation function that checks the format of SA company registration numbers (####/######/##). 3. Three visible trust tiers displayed on job listings: "Verified Company" (green badge - passed CIPC check or domain email), "Direct Employer" (blue badge - company posted directly, not agency), and "Recruiting Agency" (grey badge - staffing agency). 4. A "Report this listing" button on every job detail page that submits a Supabase report with category options: fake company, misleading salary, already filled, inappropriate content. 5. An internal admin moderation queue (simple React component) showing flagged listings with approve/remove actions and auto-hide after 3 reports. 6. Anti-scam UX copy for the application flow: a warning banner for listings that ask for payment, request personal banking details, or have been reported. Provide all Supabase SQL, React TypeScript components, and the CIPC number validation regex.

I want to add salary transparency features to Jobbyist tailored for the South African market. SA has unique salary context including BBBEE levels, EE requirements, and ZAR-based salary bands. Build: 1. A salary range input for employers posting jobs: min/max ZAR monthly salary with a "negotiable" toggle. Add a "Show salary publicly" checkbox (defaults to yes, with a note that listings with salaries shown get 40% more applications). 2. A salary filter on the job search page: ZAR bands (R0-R15k, R15k-R30k, R30k-R50k, R50k-R80k, R80k+) as filter chips, with a custom range input for precise filtering. 3. A "Salary Insights" tooltip on job detail pages: if we have 5+ similar jobs in the same category and city, show "Typical salary for [role] in [city]: R[X] - R[Y]/month" pulled from our Supabase aggregate. 4. EE/BBBEE fields on the job posting form: EE applicants preferred (yes/no), BBBEE level required (dropdown 1-8 or N/A), disability-friendly (checkbox). Display these as filterable badges on the job card. 5. A "Salary Calculator" tool page (/tools/salary-calculator) that lets users calculate their take-home pay after PAYE, UIF, and SDL deductions based on gross monthly salary — using the 2025/2026 SARS tax tables. This is a high-value SEO page. Write all React TypeScript components, Supabase schema updates, and the PAYE calculation logic using correct 2025/2026 SARS brackets.

Build a complete self-serve job posting flow for Jobbyist employers, integrated with Payfast for South African payment processing. The flow should: 1. Multi-step job posting form (4 steps): Step 1: Job details (title, description with rich text editor, category, location, remote option), Step 2: Company details (name, logo upload to Supabase Storage, website, CIPC number), Step 3: Requirements (salary, employment type, BBBEE/EE fields, application deadline), Step 4: Review & payment. 2. Pricing tiers: Standard (R299/30 days - 1 active listing), Professional (R599/30 days - featured placement + highlighted card), Enterprise (contact us). Show these on a pricing card on Step 4. 3. Payfast integration: use Payfast's onsite payments (embedded checkout, not redirect) for Standard and Professional. Show me the correct Payfast signature generation in a Supabase Edge Function (server-side to protect merchant credentials), and the ITN (Instant Transaction Notification) webhook handler that activates the job listing on successful payment. 4. Job draft system: allow employers to save a draft (Supabase drafts table) and return to complete later. Send a reminder email after 48 hours of inactivity on a draft using Supabase's pg_cron extension. 5. Post-payment: send a confirmation email via Supabase's email hook (or Resend API) with the live listing URL, performance dashboard link, and instructions for editing the listing. Provide all React TypeScript components, Supabase SQL, and the Payfast Edge Function with correct SHA-512 signature generation.

Design an employer dashboard for Jobbyist that gives hiring managers the insights they need to evaluate their job postings and manage applicants efficiently. Build: 1. Dashboard overview: cards showing active job listings, total applications received (this week / all time), listing views, and apply rate (views-to-applications ratio). Use Recharts for a simple line graph of applications over time. 2. Applicant management table: for each job listing, show a table of applicants with: applicant name, application date, CV download link (if uploaded), status (new/viewed/shortlisted/rejected/offered), and notes field. Status changes should be a dropdown that updates Supabase in real-time. 3. Listing performance metrics: for each active job, show views (tracked via a Supabase increment on each job detail page load), applications, "apply rate" percentage, days remaining, and a "Boost listing" upsell button. 4. CV viewer: an in-browser PDF viewer (using react-pdf or pdf.js) that opens uploaded CVs without downloading, with a "Download" button and "Add to shortlist" one-click action. 5. Email templates: pre-written email templates for "Application received", "Shortlisted", "Not successful" that employers can customise and send directly from the dashboard via Supabase email functions. 6. Mobile-responsive design: employers often review applications on their phone; the dashboard should work well on a 375px wide screen. Provide all React TypeScript components, Supabase real-time subscription hooks, and the applications tracking table SQL schema.

Audit and significantly improve the mobile experience for Jobbyist (React + Vite PWA). The target user is a South African job seeker on a mid-range Android phone with variable data connectivity. Improve: 1. Navigation: implement a bottom navigation bar (tab bar) for mobile with 4 tabs: Home, Jobs, Saved, Profile. On desktop keep the existing top navigation. Use Tailwind's responsive breakpoints and React Router for tab routing. Ensure the active tab is visually clear. 2. Touch targets: audit the job card components for touch target sizes (minimum 44x44px per WCAG). Specifically: the "Apply" button, "Save job" heart icon, and filter chips must all be at least 44px in their smallest dimension on mobile. 3. Job card redesign for mobile: on screens < 768px, the job card should show only: company logo, job title, company name, location, salary (if available), and a large "Apply" button. Remove secondary info to reduce cognitive load. 4. Offline capability: implement a service worker using Workbox (compatible with Vite) that: caches the last-visited 20 jobs offline, shows a "You're offline" banner with the cached jobs still browsable, and queues save-job actions to sync when back online using Background Sync API. 5. Install prompt: implement a custom PWA install banner (not the browser default) that appears after a user's second visit, offering "Add Jobbyist to your home screen" with a clear value prop. Show me all the Vite PWA plugin configuration (vite-plugin-pwa), service worker setup, and the React components for the bottom nav and install prompt.

Implement Web Push notifications for the Jobbyist PWA using the Web Push API and a Supabase Edge Function as the push sender. Build: 1. Permission request flow: after a user sets up job alert preferences, show a permission request prompt for push notifications with clear value messaging: "Get notified instantly when new [role] jobs are posted in [city]". Don't ask on first load — wait until the user has shown intent (saved a job or set up an alert). 2. Supabase push_subscriptions table: store the PushSubscription endpoint, keys (auth, p256dh), user_id, device_type, created_at, and last_active. 3. Push sender Edge Function: a TypeScript Supabase Edge Function that uses the web-push library to send notifications. It should: accept a payload with job title, company, and deep link URL, batch send to all matching subscribers, and handle unsubscribed endpoints (delete stale subscriptions). 4. Notification payload: the push notification should show: title "[Company] is hiring a [Job Title]", body "In [City] · [Salary]", icon (Jobbyist logo), badge, click action opening the job detail URL. 5. Scheduling: trigger this Edge Function from a pg_cron job that runs hourly, finds new jobs posted in the last hour, and notifies matching subscribers. 6. Service worker push handler: write the service worker code that receives the push event and displays the notification with correct click handling and focus behaviour. Include all TypeScript code, SQL schema, and the VAPID key generation instructions.

Set up comprehensive analytics tracking for Jobbyist using Google Analytics 4 and a custom React analytics hook. I need to track the full job seeker funnel. Implement: 1. GA4 setup in Vite React: install react-ga4 or gtag.js directly, configure with my GA4 measurement ID using import.meta.env.VITE_GA4_ID, and fire pageview events on React Router route changes. 2. Custom events to track — write the sendEvent() calls for each of these key actions: - job_search (query, location, job_type, results_count) - job_card_click (job_id, job_title, company, position_in_list) - job_apply_click (job_id, job_title, is_external_redirect) - job_save (job_id, job_title) - filter_used (filter_type, filter_value) - zero_results_shown (query, location) - sign_up_started, sign_up_completed (method: google/linkedin/email) - alert_created (role, location, frequency) 3. A useAnalytics() custom React hook that wraps these events and injects user_id (hashed Supabase user ID) as a GA4 user property for cross-device tracking. 4. Funnel visualisation: set up a GA4 Exploration funnel report that tracks the 5-step funnel: homepage → search results → job detail → apply click → apply success (or sign-up if gated). 5. A simple internal analytics dashboard page (/admin/analytics) that shows our own Supabase-based metrics without relying on GA4: daily active users, top searched keywords (from a search_logs table), top viewed jobs, and conversion rate from view to apply. Provide all TypeScript code, the GA4 configuration, and the Supabase search_logs table schema and queries.

Build a lightweight referral system for Jobbyist to drive organic growth via job sharing, with a particular focus on WhatsApp sharing (dominant in South Africa). Build: 1. Referral link generation: each logged-in user gets a unique referral code (stored in their Supabase profile). Any job URL can be shared with their code appended: za.jobbyist.africa/jobs/[slug]?ref=[code]. 2. Attribution tracking: when a user lands on a job page via a referral link, store the referral in localStorage and Supabase (referral_visits table: referrer_code, referred_url, arrived_at, converted_to_signup boolean). 3. Conversion tracking: if a referred user signs up, link their account to the referrer and record the conversion. Update the referrer's stats. 4. Rewards: after 5 successful referrals (sign-ups), the referrer gets 1 month of Jobbyist Pro free. Show progress in their profile dashboard: "3/5 referrals to unlock Pro". 5. Sharing UX on job detail pages: a "Share this job" row with: WhatsApp button (deep link with pre-filled message including the job title and referral URL), LinkedIn share, Twitter/X share, and "Copy link" button. On mobile, also include the native Web Share API button as the primary CTA. 6. Leaderboard (optional): a public /top-sharers page showing the top 10 job sharers this month (by first name only for privacy) to create social proof and competition. Provide all React TypeScript code, Supabase SQL for the referrals tables, and the WhatsApp deep link construction logic.

Build an AI-powered job match score feature for Jobbyist using the Anthropic Claude API (or OpenAI) via a Supabase Edge Function. This should be a key differentiator from Pnet and CareerJunction. Build: 1. CV parsing: when a user uploads a PDF CV, trigger a Supabase Edge Function that: extracts text from the PDF using pdf-parse, sends it to the Claude API asking it to return structured JSON (name, skills[], experience_years, education[], current_role, preferred_roles[]), and stores this structured profile in a user_profiles Supabase table. 2. Job match score: for each job listing a user views while logged in, calculate a match score (0-100) by sending both the user's structured profile and the job description to Claude with a prompt asking for a JSON response with: score (integer), matching_skills (array), missing_skills (array), and fit_summary (1 sentence). 3. Display the match score: show a coloured percentage badge on the job card ("82% match" in green, "45% match" in amber) and a match breakdown on the job detail page. 4. CV optimisation tips: on the job detail page, show a "How to improve your CV for this role" section (Pro feature only) that lists the missing_skills and suggests how to address each gap. 5. Free vs Pro tier gating: free users see match scores but not the detailed breakdown. Pro users get the full breakdown and CV tips. Gate the Claude API calls (which cost money) to Pro tier. 6. Caching: cache match scores in Supabase (job_id + user_id → score) with a 24-hour TTL to avoid redundant API calls. Provide all TypeScript code for the Edge Functions, PDF parsing, Claude API prompts, and the React components for displaying match scores.