DINOZz is a web application that helps dinosaur enthusiasts explore and learn about various types of dinosaurs quickly and easily. The data, sourced from the National History Museum in London, includes details about each dinosaur’s characteristics, diet and geographical origin. Users can search and filter the dinosaurs, save their favorites, dive into interactive charts for insights, check the locations map where they have been found and stay updated with the latest news in this field.
- Search component: Allows users to search for dinosaurs by name, weight, length, country, and diet. While searching by name, users get autocomplete suggestions matching the names of the dinosaurs.
- Dinosaur display card: After the users perform the search, the results show a card for each dinosaur, displaying its name, weight, length, country, diet and corresponding image.
- Dinosaur details page: Showcases dinosaur’s full details, description, location and corresponding image sourced from the provided API data.
- Dinosaur location map: Displays the location of a selected dinosaur on a map. After selecting a specific dinosaur and going to its details page, users can find a map with its geographic location.
- General locations map: Displays all the countries where dinosaurs have been found, while every country shows a list of its dinosaurs. The results are dynamically generated from the provided API data.
- Charts section: Displays two charts (pie chart and doughnut chart) illustrating the distribution of general dinosaur diet and type data.
- News section: Displays the latest news about dinosaurs
- Favorites feature: Users have the possibility to save a dinosaur to favorites and then view it in a separate Favorites page
Open our app on Render
OR
You can clone the repository to your local machine.
In order to successfully run the project locally, install all necessary dependencies from package.json.
Create a local .env file at the root level of the project and add the following API keys (online registration for an API key with the listed providers will be needed):
- VITE_GOOGLE_MAPS_API_KEY, VITE_GOOGLE_MAPS_MAP_ID from Google Maps API using Google Cloud Platform
- VITE_GEOAPIFY_API_KEY from Geocoding API Geoapify
- VITE_NEWS_API_KEY from News API GNews
- Stefan Brkic, who is also in the list of Developers, took the additional responsibility of designing the interface
- Andra Mertilos #1: GitHub / LinkedIn
- Stefan Brkic #2: GitHub / LinkedIn
- Andrei Olteanu #3: GitHub / LinkedIn
The Figma design for this project can be found here.
- The National History Museum in London provided access to the dataset containing dinosaur information.