Dinopedia is a responsive mobile application and website designed to compile fascinating facts about dinosaurs sourced from the collections of London's Natural History Museum. It aims to present this wealth of information in an engaging and interactive manner, in a way that tickles everyone's curiosity and sense of wonder.
This application was developed as a learning project for Chingu Voyage 48. It retrieves information about dinosaurs through the Chingu Dinosaurs API.
- Dinosaur Display:
- Displays dinosaurs' name, weight, length, country, diet, and corresponding images sourced from the provided API data.
- Each dinosaur card is clickable to view full details.
- Dinosaur Search:
- Search, filter, and sort feature allows users to search for dinosaurs by name, weight, length, country, and diet.
- Search functionality should be case-insensitive and allow partial matching of dinosaur names.
- Charts:
- The Charts page displays two charts showing the distribution of dinosaur diet and type data. Users can filter the data using provided categories.
-
Responsiveness: The application is responsive across various devices and screen sizes.
-
Display news about recent dinosaur discovery:
- The app uses the GNews API to feature recent discoveries in paleontology.
- Map with dinosaurs findings location:
- On each dinosaur details page the app incorporates an interactive map feature highlighting locations where dinosaur fossils have been discovered.
- Dinosaur of the day section:
- Includes a section in home page highlighting a specific dinosaur each day.
- Fun and interesting facts are displayed as users navigate through pages other than the home page.
- Clone this project locally
- Run
npm installin your bash/command line - Run
npm run devin your bash/command line
- @babel/runtime (^7.24.1)
- chart.js (^4.4.2)
- chartjs-plugin-datalabels (^2.2.0)
- react (^18.2.0)
- react-chartjs-2 (^5.2.0)
- react-dom (^18.2.0)
- react-loader-spinner (^6.1.6)
- react-router-dom (^6.22.3)
- react-slider (^2.0.6)
- react (^18.2.64)
- react-dom (^18.2.21)
- react-slider (^1.3.6)
- typescript (^5.2.2)
- vite (^5.1.6)
A list of helpful documents, tutorials and links that made the structure of this code rich and well organized:
Log of Team Decisions and Accessible and valuable resources
- Amina Hargitai
- Karl Gosas