Taskabana

A simple Kanban board UI powered by your Google Tasks.
Visualize, manage, and update your Google Task lists in a modern kanban-style workflow.

---

✨ Features

• 🔑 Google OAuth login — secure authentication with your Google account.
• 📋 Google Tasks integration — fetches your real task lists directly from Google Tasks API.
• 🗂️ Kanban board view — drag & drop tasks between columns.
• ➕ Create, update, complete, and delete tasks — everything stays synced with Google.
• 📱 Responsive design — works nicely on desktop and mobile.
• 💾 Remember your last chosen Google Task list
• 🔎 Search & Filters:

Search & Filters

Type into the search bar at the top of the board to instantly narrow down visible tasks.

How it works:

• Free text:
  meeting design matches tasks where both “meeting” AND “design” appear in the title or notes (notes are cleaned of HTML first).
• Tags:
  tag:#icebucket or tag:icebucket matches tasks whose first paragraph is #icebucket (your existing tagging convention).
• Due filters:
  • due:today
  • due:tomorrow
  • due:week
  • overdue
• Status:
  • status:completed
  • -status:completed (exclude done items)

Combinations work too, e.g.:

tag:#icebucket overdue
design due:week -status:completed

---

🚀 Installation

1. Clone the repo

git clone https://github.com/<your-username>/taskabana.git
cd taskabana

2. Install dependencies

For both client and server:

# client
cd client
npm install

# server
cd ../server
npm install

3. Setup Google OAuth

• Create a project in Google Cloud Console.
• Enable the Google Tasks API.
• Create OAuth credentials for a Web App.
• Add redirect URIs (e.g., http://localhost:4000/auth/google/callback).
• Copy your CLIENT_ID and CLIENT_SECRET.

Update server/.env:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
SESSION_SECRET=your-random-secret
CALLBACK_URL=http://localhost:4000/auth/google/callback

4. Run the app

Open two terminals:

# Terminal 1: Server
cd server
npm run dev

# Terminal 2: Client
cd client
npm run dev

Now open: http://localhost:5173 (or whatever Vite shows).

---

🖼️ Screenshots

Login

Kanban board

Task list picker

---

🧩 Tech Stack

• Frontend: React + Vite + TailwindCSS
• Backend: Node.js + Express
• Auth: Google OAuth2
• Data: Google Tasks API
• State Persistence: LocalStorage (per-user task list memory)

---

🔄 Development Workflow

• PRs welcome! Fork the repo, create a branch, and open a pull request.
• Commit convention:
  • feat: new features
  • fix: bug fixes
  • chore: infra, deps, config
  • docs: readme/docs updates

---

🛠️ Future Improvements

• Offline mode
• Dark mode
• Task filtering & search
• Multi-column board customization

---

📜 License

MIT © John Nelson