herpetology.pro is a website designed to teach people to identify reptiles and amphibians in their area. It proves two modes, competivie and learning. In competivie mode you compete on the scoreboard with other users on the accuracy of your IDs. In learning mode you see a smaller subset of species at a time and new species are added slowly as you master them.
The website is a react-rails app, meaning a react front-end with serve side render from rails when appropriate. Rails serves all the json needed leveraging rail’s excellent model system but leaves the front end to react.
Here are a fun components used in the site:
Google sign in
Learning component stores data to localStorage allowing the user to pickup where they left off later. (See progress bars)
Fancy freakin menus
Interactive reports save screen space by not showing all reporting options right away. Reports are used to correct incorrectly tagged images.
- Real time interactive search
- Persistent settings (posted to server)