Firebase Todo

A real-time task-management application built with React, Firebase Authentication, Cloud Firestore, and Cloud Storage.

Firebase Todo is a full-featured task manager inspired by modern productivity applications. It combines protected React routes with Firebase services to provide authenticated users with synchronized lists, detailed tasks, reminders, subtasks, notes, and file attachments.

View the live application · Watch the demo

Features

• Email and password registration, sign-in, and sign-out
• Protected application routes for authenticated users
• Real-time task and list synchronization with Cloud Firestore
• Inbox, My Day, Important, Planned, All, and custom lists
• Task creation, completion, deletion, and importance controls
• Subtasks, notes, due dates, reminders, and repeat options
• Task search and multiple sorting strategies
• File attachments backed by Cloud Storage (up to 5 MB)
• Collapsible completed-task groups
• Printable task-list layout
• Responsive interface for desktop and smaller screens

Tech Stack

Area	Technologies
Frontend	React 18, JavaScript, CSS
Routing	React Router 6
Authentication	Firebase Authentication
Database	Cloud Firestore with real-time listeners
File storage	Firebase Cloud Storage
Date handling	React Datepicker
Printing	React to Print
Build tooling	Create React App, React Scripts

Getting Started

Prerequisites

• Node.js 16 or later
• npm 8 or later
• A Firebase project with Authentication, Firestore, and Storage enabled

Installation

git clone https://github.com/aboumelon/todo-firebase.git
cd todo-firebase
npm install
npm start

Open http://localhost:3000 in your browser.

Firebase Setup

1. Create a project in the Firebase Console.
2. Register a web application.
3. Enable Email/Password under Authentication providers.
4. Create a Cloud Firestore database.
5. Enable Cloud Storage.
6. Replace the configuration object in src/firebase/firebase.config.js with your web app configuration.
7. Add Firestore and Storage security rules that restrict each user's data to their authenticated account before deploying.

Firebase web configuration identifies a project but is not a substitute for access control. Production security must be enforced with Authentication, Firestore rules, and Storage rules.

Available Scripts

Command	Description
npm start	Run the development server
npm test	Launch the test runner in watch mode
npm run build	Create an optimized production build
npm run eject	Expose the Create React App configuration (irreversible)

Project Structure

src/
├── assets/             # Icons, fonts, and global visual assets
├── components/         # Tasks, lists, sidebar, details, and shared UI
├── context/            # User, task, list, color, and UI state providers
├── firebase/           # Firebase application configuration
├── hooks/              # Authentication and Firestore data hooks
├── pages/              # Auth, main task view, search, and task details
├── utils/              # Date and task-list utilities
└── App.js               # Route and access-control configuration

Data Model

The application stores user-scoped task and list documents in Firestore. Tasks can contain list membership, completion and importance flags, steps, notes, scheduling metadata, and an optional Cloud Storage attachment. Snapshot listeners keep the interface synchronized with remote changes.

Deployment

Create a production bundle with:

npm run build

The included public/_redirects file enables client-side routing when deploying to Netlify. Equivalent fallback routing must be configured on other static hosts.

License

This project is intended for portfolio and educational use.