dinosaur.directory

Built with:

• React
• Bootstrap 5
• SCSS
• Three.js (for 3D globe)

Features

• Home Page:
  • Highlights the Dinosaur of the Week.
  • Banners linking to main sections.

• Discover Page:
  • Interactive 3D globe to explore the Mesozoic era.
  • Timeline slider to view different periods.
  • Clickable location markers revealing dinosaurs found in that region.
  • Links to A-Z pages from dinosaur names.

• A-Z Page:
  • Interactive encyclopedia of dinosaurs with search and filter capabilities.
  • Filter by diet, period, and sub-period.
  • Detailed pages for each dinosaur.

• Quizzes:
  • Three quiz types with varying difficulty levels (Easy, Medium, Hard).
  • Quiz types include:
    • Pick Period: Guess the period the dinosaur lived in.
    • Trivia: Text-based questions.
    • Guess Correct Image: Identify the correct dinosaur image.

• FAQ Page:
  • Frequently asked questions about dinosaurs and the application.

Data Sources

Dinosaur Directory couldn’t have been made without the help of these resources:

• Data and images from the Natural History Museum
• Maps from Dinosaur Pictures

Getting Started

To get the project up and running locally:

1. Install dependencies: npm install

2. Start the development server: npm start

Building for Production

1. To create a production build: npm run build

2. To serve the production build locally: serve -s build