{"id":30815038,"url":"https://github.com/ag-jimmy/to-do-task","last_synced_at":"2026-05-07T13:04:48.459Z","repository":{"id":312855245,"uuid":"1048511179","full_name":"AG-Jimmy/to-do-task","owner":"AG-Jimmy","description":"This is a lightweight Kanban to‑do app focused on speed and clarity,Purpose: organize tasks into simple columns and move them with drag and drop,Key features: create/edit/delete tasks, search, pagination, drag \u0026 drop with smooth animations,smart container + dumb components","archived":false,"fork":false,"pushed_at":"2025-09-02T12:16:07.000Z","size":338,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-02T13:08:56.205Z","etag":null,"topics":["kanban-board","motion","nextjs","redux-toolkit","tanstack-react-query","typescript"],"latest_commit_sha":null,"homepage":"https://to-do-task-nine-amber.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AG-Jimmy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-01T14:58:16.000Z","updated_at":"2025-09-02T12:16:10.000Z","dependencies_parsed_at":"2025-09-02T13:08:59.623Z","dependency_job_id":"fa1ef7bb-246e-4fa2-b41a-a711297ac121","html_url":"https://github.com/AG-Jimmy/to-do-task","commit_stats":null,"previous_names":["ag-jimmy/to-do-task"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/AG-Jimmy/to-do-task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AG-Jimmy%2Fto-do-task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AG-Jimmy%2Fto-do-task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AG-Jimmy%2Fto-do-task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AG-Jimmy%2Fto-do-task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AG-Jimmy","download_url":"https://codeload.github.com/AG-Jimmy/to-do-task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AG-Jimmy%2Fto-do-task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273874160,"owners_count":25183368,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kanban-board","motion","nextjs","redux-toolkit","tanstack-react-query","typescript"],"created_at":"2025-09-06T08:03:51.615Z","updated_at":"2026-05-07T13:04:48.361Z","avatar_url":"https://github.com/AG-Jimmy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Kanban To‑Do App\n\nA simple Kanban-style to‑do board built with Next.js App Router, featuring columns, pagination, search, CRUD, and HTML5 drag‑and‑drop (cross‑column moves + intra‑column reordering). Data is served locally via JSON Server.\n\n### Features\n\n- Drag \u0026 drop tasks across columns (Backlog, In Progress, Review, Done)\n- Create, edit, delete tasks\n- Keyword search across title/description\n- Pagination per column\n- Optimistic, reactive UI using React Query\n\n### Tech Stack (What and Why)\n\n- Next.js (App Router): Modern React framework with file‑system routing and great DX\n- React 19: UI layer\n- Bootstrap 5: Quick, responsive styling\n- React Query: Server‑state management (fetch/mutations, cache, invalidation) instead of Redux for remote data\n- Redux Toolkit: UI‑state only (search term, modal open, form fields) to keep presentational components dumb\n- Axios: Simple HTTP client\n- JSON Server: Schemaless local API for rapid prototyping\n- Framer Motion: Smooth enter/exit and reordering animations for task cards\n\n### Project Structure (Key parts)\n\n- `src/app/to-do/page.tsx`: Smart container; wires data, UI state, and presentational components\n- `src/app/to-do/components/*`: Dumb components (`TaskCard`, `KanbanColumn`, `TaskFormModal`, `SearchBar`)\n- `src/app/to-do/hooks/useTasks.ts`: React Query hooks for CRUD\n- `src/store/*`: Redux store for UI state\n- `src/types/index.ts`: Shared types\n\n---\n\n## Setup\n\n### 1) Install dependencies\n\n```bash\nnpm install\n```\n\n### 2) Start JSON Server (API)\n\nBy default, the app expects the API at `http://localhost:4000`.\n\n```bash\nnpx json-server --watch db.json --port 4000\n```\n\nOptional: configure base URL via env\n\n```bash\nexport NEXT_PUBLIC_API_BASE_URL=http://localhost:4000\n```\n\n### 3) Start the app\n\n```bash\nnpm run dev\n```\n\nOpen `http://localhost:3000`.\n\n---\n\n## How Drag \u0026 Drop Works\n\n- Start drag from a `TaskCard`; we set the task id and source column on `dataTransfer`.\n- Drop on a column; we `PATCH /tasks/:id` with the new `column` and invalidate the cache.\n\n---\n\n## Screenshots\n\n![Card](public/screenshots/card.png)\n![Kanban](public/screenshots/kanban.png)\n![Form](public/screenshots/form.png)\n\n---\n\n## Design Choices\n\n- Smart vs Dumb Components: `page.tsx` manages state and passes props; components render only UI and fire callbacks.\n- React Query for server state: better caching/invalidations for CRUD and fewer custom reducers.\n- Redux for UI state: clearer intent actions (`setOpen`, `setTitle`, `resetForm`) and predictable updates.\n- HTML5 DnD: native, dependency‑free drag behavior suitable for cards/columns.\n\n### Feature‑based Organization\n\n- The to‑do feature lives under `src/app/to-do/` and encapsulates its UI (`components/`), hooks (`hooks/`), and page.\n- This feature‑first structure keeps concerns close together, making it easier to change or add functionality without touching unrelated areas.\n- Benefits:\n  - Easier maintenance and onboarding (everything for a feature is co‑located)\n  - Safer refactors (local blast radius)\n  - Clear boundaries between features and shared primitives\n\n---\n\n## Scripts\n\n- `npm run dev`: start Next.js dev server\n- `npm run build`: production build\n- `npm run start`: start production server\n- `npx json-server --watch db.json --port 4000`: start local API\n\n---\n\n## API (JSON Server)\n\n- `GET /tasks`: list tasks\n- `POST /tasks`: create task\n- `PATCH /tasks/:id`: update task (title, description, column, order)\n- `DELETE /tasks/:id`: delete task\n\nNote: JSON Server saves any fields you send. There’s no schema validation.\n\n---\n\n## Animations (Framer Motion)\n\n- We use `AnimatePresence` and `motion.div` with `layout` to animate cards when they enter, exit, or reorder.\n- Transitions are short and subtle for responsiveness: `duration: 0.18`, `ease: \"easeOut\"`.\n- You can tweak timing/easing in `src/app/to-do/components/KanbanColumn.tsx`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fag-jimmy%2Fto-do-task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fag-jimmy%2Fto-do-task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fag-jimmy%2Fto-do-task/lists"}