React + Firebase Todo App

A todo app built with React.js and Firebase that was designed and developed with a strong focus on accessibility and user interaction.

A todo app built with React.js and Firebase that was designed and developed with a strong focus on accessibility and user interaction.

Overview

This app was built to further improve my front-end development skills and to continue learning how to design and develop a modern javascript application made with React.js since I believe that the best way to learn a new skill is by doing.

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 Role

  • UI Design
  • Front-End Development
  • Back-End Development

Tools Used

  • React.js
  • Redux
  • Firebase
  • Figma

Project Type

  • Personal Project

Solution

Demo of using the app with the Voice Over screen reader.
Demo of the main features of the app.

Tech Stack

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.

Frond-End

  • React.js
  • Redux.js
  • Sass
  • Algolia Search
  • react-day-picker
  • downshift.js

Back-End

  • Firebase
  • Firestore
  • Cloud Functions
  • Express.js

Testing

  • React Testing Library
  • Jest

Design

  • Figma
  • Unicons

Hosting

  • Netlify

App features

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.

Projects

Users can organize their tasks into projects to keep track of all the work they need to get done. Each task could belong to a single project or to the default Inbox project that contained any tasks that aren’t part of any project.

Projects feature of the todos app.
Projects feature of the todos app.

Due dates

Users can add due dates to each task using the date picker that also has an integrated time picker to allow them to set the time for when the tasks should be done.

Add due dates feature of the todos app.
Add due dates feature of the todos app.

Add new todos

Users can easily add new todos and assign them to a project or tag them with labels. Each task can also have an optional due date or time.

Add todos and assign them to projects or labels.
Add todos and assign them to projects or labels.

Search todos

Users can find their todos by using the search feature of the app if they don’t remember which project a todo belongs to. Once they select a todo from the dropdown, they will be redirected to the project where the todo is located.

Searching feature of the todos app.
Searching feature of the todos app.

Lessons learned

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 useThunk() or useLogger(), that emulate Redux features. You can see the custom hooks I built for this project in the Github repo.

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.

Finally, I also learned how to work with the cloud services provided by Firebase for authentication, Firestore database integration, and Cloud Functions, which also allowed me to improve my understanding of how to use ES6 async functions, Promises and how the Javascript Event Loop integrates them into the Micro Task queue.