/australian-bird-watchers-society

Primary LanguageHTML

Australian Bird Watchers' Society

Live demo

A site for a fictitious government agency for bird watchers to report and track sightings of various bird species across Australia.

Tools used

  • HTML
  • Sass
  • JavaScript (ES2016)
  • React.js FOR NO REASON
  • Webpack
  • Autoprefixer via PostCSS plugin

Installation and usage instructions

npm install
npm run build
# or use npm run dev for live-reloading
Start local server in project root
Open index.html in browser

Approach taken

  • Ideation
  • Write project tasks and user stories
  • Draw wireframes
  • Build site
  • CSS written with a mobile-first approach in mind

Difficulties faced

  • Decided to go for a Vanilla JS implementation - rolled out my own modal and multi-step wizard components
  • Trying to manage different layouts across media queries when using a checkbox hack for a dropdown is hard
  • Vertically centering things is hard
  • CSS is hard
  • Design is hard
  • Writing content that makes sense is hard
  • Writing anything while sleep-deprived is hard

Future updates

  • Add auto-complete textfield containing names for various bird species
  • Add back end to track bird sightings
  • Add filterable heatmap for bird sightings
  • Allow user to select bird sighting from a map
  • Improve UX
  • Improve mobile experience

Why?

I've always wanted an excuse to have a website filled with bird pics