SpotLocal: FBLA
Competition Project

Project Overview

SpotLocal is a modern, offline-first web application designed to help users discover and support local businesses in their community. Built as my entry for the FBLA Coding & Programming competition, it demonstrates how thoughtful architecture can solve real accessibility and infrastructure challenges.

Key Features

Offline-First Architecture

The application is fully functional without an internet connection after initial load. Data is cached via Web Workers and persisted in browser storage, making it ideal for rural communities or areas with unreliable connectivity.

Zero-Cost Infrastructure

By running entirely client-side with no external database or backend server, SpotLocal eliminates hosting costs and maintenance overhead. This makes it a sustainable solution for small business associations with limited budgets.

Accessibility First

• High-contrast UI options for visual accessibility
• Full keyboard navigation support
• Screen reader optimized structure with ARIA labels
• Voice command integration via Smart Assistant
• Accessibility badges for businesses (wheelchair accessible, etc.)

Privacy-Centric Design

• Local storage only — no data sent to servers
• No tracking or analytics
• Transparent geolocation permissions
• User data never leaves the device

Core Functionality

Business Discovery

Users can browse businesses by category (Food, Retail, Services, Arts, etc.) with visual category indicators. The real-time fuzzy search uses Levenshtein distance algorithm to handle typos and provide instant suggestions.

Interactive Map

Geographic visualization with dynamic clustering for clutter-free viewing. Features "Find Places Near Me" geolocation with privacy controls and immediate clustering on load.

Smart Assistant

AI-simulated chat interface for navigation help with context-aware responses. For example, typing "Show me pizza" navigates to filtered pizza restaurant results. Includes voice commands for accessibility.

Review System

Users can leave detailed ratings and reviews with real-time updates. Features "Verified Human" checks for review submission, community moderation tools (Helpful/Report buttons), and review search/filtering by rating.

Community Impact Scores

Automatic 1-100 scoring based on business longevity, ownership status, and ratings. Visual breakdown shows score factors like "+25 Locally Owned".

Low Bandwidth Mode

A data-saving mode for slow connections that replaces heavy maps and images with lightweight placeholders. Togglable via Settings or Smart Assistant, making the app usable even on 2G connections.

Technology Stack

Technology	Purpose
React 18	UI library with TypeScript for type safety
Vite	Build tool and dev server
Leaflet / React-Leaflet	Interactive maps
Lucide React	Iconography
React Router	Client-side routing
Web Workers	Background data caching

Architecture

src/
├── components/      # Reusable UI elements
│   ├── BusinessCard
│   ├── MapView
│   └── SearchBar
├── pages/           # Top-level route controllers
├── utils/           # Pure functions for logic
│   ├── sorting.ts
│   ├── searching.ts
│   └── geometry.ts
└── data/            # Data persistence layer
    └── localStorage helpers

What I Learned

Building SpotLocal taught me the importance of designing for constraints from the start. The offline-first requirement forced me to think carefully about data synchronization, while the accessibility requirements made me consider users I might not normally design for. The zero-cost infrastructure constraint led to creative solutions using browser capabilities I hadn't explored before.

Competition Results

This project was submitted to the FBLA 2025-2026 Coding & Programming Competition representing Pine Creek High School.