TDLA

A task management web app for teams. Built with React and Firebase.

Live: tdla-9f54f.web.app

Features

• Email/password authentication
• Tasks with status, priority, due dates, and assignees
• Projects to organize tasks by team or initiative
• Search and filter by status, project, and priority
• Dashboard with at-a-glance stats and upcoming work
• Completion stats with status and priority breakdowns
• Real-time sync across devices
• Per-user data isolation enforced by Firestore security rules

Tech stack

• React 19 with Vite
• Firebase Auth for sign-in
• Cloud Firestore for live data
• Firebase Hosting for deployment
• Plain CSS with custom design system (no UI library)

Run locally

npm install
npm run dev

The dev server runs at http://localhost:5173. It talks to the live Firestore instance, so any changes you make are real.

Build for production

npm run build

Outputs to dist/.

Deploy

npx firebase deploy

Pushes dist/ to Firebase Hosting and firestore.rules to Firestore.

Project structure

src/
├── App.jsx              # Routes between landing, auth, and app shell
├── firebase.js          # Firebase init
├── firestore.js         # Firestore CRUD helpers
├── data.js              # Shared constants and helpers
├── hooks/
│   ├── useAuth.js       # Current user
│   └── useCollection.js # Live Firestore collection
└── components/
    ├── Landing.jsx
    ├── Auth.jsx
    ├── AppShell.jsx
    ├── Sidebar.jsx
    ├── Dashboard.jsx
    ├── Tasks.jsx
    ├── TaskCard.jsx
    ├── TaskModal.jsx
    ├── Projects.jsx
    ├── ProjectModal.jsx
    ├── Stats.jsx
    ├── DonutChart.jsx
    └── Icons.jsx

License

MIT