Donezo — SaaS Task Management Dashboard

A beautifully crafted, modern task management application built with Vanilla JS/HTML/CSS on the frontend and Node.js/Express/PostgreSQL on the backend.

Designed with a warm pastel aesthetic, it features secure local authentication, infinite carousel animations, and a responsive 3-column dashboard layout.

🚀 Features

Authenticated & Secure

• Local Authentication: Custom-built auth system using bcrypt (password hashing) and jsonwebtoken (JWT).
• Data Isolation: Users only see their own tasks.
• Secure API: Middleware protection for all data endpoints.

Modern UI/UX

• SaaS Dashboard Layout: 3-column design (Sidebar, Main Content, Right Panel) optimized for productivity.
• Warm Pastel Theme: Curated color palette (#F6F3EE bg, #F4B740 accent) for a premium feel.
• Interactive Components:
  • Infinite "About" carousel on the landing page.
  • Animated stats cards.
  • Floating auth panels.
  • Smooth transitions and hover effects.

Core Functionality

• Quick Capture: Instantly add tasks with due dates.
• Task Management: Filter by status (All, Pending, Completed).
• Calendar View: Visual monthly calendar with task indicators.
• Stats Overview: Real-time tracking of pending, completed, and total tasks.
• Search: Fast client-side filtering of task lists.

🛠 Tech Stack

• Frontend: HTML5, CSS3 (Variables, Flexbox/Grid), Vanilla JavaScript (No frameworks).
• Backend: Node.js, Express.js.
• Database: PostgreSQL (via pg library).
• Security: bcrypt, jsonwebtoken, dotenv.
• Icons: FontAwesome 6, Google Fonts (Inter).

📂 Project Structure

├── client/                 # Frontend assets
│   ├── index.html          # Landing Page (Marketing + Auth)
│   ├── dashboard.html      # Main Dashboard
│   ├── tasks.html          # Task List View
│   ├── calendar.html       # Calendar View
│   ├── settings.html       # User Settings
│   ├── style.css           # Global SaaS Theme
│   ├── script.js           # Shared Logic (Auth, API, UI Helpers)
│   ├── carousel.js         # Landing Page Animation Logic
│   └── carousel.css        # Carousel Specific Styles
│
├── server/                 # Backend API
│   ├── index.js            # Express Server Entry
│   ├── routes.js           # API Endpoints (Auth & Data)
│   ├── middleware.js       # JWT Verification
│   └── database.js         # Postgres Connection & Schema
│
└── .env                    # Environment Variables (DB_URL, JWT_SECRET)

⚡ Getting Started

Prerequisites

• Node.js (v14+)
• PostgreSQL installed and running

Installation

1. Clone the repository

   git clone https://github.com/nawazks72/To-Do-List.git
   cd To-Do-List

2. Install dependencies

   npm install

3. Configure Environment Create a .env file in the root directory:

   DATABASE_URL=postgresql://user:password@localhost:5432/your_db_name
   JWT_SECRET=your_super_secure_secret_key

   Note: If you don't set a JWT_SECRET, the app will use a default insecure key (for dev only).

4. Start the Server

   npm start

   The database tables (users, tasks) will be created automatically on the first run.

5. Open in Browser Visit http://localhost:3000

📖 Usage Guide

1. Sign Up: Create an account on the landing page.
2. Dashboard: View your stats and add your first task.
3. Manage: Mark tasks as done, delete them, or view them on the calendar.
4. Logout: Determine when you're done via the sidebar footer.

📄 License

This project is open source and available under the MIT License.