Plant-Do

Project overview

Plant-Do is a task management tool inspired by Bullet Journaling to help our overwhelmed “monkey brains” focus on today. I built this app to apply what I learned from The Complete React Developer Course on Udemy and extend my ability to use React Hooks and React Context API

Goals

  • Leverage React Hooks to build an entire app as the Udemy course briefly covered Hooks
  • Make a touch-friendly app responsive app
  • Use SVGs throughout the app for UI; the Udemy course did not cover this

Key lessons learned

  • How to leverage the Context API for authentication with Firebase Authentication and app states
  • Using requestAnimationFrame() to update UI for swipe interactions instead of using state–this avoids unnecessary component re-rendering
  • When and why certain event handlers should be debounced or throttled

Key technologies used

  • React 16.13 (with Hooks), Firebase SDK, and third-party component react-swipeable
  • Firebase Authentication and Real Time Database
  • Hosted on Netlify