A React app that uses React-Hooks to display eBird RESTful API data for a new birder!
Home Page: https://bigbirds.vercel.app/
🔭 I’m currently working on BigBirds
🌱 I’m currently learning PWAs & React Native
👯 I’m looking to collaborate on FaceIt
🤝 I’m looking for help with PenPosts
👨💻 All of my projects are available on GitHub
💬 Ask me about React, Router, SASS/SCSS, Cypress, Chai/Mocha
📫 How to reach me [email protected]
📄 Know about my experiences through my resume
⚡ Fun fact I've seen 197 species of birds.
As a dev, I want to download propTypes so that I can add them to my components.
How will we know that the user story is complete?
As a dev, when I put in a false data types in a variable, I will see a helpful error in my console telling me that it was expecting an array of objects rather than an array of numbers.
As a user, I want to click the top 100 button so that I can see a checklist of possible birds.
How will we know that the user story is complete?
As a sighted user, when I click top 100 I see a list of top 100 birds in the area. I am able to click the check marks. Upon refresh, the check mark doesn't persist.
As a user, I want to click the sightings button so that I can know what birds I've seen.
How will we know that the user story is complete?
When I click the sightings button on the nav bar, I will be take to a list of birds with dates that I spotted the bird on.
As a dev, I want to use cypress so that I can test parts of the homepage.
How will we know that the user story is complete?
As a dev, in run npm run cypress in the console and am able to see that all the tests pass as they go through the static homepage.
As a dev, I want to apply cypress testing so that I can ensure user flow from home to top 100 and then home to personal sightings is functioning as expected.
How will we know that the user story is complete?
As a dev, when I apply fixtures and sub api calls to test this user flow, all my related tests will pass.
As a user, I want to go to the home page so that I can see a static view.
How will we know that the user story is complete?
As a sighted user, when I visit the home page, I will see a header, a navigation bar, and a bird yet seen highlight. When I try to click on one of the nav buttons, nothing happens. When I try to click a bird yet seen, nothing happens.
As a dev, I want to apply cypress so that I can test user flow of adding a newly sighted bird.
How will we know that the user story is complete?
As a dev, when I run cypress tests to check the user flow of adding a new bird to the seen list all test should pass.
As a user, I want to go to the homepage so that I can see a new bird that I haven't seen yet.
How will we know that the user story is complete?
As a user, if I navigate home or to another list and then back home will see a new highlight bird based on birds that I haven't seen yet.
As a user, I want to check off a bird on the top list so that I can go to my seen list and see it's been updated.
How will we know that the user story is complete?
As a user, when I check off a new bird, I can navigate to my seen page and see that the new bird has been added to my list.
As a dev, I want to ensure on refresh that a user never sees an unfriendly error.
How will we know that the user story is complete?
As a user, when I click refresh several times on the homepage, I am either greeted with an error message of a cute owl or I see a newly randomized bird.
As a dev, I want to refactor localStorage so that I can create a concentrated file and maintain a solid data model.
How will we know that the user story is complete?
As a dev, I will see a separate file that's being imported whenever a call to localStorage needs to occur.
As a user, I want to see a loading message so that I can know the site isn't broken .
How will we know that the user story is complete?
As a user, when I navigate home, I see a loading message asking me to "please wait".
As a dev, I want to apply SASS so that I can utilize variables and mixins to minimize redundancy in styling.
How will we know that the user story is complete?
As a dev, when I open the project, I can see in the file structure sass files and partial files. I see that inside of component files, sass variables and mixins are being imported and applied.
As a user, I want to visit the site on my desktop.
How will we know that the user story is complete?
As a sighted user visiting the site on the desktop, I will easily navigate between different spaces and have a properly adjusted images and fontsizes.
As a user, I want to go to the homepage so that I can see a new bird that I haven't seen yet.
How will we know that the user story is complete?
As a user, if I navigate home or to another list and then back home will see a new highlight bird based on birds that I haven't seen yet.
As a dev, I want to open App so that I can see that Router is being applied to the home page .
How will we know that the user story is complete?
As a user, I see in the url that it changes to localhost:3000/home
As a dev, I want to open this repo on my local so that I can easily navigate through the file structure.
How will we know that the user story is complete?
As a dev, I will be able to open and understand the components of this project and their relation to one another with clear naming processes.
As a user, I want to click on a guess that bird so that I can see if my guest is right or not.
How will we know that the user story is complete?
As a sighted user, I can click on the "Guess that Bird" image and be taken to a detailed version about this bird.
As a user, I want to see images so that I can know what the bird looks like.
How will we know that the user story is complete?
As a dev, I will see in the data folder a file with an array of objects that contain two properties: img url & bird code.
As a user, when I go to the details page or when I am on the highlight page, I will see an image of the appropriate bird.
As a dev, I want to mock sighting data so that I can simulate app behavior if a user was able to interact with the app & post data to the server.
How will we know that the user story is complete?
As a dev, I will see a data folder with a file containing mocked "sighting" data of the same format as the API data.
As a user, I will see a list of birds that I've seen and on what date.
As a user, I want to see an about page so that I can learn more about the developers of the app.
How will we know that the user story is complete?
As a sighted user, I can click the "About" page and read about the developer, their motivation, see their lifelist, and links to other social media sites if I want to get in touch.
As a user, I want to sign in to my account so that I can see my personal data .
How will we know that the user story is complete?
As a sighted user, when I sign in to my account, I can view my specific life list.
As a user, I want to see an error message so that I can know when there's been a problem.
How will we know that the user story is complete?
As a user, when I go to the home page and there's been a problem, I will see an error message.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
