LocalLore Map

LocalLore Map is an interactive web application for exploring cultural stories and points of interest on a map. Users can browse location-based stories, filter content by category and year, search through available entries, view details for each point of interest, and add new stories through a multi-step form.

Features

• Interactive Mapbox map centered around Ioannina, Greece
• Cultural stories displayed as clustered map markers
• Category filtering for history, architecture, legends, and photography
• Search functionality for stories and categories
• Year-based filtering
• “Near me” filtering using browser geolocation
• Detailed story modal with images and contributor information
• Multi-step form for adding a new story
• Location selection through an interactive map
• Local storage support for newly added stories

Tech Stack

• React
• Vite
• JavaScript
• Tailwind CSS
• Mapbox GL JS
• Supabase client setup

Project Structure

src/
├── components/
│   ├── AddStoryPanel.jsx
│   ├── FilterSideBar.jsx
│   ├── LocationPickerMap.jsx
│   ├── MapView.jsx
│   ├── StoryList.jsx
│   ├── StoryModal.jsx
│   └── StorySideBar.jsx
├── data/
│   └── stories.js
├── lib/
│   └── supabase.js
├── App.jsx
├── index.css
└── main.jsx

Getting Started

Prerequisites

Make sure you have Node.js and npm installed.

Installation

npm install

Environment Variables

Create a .env file in the root directory by copying .env.example:

cp .env.example .env

Then add your own Mapbox token and, if needed, your Supabase configuration:

VITE_MAPBOX_TOKEN=your_mapbox_token_here
VITE_SUPABASE_URL=your_supabase_project_url_here
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here

Run Locally

npm run dev

Build

npm run build

Notes

• The .env file is intentionally ignored and should not be committed to GitHub.
• The project uses a public Mapbox style by default. You can replace it with your own Mapbox style URL if needed.
• Newly added stories are stored locally in the browser using localStorage.

Context

This project was developed as part of a software development internship, focusing on interactive maps, location-based content, filtering, and user-centered web application features.