Soundscape

Explore Birds Soundly.

Comment

Inspiration:

The goal of Soundscape is to provide an avenue for scientific exploration and education without needing technical prowess. Soundscape allows for the exploration of bird observations in the Humboldt area including: common names, pictures, locations, sounds, and more. Through the implementation of Google Maps, users can locate where specific observations occurred and learn about their local wildlife. External links to Wikipedia allow for further investigation and opens the doors for fun and easy educational activities. Users may search up bird types, and even save pictures for later! All data is sourced from the iNaturalist database.

How we built it

Using typescript and react to build a dynamic webpage, users are presented with data from the iNaturalist database. Our custom backend API handles requests from the frontend to query and organize iNaturalist API responses. Responses are stored in a cache handled by the backend and the cache serves data to the frontend. Users can favorite pictures and load them at later date. These favorited birds are fetched from the browser's index database.

Architecture Diagram

Architecture Diagram

Challenges we ran into

The most challenging aspect about this project was the architectural design. In the start, we had high ambitions for various different solutions. However, as the project progressed and we made steps towards a more complete backend, we simplified design and ended up not needing a lot of proposed ideas. We found having a simple, working system is a higher priority than a complex system that doesn't work or is error-prone. Coming to a consensus as a team was both a difficult and rewarding task.

Accomplishments that we're proud of

Design:

The user experience (UX) is something that we are very proud of. The design of the interface is clean, reactive, and professional. Everything displayed is necessary and important elements are highlighted by the design itself.

Cooperation:

We are proud of the team management skills we both demonstrated and learned. Coming together to give opinions, design and implementation ideas, and create a complete product was a wonderful experience. Sharing knowledge bases and teaching each other different parts of full-stack development both helped us grow and garner new perspectives.

What we learned

Throughout the project we developed a variety of new skills both as a team and individually, teaching and learning fullstack development, building coordination amongst each other, and learning new programming tools. The tools that the team learned included: Typescript, Node.js, Tailwind CSS, and external API requests.

What's next for Soundscape

  1. Implement - Host the application on a server for public access. Possibly allocate budget for server cost and Google Maps API.
  2. Gamification - Add reward system, make exploration of site more entertaining and provide more activities.
  3. Region Mapping - Allow for the user to decide what region they wish to see results from (where the query searches).
  4. Future Queries - Add any additional queries or advanced search parameters that the non-profit desires (code base expandable, just need direction).

Built With

Share this project:

Updates