NZ Birds Front End

COSC203 Web, Databases & Networks - James Robiony-Rogers : 5793901

Front end web application for a dataset of New Zealand birds.

---

Overview

This website was created as part of my COSC203 Web, Databases & Networks course at the University of Otago. The website is the front end for a database of New Zealand birds. The website allows users to search for birds by name, filter by conservation status, and sort via a variety of filters.

The website is built using vanilla HTML, CSS and JavaScript and is hosted on the University of Otago's servers which can be found here

Links

• Git Repository: Altitude
• Website: Hosted using Gitlab Pages

Built With

• Data Provided By: Birds New Zealand
• Library: SweetAlert2

File Tree

• assets - Contains svg icons
• data - Contains the JSON file of the bird data
• data/images - Contains the images of the birds
• readme_assets - Contains the images used in the README

Running Locally

1. Clone the repo using Git

git clone https://github.com/JamesRobionyRogers/NZBirds-FrontEnd.git

2. Open the project in VS Code & start up a live server

View Project

Unresolved Issues

As far as I am aware, there are no unresolved issues with the website.

Enhancements / Extra Features

• Help Modal - In order to keep a minimal design I opted to hide the conservation status key behind the ? icon next to the filter. The help icon is also equipped with a CSS tooltip to improve the UX. I used the SweetAlert2 library for the modal for the modal.

Further Development

Here are some of the features that I would like to add to the project in the future:

• Add a backend to the project to allow users to add their own birds to the database.
• Add a sightings page to allow users to add sightings of birds to the database.
• Toggling between light and dark mode.