TaskSphere // Modern Task Dashboard

TaskSphere is a premium, full-stack, responsive To-Do dashboard application featuring a modern glassmorphism design, real-time statistics, search, filtering, priority flags, and a dark/light mode toggle.

It is built with a clean client-server architecture: a Node.js/Express backend providing a RESTful API with file-based JSON persistence, and a Vanilla HTML/CSS/JS frontend leveraging modern UI/UX design paradigms.

---

✨ Features

• Glassmorphism Design: A beautiful, responsive interface utilizing backdrop blurs, harmonious color gradients, micro-animations, and ambient background glow blobs.
• Dark/Light Mode: Toggle easily between premium dark and light modes with seamless transitions.
• Analytics & Real-time Stats: Live counters tracking Total, Pending, and Completed tasks with dynamic percentage indicators.
• Task Management (CRUD):
  • Create: Add tasks with a title, description, priority flag (Low, Medium, High), and due date.
  • Read: Instantly list and view details of all tasks.
  • Update: Complete tasks with checkboxes or edit title/description/priority/due date in a dynamic modal.
  • Delete: Remove tasks with confirmation.
• Search, Filters & Sorting:
  • Search by task titles and descriptions.
  • Filter tasks using tabs (All, Pending, Completed).
  • Sort tasks dynamically by Newest First, Oldest First, Due Date, or Priority level.
• Interactive UX Polishing:
  • Smooth toast notifications for all CRUD operations.
  • Modern skeleton loading state during API calls.
  • Dynamic empty state visual when no tasks match criteria.
• Server-Side Persistence: File-based local database stored automatically inside backend/data/tasks.json.

---

📂 Project Structure

codealpha_task2/
├── backend/
│   ├── controllers/
│   │   └── taskController.js   # HTTP Request controller handlers
│   ├── data/
│   │   └── tasks.json          # File-based database (automatically created)
│   ├── middleware/
│   │   └── errorHandler.js     # Express global error handler
│   ├── models/
│   │   └── taskModel.js        # File system CRUD database operations
│   ├── routes/
│   │   └── taskRoutes.js       # Router table mapping endpoints to controllers
│   ├── app.js                  # App config, CORS, Static middleware setup
│   ├── server.js               # Entry point of Node server
│   ├── package.json            # Backend dependencies
│   └── package-lock.json
├── frontend/
│   ├── assets/
│   │   ├── css/
│   │   │   └── styles.css      # Core premium design styling
│   │   └── js/
│   │       ├── api.js          # REST Client API fetch wrappers
│   │       ├── ui.js           # UI updates, rendering engine, event controllers
│   │       └── app.js          # App bootstrapper and core orchestration logic
│   └── index.html              # HTML structure with semantic elements
├── .gitignore                  # Git untracked pattern lists
├── package.json                # Project root runner commands
└── package-lock.json

---

🛠️ Tech Stack

• Backend: Node.js, Express.js
• Frontend: Vanilla HTML5, CSS3, ES6 JavaScript
• Icons & Fonts: Lucide Icons, Google Fonts (Outfit & Inter)
• Database: Local JSON File Storage

---

🚀 Getting Started

Prerequisites

Make sure you have Node.js installed (v16.0.0 or higher recommended).

Installation

1. Clone the repository:

   git clone https://github.com/Haripriya-clou/codealpha_task2.git
   cd codealpha_task2

2. Install dependencies for the project root and backend:

   npm install
   cd backend
   npm install
   cd ..

Running the Application

From the root directory, start the server using npm:

• For Production Mode:

  npm start

• For Development Mode (with hot-reload/nodemon):

  npm run dev

Once started, open your browser and navigate to: 👉 http://localhost:5000

---

🌐 API Reference

All requests and responses use JSON format.

Method	Endpoint	Description
GET	/api/tasks	Retrieve all tasks
GET	/api/tasks/:id	Retrieve a specific task by ID
POST	/api/tasks	Create a new task
PUT	/api/tasks/:id	Update an existing task
DELETE	/api/tasks/:id	Delete a task by ID