k-atwhite / backyard-burbs

🪶 M3 - Group Project - Context

Hiya, my name is Kat White. I'm a Front End Engineer with a passion for creating order from chaos and delivering effortless user interfaces.

• 🖇   LinkedIn
• ✍🏼   Medium - Where I write about learning
• 👨‍💻   Front-End Engineering Certification (October 2021)
• 🎓   Bachelor of Arts in History from DePauw University

backyard-burbs's Issues

NO DUPLICATE FAVS!

5. USER STORY: As a user, when I click the "My Birds" button, I am directed to a page containing cards of all the birds I have seen. Each bird card is clickable and will take you to the bird details page.

• My birds button has an icon of a bird / or a list / or binoculars
• My bird reroutes you to a new page called "My Birds"
• This page has cards of all the birds you have seen
• Each card is clickable and will take you to the bird details page

PROPTYPES - CHECKING

All components which receive props implement prop typechecking (proptypes or otherwise)

2. USER STORY: As a user when i choose a state from the drop down menu, and submit, I am directed to a new screen where a list cards with a common bird name and a scientific bard name are visible and scrollable.

• Can select one state from the drop down menu
• After selecting a state and clicking the submit button, the user is taken to a new page with a list of birds seen in that state
• The URL will update to reflect this change
• Each bird card will have the bird's common and scientific name
• The navigation bar will be visible on the page
• The user can scroll down to see all bird cards

USER STORY: As a user, when I select a state and click the submit button, I should see an indicator that data is being loaded.

• When page changes to /birds, should see a loading message before bird cards are populated
• If I choose a new state, the previous state's birds should be removed
• The loading message will appear after choosing a new state

RE-DEPLOY GH PAGES

Kat - SOUND WHEN TOGGLE CLICKS!

Get hand drawn logo

TESTING

• Sydney shows us fixtures
• Map Page
• Bird List
• Bird Details
• My Birds

Team has successfully achieved 90%+ test coverage of all components
All async functionality is stubbed
Tests cover happy & sad path user flows
All user flows are covered

FLORIDA IS MESSED UP

RESPONSIVE DESIGN

5 IMAGES ON BIRD DETAILS PAGE

FINAL CHECK TO REMOVE ALL COMMENTS

CLEAN DATA

Data fetched from API is run through a cleaning function (which is defined in a separate utilities file) before being stored in state

-Can we sort my # Seen in API

Refactor Class Components to use hooks

• Refactor StatePicker to use hooks
• Refactor App to use hooks
• App still functions normally

DEPLOY PAGE

Route to screens

-[ ] Home
-[ ] Map
-[ ] Bird List
-[ ] Bird Detail
-[ ] Seen Birds

3. USER STORY: As a user, when i click a bird card I am directed to a new page containing more information about the chosen bird.

• Bird cards are clickable
• Upon click event, user is routed to new page specific to that bird
• Each bird has a specific URL
• Bird details page has scientific name
• Bird details page has common name
• Bird details page has a button saying "I SEE IT" with an icon of an eyeball
• "I SEE IT!" Button is clickable
• Nav Bar is visible with HOME button
• A "Home" Button is present that will take the user back to the home page

README

• cite Becca
• gif
• future additions
• README concisely communicates the team’s individual and joint learning goals, the evolution of the project, and team member reflections while using good formatting to enhance readability
• README links to all user GitHub profiles and any applicable repos/deployed sites

1. USER STORY: As a user when I visit the app I see a drop down box with all US states.

• Visit localhost 3000
• See drop down of 50 states
• Click drop down to show all 50 state options
• Use mouse to click an option

ERROR HANDLING FOR - if you try to click list of birds before choosing state

Fetch eBird API

-[ ] common name
-[ ] scientific name
-[ ] region

CSS SPIT SHINE

NO CONSOLE ERRORS OR WARNINGS

Fetch images from Flickr API for Bird cards

• Create fetch call to retrieve images from Flickr API
• Create function to generate URL from Flickr response data
• Implement URLs to render images for each Bird card

ERROR HANDLING

• FOR FETCH CALLS

4. USER STORY: As a user, when I click the "I see it!" Button, the specific bird I have clicked is added to the "My Birds" list.

• Specific bird name is added to the "my birds" list
• Can see all bird names in "my bird list"
• can see home button

US MAP - STATEPICKER

PLAN FOR CODE FAIR

-Memory Leak Fix
-Two APIs