✦ React Biodiversity Field Atlas

A practical React field atlas powered by GBIF species search and occurrence records, with taxonomic sheets, georeferenced evidence, saved taxa, and live API visibility.

✨ Idea

React Biodiversity Field Atlas turns GBIF data into a compact field notebook: search taxa, browse specimen tabs, inspect a taxonomy sheet, review georeferenced occurrence records, save taxa locally, and keep the exact GBIF requests visible.

⚙️ Stack

• React 19 + TypeScript 6
• Vite 8
• Tailwind CSS 4 via @tailwindcss/vite
• Lucide React for icons
• GBIF Species and Occurrence APIs

🔌 API

The app uses public GBIF endpoints:

• GET /v1/species/search?q={query}&limit=10
• GET /v1/occurrence/search?taxonKey={key}&hasCoordinate=true&limit=8

The species search powers taxonomy tabs and sheets. The occurrence search powers the field evidence ledger for the selected taxon.

📁 Project Structure

react-biodiversity-field-atlas/
├── src/
│   ├── app/
│   │   └── App.tsx
│   ├── features/
│   │   ├── field-log/
│   │   │   └── components/
│   │   │       └── FieldLog.tsx
│   │   └── species/
│   │       ├── api/
│   │       │   └── gbifApi.ts
│   │       └── components/
│   │           ├── AtlasCover.tsx
│   │           ├── OccurrenceLedger.tsx
│   │           ├── SpecimenTabs.tsx
│   │           └── TaxonomySheet.tsx
│   ├── shared/
│   │   ├── components/
│   │   │   └── EndpointStack.tsx
│   │   └── lib/
│   │       └── storage.ts
│   ├── index.css
│   └── main.tsx
├── public/
│   └── favicon.svg
├── vercel.json
└── README.md

🚀 Run

npm install
npm run dev

🧪 Checks

npm run lint
npm run build

▲ Deploy

📄 License

MIT License. See LICENSE.