Backyard Burbs is our "Stretch Tech Challenge" in Mod 3 of Turing School's Frontend program. We had the opportunity to choose a new technology to self-study and implement. Based on personal interest and suggestions from our mentors we chose to learn Context - a Global State Management tool. Along with hooks, context is a powerful tool to simplify how data is passed to nested components.
We soon found that our app was not complicated enough to warrant using context for our essential data management. However! It is a powerful tool to simplify creating a light and dark theme that persists across all components. We called our theme Goldfinch/Bluejay and we hope you enjoy the charming chirp when you toggle your theme!
The app itself is designed to be a fun and colorful tool for children to begin identifying the birds in their backyard. You begin on a page showing a map of the USA. Please choose your state and then you will be guided to a list of the birds in your area. Simply click on the bird you believe you see, and you'll find more details such as: more images, the scientific name, the last time that bird was seen, and how many were seen. Click the binoculars and add that bird to your own list! A few design considerations we prioritized were: simplicity, large and responsive buttons, and color.
| Sydney Bear | Lauren Kessell | Kat White |
 |
 |
 |
- Becca Phillips for designing our burb logo
- BBC Sound Effects for our chirp audio
- Flaticon for the cute binoculars
- Practice using React and Router
- Practice writing DRY code by reusing components
- Practice User Experience Testing with Cypress
- Get our of our comfort zone and self-teach a new technology
- Practice using Context with Hooks to simplify our data model
In the new Terminal window, run the following commands:
git clone git@github.com:k-atwhite/backyard-burbs.git
cd backyard-burbs
npm install
npm start
Open a window in your web browser of choice, and visit localhost:3000 to view the app!
There are so many ways to improve this site. Some major priorities include:
- A bespoke splash screen!
- More robust search criteria, including: size of bird, color of bird, exact location.
- More details for each bird - will need a third API for this.
- Bird songs attached to each Bird Detail page.
- An ability for users to upload their own photo.