Todo App using React + Tailwind + Framer Motion + Firebase + Firestore

This is my second solution for this challenge. I have added User authentication using Firebase Auth and data storage using Firestore.

This challenge helped me learn a lot about NoSQL/Document databases in general and Firestore in particular.

For example, I wrote and executed each database query separately at first which caused lag. then I grouped multiple queries using writeBatch() that allows multiple queries to run in only one db request, which reduced the lag. and then I learned about Latency Compensation and Optimistic Rendering using onSnapshot() which keeps a copy of the database state in memory and updates it instantly before data is sent to the database and reverts the change in case of error. this allowed for instant updates and no lag for the end user.

I also learned about anonymous user setup using Firebase Auth and FirebaseUI and upgrading it to a normal user after log-in while keeping the data intact. Also handling auth merge conflict that happens when logging in to an existing account from an anonymous account.

Another challenge was using FirebaseUI with Firebase v9. since FirebaseUI has not been updated to work with Firebase v9, using a compatibility layer is necessary and I encountered some errors related to this. also it took some time to figure out how error handling worked in FirebaseUI.

Edit:

I've refactored the code to use custom hooks for user authentication and database.

Also, I've fixed a bug with auth that prevented login to an existing account. if you had trouble with login before, it should work now.

Note on the bug: when logging in to a new account from an anonymous account, the user becomes null between the transition (anon => null => logged-in). and I was triggering anonymous login when user is null which resulted in an anonymous login even after logging in with email/google...