'Hey! I found a bird!' is a delightful and user-friendly web application, as well as an educational tool, built with React, designed to assist users to make informed decisions when they encounter a baby bird in need. The app provides step-by-step guidance on how to care for and assist the bird (or tells you if you don't have to intervene), along with engaging bird photos, helpful resources, and informative birding links.

Key features:

• Conditionally rendered questionnaire:

  Interactive steps: Users are guided through a series of questions to identify the situation and condition of the baby bird.

  Customized instructions: Based on user responses, the app provides tailored instructions for appropriate actions.

• User-friendly interface:

  Visual appeal: Utilized a calming and inviting design aesthetic to ensure a positive user experience.

  Responsive design: Ensured that the app is accessible and visually appealing across a range of devices and screen sizes.

• Useful & cheerful extras:

  Randomized gallery: Integrated the Pexels API to display random bird photos, adding an element of delight to the user's experience and enhancing the app's atmosphere.

  Birding links: Compiled a curated selection of informative links related to birding, bird species identification, and bird rescue.

Challenges & solutions:

• Design consistency: I had to ensure a consistent and engaging design throughout the app on all types of devices. I created a design style guide and adhered to predefined design patterns for a cohesive look and feel.
• Content curation: I wanted to select relevant and useful birding links for the app's users. I conducted research to identify reputable sources and compiled a curated list of links that align with the app's purpose.
• API integration & documentation reading: The challenge was to incorporate a formerly unknown API seamlessly into the app. I studied the API documentation, implemented fetch requests, and integrated error handling to handle API responses.
• Conditional rendering in React: In the app, dynamically rendering components based on user inputs presented a challenge. The app required displaying different content and instructions depending on the user's responses to the questionnaire. Ensuring a smooth user experience and accurate guidance while handling various scenarios was crucial. This challenge challenge was addressed through the following steps:
  1. Utilized React's useState hook to manage the current question and user progress within the questionnaire.
  2. Created a structured questionData array containing questions, answer options, and associated navigation logic.
  3. Implemented a function to handle user answers and dynamically update the current question based on the selected answer's nextQuestion reference.
  4. Ensured that user responses trigger smooth transitions to the next relevant question, enabling users to progress naturally through the questionnaire, and to jump back any number of steps if they wanted.

Technologies used:

Back to the overview