Taskify — Real‑Time Collaborative To‑Do App (Firebase)

Taskify is a minimalist, fast, and collaborative to‑do list web app powered by Firebase. It lets users sign in with Google, add tasks with optional deadlines, and see updates in real time across all connected users.

---

Live Demo

• Deployed on Netlify: taskify-byraj.netlify.app
• Demo GIF:

---

Features

• Google Authentication: Secure sign‑in/sign‑out using Firebase Auth.
• Real‑time Tasks: Add and remove tasks with instant updates via Firebase Realtime Database.
• User Attribution: Each task shows who added it (name + optional avatar).
• Deadlines: Optional per‑task due dates displayed inline.
• Responsive UI: Clean, mobile‑friendly design with subtle theming.
• Routing Guard: Simple auth‑based redirect between wellcome.html and index.html.
• PWA‑ready metadata: Web manifest and icons included.

---

Getting Started

Prerequisites

• Node.js 18+ (for local dev server via Vite)
• A Firebase project with:
  • Firebase Authentication (Google provider enabled)
  • Realtime Database (in your region)

Optional: Firebase Firestore is imported but not used in the current UI.

Installation

# Clone the repository
git clone https://github.com/raj-30/Taskify.git
cd "To do app firebase"

# Install dependencies (Vite for local dev)
npm install

Firebase Setup

1. Create a Firebase project at https://console.firebase.google.com.
2. Enable Authentication → Sign‑in method → Google.
3. Create a Realtime Database and copy the database URL.
4. Update firebaseAuth.js with your config:

// firebaseAuth.js (excerpt)
const firebaseConfig = {
  apiKey: "<YOUR_API_KEY>",
  authDomain: "<YOUR_AUTH_DOMAIN>",
  databaseURL: "<YOUR_DB_URL>",
  projectId: "<YOUR_PROJECT_ID>",
  storageBucket: "<YOUR_STORAGE_BUCKET>",
  messagingSenderId: "<YOUR_SENDER_ID>",
  appId: "<YOUR_APP_ID>"
};

Ensure Google provider is enabled and your authorized domains include your dev/production hosts.

Run Locally

# Start Vite dev server (defaults to http://localhost:5173)
npm run dev

Open the printed local URL. You will be redirected to wellcome.html if logged out; sign in to reach index.html.

Build & Preview

# Production build
npm run build

# Preview the built app
npm run preview

---

Usage

• On wellcome.html, click “Get Started” to sign in with Google.
• On index.html:
  • Enter a task in the input and optionally set a date.
  • Click “Add to cart” or press Enter to add the task.
  • Click a task to remove it.
  • Use “Sign Out” to end your session.

Real‑time updates are handled via onValue listeners on the shoppingList path in the Realtime Database.

---

Project Structure

To do app firebase/
  ├─ index.html                # Authenticated app UI
  ├─ Wellcome.html             # Public landing/sign‑in page
  ├─ index.js                  # App logic: auth, RTDB, UI updates
  ├─ index.css                 # Styling and responsive rules
  ├─ firebaseAuth.js           # Firebase init (App, Auth, Provider)
  ├─ _redirects                # Static host redirects (Netlify‑style)
  ├─ site.webmanifest          # PWA metadata
  ├─ public/
  │   ├─ Assets/imag.gif       # Welcome animation
  │   ├─ favicon‑*.png         # Icons
  │   └─ site.webmanifest      # Duplicate manifest reference (served from /public)
  ├─ package.json              # Vite dev/build scripts
  └─ package‑lock.json

Key modules:

• firebaseAuth.js: Initializes Firebase App and exports auth, googleProvider, signInWithPopup, and app.
• index.js: Imports database and auth helpers, manages sign‑in/out, listens for changes, and renders tasks.
• index.html / Wellcome.html: Wire up the UI and script modules.

---

Technologies Used

• Vanilla JavaScript, HTML5, CSS3
• Firebase Web SDK v9 (Modular): Auth, Realtime Database
• Vite (local development/build tooling)
• Google Fonts (Fredoka)

---

Contributing

Contributions are welcome!

• Issues: Use GitHub Issues to report bugs or propose features. Include reproduction steps and environment details.
• Branches/PRs:
  • Fork the repo and create a feature branch.
  • Follow existing code style (modular Firebase v9, no inline comments for trivial code).
  • Keep commits scoped and descriptive.
  • Open a pull request linking related issues.
• Code of Conduct: Please be respectful and inclusive. If adding a formal CoC, link it here (e.g., Contributor Covenant).

---

Deployment Notes

• The project includes an _redirects file suitable for static hosts (e.g., Netlify). Ensure routes to Wellcome.html and index.html resolve correctly.
• If hosting under a sub‑path, verify manifest/icon paths and authorized domains in Firebase.
• For Firebase Hosting, adjust paths to assets and consider adding rewrites as needed.

---

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this software with attribution. See LICENSE if provided, or treat this notice as the default license.

---

Contact / Support

• Open an issue on the repository with the bug/feature template.
• For general questions, mention the maintainer in a GitHub discussion or issue.

---

Acknowledgments

• Firebase team and docs for the excellent developer experience.
• Icon and font assets from Google Fonts and PWA best practices.
• Inspiration from lightweight, collaborative task apps.