# Southern Sudan Digital Archive
A modern, museum-quality React web application for browsing the Southern Sudan Photo and Object Collections from the Pitt Rivers Museum, Oxford.
## Overview
This application provides an interactive digital archive interface for exploring:
- **147 collections** organized by accession number prefix
- **8,523 high-quality images** from the Southern Sudan project
- Museum-style presentation similar to the Pitt Rivers Museum website
## Features
✨ **Key Features:**
- 📸 Responsive image grid gallery
- 🔍 Collection search and filtering
- 🎯 Detailed image modal view with metadata
- 📱 Mobile-friendly responsive design
- ⚡ Fast loading with lazy image loading
- 🎨 Museum-inspired aesthetic design
## Setup Instructions
### Prerequisites
- Node.js 16+ and npm
- Python 3.6+ (for metadata processing)
### Installation
1. **Install dependencies:**
```bash
npm install
```
2. **Metadata Processing** (already done - generates `metadata_enriched.json`):
```bash
python process_metadata.py
```
This scans the `Southern_Sudan_Archive/images` directory and creates a structured metadata file grouping images by accession prefix.
3. **Copy assets to public folder:**
```bash
cp metadata_enriched.json public/
cp -r Southern_Sudan_Archive public/
```
### Development
Start the development server:
```bash
npm run dev
```
The app will open at `
localhost` with hot module reloading enabled.
### Production Build
Build for production:
```bash
npm run build
```
Preview the built app:
```bash
npm run preview
```
## Project Structure
```
.
├── src/
│ ├── components/
│ │ ├── CollectionList.jsx # Sidebar collection navigator
│ │ ├── ImageGrid.jsx # Responsive image gallery
│ │ └── ImageModal.jsx # Image detail modal
│ ├── App.jsx # Main application component
│ ├── App.css # Main styles
│ ├── main.jsx # React entry point
│ └── index.css …