Task Tracker (React + Vite)

Task Tracker is a React/Vite application backed by Firebase Auth + Realtime Database. It gives each authenticated user their own workspace for tasks, projects, meetings, clients, notes, and profile data (including avatars). The UI is responsive with a left sidebar, top navbar, and mobile-friendly pages.

Features

• Email/Google sign-in via Firebase Auth.
• User-scoped data stored under users/{uid} in Firebase Realtime Database (tasks, projects, meetings, clients, notes, profile).
• CRUD flows with filtering/search for tasks, projects, meetings calendar, notes tagging, and client PDF export (jsPDF).
• Profile editing with avatar upload preview and inline apply/save actions.
• Responsive layout with sidebar/nav, mobile cards, and charts (Recharts) on the dashboard.

Tech Stack

• React 19 + Vite 7
• Firebase (Auth, Realtime Database)
• Tailwind CSS 4
• React Router 7
• Recharts, jsPDF, React Icons

Project Structure (key paths)

• src/App.jsx – routing and auth gate
• src/Components/Navbar.jsx, src/Components/Sidebar.jsx, src/Components/Layout.jsx – shell
• Pages: src/Page/TasksPage.jsx, ProjectsPage.jsx, MeetingsPage.jsx, ClientsPage.jsx, NotesPage.jsx, DashboardPage.jsx, ProfilePage.jsx
• Auth: src/Auth/Firebase.js, src/Auth/AuthModel.jsx

Environment Variables

Create a .env file in the project root:

VITE_FIREBASE_API_KEY=your-key
VITE_FIREBASE_AUTH_DOMAIN=your-app.firebaseapp.com
VITE_FIREBASE_DATABASE_URL=https://your-app-default-rtdb.firebaseio.com
VITE_FIREBASE_PROJECT_ID=your-app
VITE_FIREBASE_STORAGE_BUCKET=your-app.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
VITE_FIREBASE_MEASUREMENT_ID=...

Install & Run

pnpm install   # or npm install / yarn install
pnpm dev       # or npm run dev
pnpm build     # or npm run build
pnpm preview   # or npm run preview
pnpm lint      # or npm run lint

Data Model

• All entities live under users/{uid}/... (e.g., users/{uid}/tasks, users/{uid}/clients).
• Profile data also stored at users/{uid} with fields like displayName, photoURL, bio, etc.

Firebase Rules (minimal example)

Adjust to your security needs. Example allowing authenticated users to read/write their own node:

{
	"rules": {
		"users": {
			"$uid": {
				".read": "auth != null && auth.uid == $uid",
				".write": "auth != null && auth.uid == $uid"
			}
		}
	}
}

Development Notes

• Default avatar: users without a photo get a generated fallback.
• Client export uses jsPDF; ensure browser pop-up/downloads are allowed.
• Recharts requires a responsive container; see dashboard for examples.

Deployment

• Run pnpm build (or npm/yarn equivalent) to produce the dist/ bundle.
• Host the static output on any static host (Firebase Hosting, Netlify, Vercel, etc.).