Aviary is a project completed for Practicum by Yandex's October Code Jam. During the Code Jam, two web developers and one web designer came together over the course of three days to create an application that would help users stay grounded during the pandemic.
Our group designed and built Aviary, an application that allows users to pick a landscape and location to build a custom audiovisual experience containing images of the chosen landscape as well as the sounds of birds native to their chosen location.
Check out a live demo of this project here.
- Chose a location using the form on the landing page
- Or click the player link in the header to be taken to sample soundscape depicting the bird sounds of Jackson, NH with a Mountain backdrop
- From the player
- Click the Mountain button to pick a new location or landscape preference
- Click the Bird button to see the list of currently playing birdsongs
- Click the Shuffle button get a randomize location and landscape
- React and React Router handle the frontend of the application
- Styled-Components make the frontend look good
- eBird Api: Provides data for what birds have been spotted recently in the user's chosen location
- Xeno-canto Api: Provides the songs of birds found by the eBird Api
- Unsplash: Provides the images to match the landscape chosen by the user
✨ Screenshots - Live Demo
Clone
$ git clone https://github.com/McCambley/hacktober-code-jam.git
Install
$ cd hacktober-code-jam
$ npm i
Launch
$ npm run start
- Create complete this readme and create a more in-depth about page
- Connect skip buttons to audio rather than image
- Create some new button functionality for choosing a new image... or redesign skip buttons so as to not confuse them with audio functionality
- Allow for entry of place names rather than only zipcodes
- With 4, expand location beyond the united states
- Display images of birds in addition to the names on the player popup
- Make player progress bar something more functional, perhaps a volume slider
- UI fixes (close on overlay, make place options more obviously clickable etc.)
- Store previous calls in next buttons
- Consolidate to one page
- Add a random image button instead
- Certify the unsplash API to be able to get more than a hundred requests
- If no bird calls are returned then populate with a new zip code
- Troubleshoot if only three calls are returned
- Add Fetch current location
- convert Zipcode to location name using this
- Readme
- Family feedback
- Journal
- Tooltip images of current birds
- Share button instead of save button