At first, I want to create interesting way of teaching new knowledge through virtual interaction with current web technology. I think that fascinating visualization and images help people engaging more in learning new materials, creating relaxing and fun experience towards user. After some considerations, I come up with Animal Explorer, an interactive map where you can learn where animals live in the world.

What it does

The web application is a very simple MVP that allows people to know where an animal, if it's recorded, live. There are two main functionalities that the application offers: the interactive map that allows user to draw any area on the map and a search form to get the list of animals stored in the database. The latter is straightforward while the former determine the animals if the location of that animal intercepts the area of the user.

How we built it

For the whole application, I used Node.js, Express.js along with HTML, CSS, JavaScript, Boostrap 5.2, Leaflet.js to create both the client and server side. I connected the application to AWS through Singlestore.

Challenges we ran into

Dealing with custom geo-spatial data is very challenging since there are many invalid data in my dataset. Also, different format usages between dependencies in the application also pose a challenge when uploading data to AWS through Singlestore.

Accomplishments that we're proud of

I managed to finish a functional application with the quick setup from Singlestore.

What we learned

I learnt so much about geo-spatial data and how to handle the type of data which is a very interesting while I was interacting with Singlestore.

What's next for Animal Explorer

There are a lot a functionalities that I want to support for this application ranging from user authentication to more actions towards the data and the map.

Share this project: