Taskmate: Your Awesome To-Do List

Brief Description

Taskmate is a friendly and efficient to-do list web application designed to help you easily manage your daily tasks. With its clean and intuitive interface, you can add new tasks, set their priorities, mark them as complete, delete them, and view your tasks sorted by priority or name. Stay organized and productive with Taskmate!

Features

• Add and View Tasks: Quickly add new tasks with a name and priority, and see them instantly reflected in your list.

• Delete a Task: Easily remove tasks you no longer need.

• Complete a Task: Mark tasks as complete or incomplete with a simple checkbox.

• Set a Priority: Assign "High," "Medium," or "Low" priority to your tasks.

• Sort Tasks: View your tasks sorted by priority (High to Low) or alphabetically by name.

• Task Summary: Keep track of your progress with real-time counts of total and completed tasks.

Tech Stack

• Frontend & Backend Framework: Next.js 15 (App Router, Server Components, Server Actions)

• UI Components: shadcn/ui

• Styling: Tailwind CSS

• Database: SQLite

• SQLite Driver: better-sqlite3

How to Run

Run the development server:

npm install
npm run dev

Project Structure (Key Files)

• app/page.tsx: The main page component (Server Component) that fetches tasks and renders the primary UI.

• app/layout.tsx: The root layout for the Next.js application, including metadata and global styles.

• app/globals.css: Global CSS file, primarily for Tailwind CSS directives.

• lib/db.ts: Initializes the SQLite database connection and defines the tasks table schema.

• lib/actions.ts: Contains Next.js Server Actions for all CRUD operations (add, delete, toggle completion, update priority) and data fetching (getTasks).

• components/form/task-form.tsx: Client Component for adding new tasks.

• components/task/task-item.tsx: Client Component for displaying and interacting with individual tasks.

• components/task/task-list.tsx: Client Component that manages and displays the list of tasks, including sorting logic.

• components/task/task-summary.tsx: Client Component for showing total and completed task counts.

• components/ui: All shadcn/ui components.