Smart Task Manager

A full-stack task manager built with React, Node.js, Express, and SQLite. Create tasks with a priority and due date, edit them inline, mark them complete, and delete them. Every change is saved to a local SQLite database through a REST API.

Features

• Add tasks with a title, description, priority (low / medium / high), and optional due date
• Edit tasks inline, toggle them complete, or delete them
• Task summary showing total and completed counts
• Loading, success, and error messages in the UI
• REST API with full CRUD at /api/tasks, plus a health check at /api/health
• Data stored in a local SQLite file (server/data/smart-task-manager.sqlite), created automatically on first run

Tech Stack

Layer	Tools
Frontend	React 19, Vite 7
Backend	Node.js, Express 5, CORS
Database	SQLite via Node's built-in node:sqlite module

Prerequisites

• Node.js 22.5 or newer (the backend uses the built-in node:sqlite module)
• npm

Install Dependencies

From the project root:

npm run install:all

Or install each app separately:

npm --prefix client install
npm --prefix server install

Run The Backend

Start the backend first so the frontend has data to load:

npm run dev:server

The Express API runs at:

http://localhost:3000

Run The Frontend

In a second terminal:

npm run dev:client

The Vite app will usually run at:

http://localhost:5173

The frontend calls http://localhost:3000 by default. To use a different API URL, set VITE_API_BASE_URL in client/.env.local:

VITE_API_BASE_URL=http://localhost:4000

Test The Health Route

Open this URL in a browser:

http://localhost:3000/api/health

Or use curl:

curl http://localhost:3000/api/health

Expected response:

{
  "status": "ok",
  "service": "smart-task-manager-api"
}

Task API Endpoints

Get All Tasks

GET http://localhost:3000/api/tasks

Example curl command:

curl http://localhost:3000/api/tasks

Example response:

{
  "tasks": []
}

Create A Task

POST http://localhost:3000/api/tasks

Example curl command:

curl -X POST http://localhost:3000/api/tasks \
  -H "Content-Type: application/json" \
  -d "{\"title\":\"Plan the database\",\"description\":\"Define the first task schema\",\"priority\":\"high\",\"dueDate\":\"2026-05-01\"}"

Example request body:

{
  "title": "Plan the database",
  "description": "Define the first task schema",
  "priority": "high",
  "dueDate": "2026-05-01"
}

Example response:

{
  "task": {
    "id": 1,
    "title": "Plan the database",
    "description": "Define the first task schema",
    "completed": false,
    "priority": "high",
    "dueDate": "2026-05-01",
    "createdAt": "2026-04-26T12:00:00.000Z",
    "updatedAt": "2026-04-26T12:00:00.000Z"
  }
}

Validation rules:

• title is required.
• priority defaults to medium.
• Allowed priorities are low, medium, and high.

Update A Task

PATCH http://localhost:3000/api/tasks/:id
PUT http://localhost:3000/api/tasks/:id

Example curl command:

curl -X PATCH http://localhost:3000/api/tasks/1 \
  -H "Content-Type: application/json" \
  -d "{\"title\":\"Update the database plan\",\"completed\":true,\"priority\":\"medium\"}"

Example response:

{
  "task": {
    "id": 1,
    "title": "Update the database plan",
    "description": "Define the first task schema",
    "completed": true,
    "priority": "medium",
    "dueDate": "2026-05-01",
    "createdAt": "2026-04-26T12:00:00.000Z",
    "updatedAt": "2026-04-26T12:30:00.000Z"
  }
}

Delete A Task

DELETE http://localhost:3000/api/tasks/:id

Example curl command:

curl -X DELETE http://localhost:3000/api/tasks/1

Example response:

{
  "message": "Task deleted",
  "task": {
    "id": 1,
    "title": "Update the database plan",
    "description": "Define the first task schema",
    "completed": true,
    "priority": "medium",
    "dueDate": "2026-05-01",
    "createdAt": "2026-04-26T12:00:00.000Z",
    "updatedAt": "2026-04-26T12:30:00.000Z"
  }
}

Missing task ids return 404 Not Found.

Project Structure

smart-task-manager/
  client/                     React + Vite frontend
    src/
      api/                    fetch helpers for /api/health and /api/tasks
      components/             TaskForm, TaskItem, TaskList
      styles/                 global.css
      App.jsx                 page layout and task state
      main.jsx                React entry point
    vite.config.js

  server/                     Express backend
    src/
      routes/                 health and task routes
      controllers/            request handling and validation
      db/                     SQLite connection and task queries
      middleware/             error handler
      app.js                  Express app setup
      server.js               starts the server on port 3000
    data/                     SQLite database file (created at runtime, git-ignored)

  package.json                root scripts for installing and running both apps
  README.md

Roadmap

• Project scaffold with a health route
• SQLite task storage
• Full task CRUD API
• React UI connected to the API
• Filtering and search
• User accounts and authentication