A modern smart task management web app built with React and using Firebase. This web app helps users organize tasks, track progress, manage priorities, and stay on top of their tasks.
- Google Authentication
- Secure user-based task storage
- Real time firestore database storage and sync
- Task creation, editing, deletion, and completion
- Task completion progress tracking
- Progress Dashboard
- Search and filtering system
- Overdue, due today, and completed views
- Due date management
- Easy mass deletion of completed tasks
- Auto completed task cleanup after 24 hrs
- Mobile-friendly responsive UI
- Persistent login sessions
- React
- Javascript
- CSS
- Firebase authentication
- Cloud firestore storage
- Vercel
Each authenticated user has their own Firestore task collection.
Features include:
- Real-time listeners using Firestore
onSnapshot - Persistent authentication sessions
- Optimized rendering using React hooks
- Automatic task cleanup system for completed tasks
One of the biggest challenges was handling Google authentication on mobile browsers. Standard popup authentication was unreliable on some devices, so the authentication flow was redesigned to dynamically switch between popup and redirect-based login depending on device type.
Users were briefly seeing the login screen during page refreshes because authentication state was loading asynchronously. This was solved by implementing proper loading state management with Firebase onAuthStateChanged and persistent browser sessions.
Initially, task data access rules needed to be redesigned to properly isolate user data. Firestore rules were updated so authenticated users can only access their own task collections.
The app uses Firestore snapshot listeners to keep task data synchronized instantly across sessions without manual refreshes. This required careful React state management to avoid unnecessary renders and stale UI state.
The production deployment required debugging across desktop Chrome, mobile Chrome, and Safari. Mobile authentication behavior differed significantly between browsers, requiring extensive testing using Vercel preview deployments before production rollout.
Implementing combined filtering, searching, sorting, overdue detection, and completion grouping required optimizing derived task state using useMemo to keep rendering performant as task complexity increased.
- Node.js and npm
- Firebase project with Firestore enabled (For storage)
- Google OAuth credentials for authentication
- Firebase configuration keys
npm installCreate an .env file in your project root and add:
REACT_APP_FIREBASE_API_KEY=your_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_MEASUREMENT_ID=your_measurement_id
npm startThe app would then run locally at http://localhost:3000
npm run build- Firestore security rules are configured so users can only access their own task data.
- Authentication persistence keeps users signed in across page refreshes and browser restarts.
- Mobile browsers may automatically switch from popup authentication to redirect authentication due to browser security restrictions.
- Tasks update in real time using Firestore snapshot listeners without requiring manual refreshes.
- Environment variables are required for Firebase configuration and should never be committed publicly.