Furthermore, I also wanted to learn how to build a React.js app that was accessible, so accessibility was a top priority during the entire design and development cycle.
My main goal for this project was to learn how to build a modern React.js app, so the obvious choice at the time was to integrate React with Redux for state management. However, I still needed a database and back-end, so I decided to use Firebase since it provided everything I needed for this project: a powerful authentication system, an easy to use database service, and the power of Cloud Functions that allowed me to have any back-end service I needed without having the build a physical server myself.
- Algolia Search
- Cloud Functions
- React Testing Library
The main features of the app are designed to allow users to easily add todos and organize them into projects or to tag them with labels. Therefore, each task can belong to a single project and can have many labels assigned. Users can also add due dates to each task to see which tasks need to be done first.
Since this was my first large project built with React, I started with little
understanding of how it worked but now I can write custom Hooks for state
management, UI interactions, API calls or even custom hooks, such as
useLogger(), that emulate Redux features. You can see the
custom hooks I built for this project in the
I also learned how to work with an advanced state management library like Redux, but I would probably use custom hooks combined with the Context API for my next React projects. If you’d like to see how I used custom hooks and the Context API for state management in a React app, feel free to take a look at the repo of a demo project I made.
Besides that, I also enjoyed working on this project because I could learn how to make a React app accessible so that users could use it with their keyboard. Moreover, I also learned the basics of how to use a screen reader to validate my solutions and to experience first hand what it is like to use a React app with a screen reader.