A MERN stack interactive paleontological field map.
Bridging science and curiosity with an immersive digital field journal where fossils regain their place in the world.
Want to go further? Register to add your own finds and build your personal digital field log.

DinoLog is built for researchers, amateur paleontologists, and enthusiasts to explore and record fossil discoveries. Inspired by field notebooks and geological maps, it combines scientific accuracy with archival aesthetics.
It offers an immersive digital field journal where fossils are restored to their geographic context and every site reveals part of Earth’s ancient story.

🌐 Front‑End

• 🗺️ Interactive Map
  Discover dinosaur localities with custom markers, expedition‑style textures, and popups showing specimen details.
• 📍 Add & Edit Discoveries
  Floating action button and popup edit controls let logged‑in users add or update fossil records.
• 🔍 Search & Filter
  Client‑side search bar filters fossils by name, species, or description for instant results.
• 👤 User Authentication Modal
  Glass‑style overlay with login/register forms integrated with JWT authentication.
• 🛡️ Type Safe Data Model
  Discovery shape enforced with TypeScript interfaces for predictable rendering and maintainability.
• 📱 Responsive Design
  Layout adapts seamlessly to mobile devices, ensuring the app is usable on phones and tablets.
• 🎨 Archival Aesthetics
  CSS overlays, textures, and expedition‑style theming for immersive UI.

⚙️ Back-End

• 🔑 JWT Authentication with Passport
  Secure login/register routes, token‑based session management, and protected endpoints.
• 🗄️ MongoDB + Mongoose Models
  Schema‑based fossil records with validation for coordinates, species, and metadata.
• 📂 Multer File Uploads
  Handles fossil photo uploads, storing images in the uploads/ directory and serving them statically.
• 📜 RESTful API Routes
  /api/auth for authentication and /api/discoveries for CRUD fossil operations.
• 📊 Logging & Middleware
  Morgan for request logging, CORS for cross‑origin access, and body‑parser/Express JSON for request handling.
• 🛡️ Ownership Enforcement
  Edit and delete routes restricted to the user who created the discovery.
• ⚡ Error Handling
  Consistent JSON responses with success/error keys for reliable frontend integration.

• React
• TypeScript
• CSS
• Leaflet / React‑Leaflet
• React Router
• React‑Toastify
• Context API

• Node.js + Express
• MongoDB + Mongoose
• Passport (JWT strategy)
• Multer
• Morgan
• CORS
• Dotenv

assets/
client/
├── public/
│   ├── images/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── AddDiscoveryForm.tsx
│   │   ├── AuthModal.tsx
│   │   ├── EditDiscoveryForm.tsx
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   ├── HeroSection.tsx
│   │   └── MapSection.tsx
│   ├── context/
│   │   └── AuthContext.tsx
│   ├── pages/
│   │   ├── HomePage.tsx
│   │   └── MyFossilsPage.tsx
│   ├── App.tsx
│   ├── index.tsx
│   ├── App.css
│   └── index.css
config/
models/
routes/
uploads/
server.js

• Wikipedia
• The Paleobiology Database
• Ancient Earth Globe
• Geological maps, expedition journals, and paleontology field notes

git clone https://github.com/Do0ky/DinoLog.git 
cd DinoLog
npm install
npm start

• 🧭 Advanced map filters (epoch, formation, location)
• 🦖 Species Page Expansion (connect popup to profiles similar to DinoFinder)
• ♿ Accessibility audit and improvements (including more descriptive ARIA labels for screen readers)
• 🗂️ Enhanced "My Fossils" Page with gallery view, mini‑map of personal discoveries, and quick edit/delete controls

Created by:

• Claire Peyre