🗂️ Task Manager Web Application

Taskly

---

Table of Contents

• About the Project
• Tech Stack
• Features
• Screenshots
• Installation & Setup
• How to Run the Project Locally
• Mocking API
• Sample Mock Endpoints
• Project Structure
• Libraries Used
• Contributing

---

About the Project

Taskly is a modern productivity web application built to help users track, manage, and analyze tasks efficiently.
Designed with a clean dark-themed interface, the app offers robust features including priority management, deadlines, analytics, and user authentication.

This project showcases best practices in React development, Redux state management, modern UI libraries, and API mocking for rapid local development.

---

Tech Stack

• Frontend: React 19
• Build Tool: Vite
• Styling: Tailwind CSS, shadcn/ui
• Icons: Lucide
• Charts: Recharts
• State Management: Redux Toolkit
• API Mocking: MSW (Mock Service Worker)
• Routing: React Router v6

---

Features

• 📋 Dashboard: View and manage all tasks with sorting, editing, and deletion
• ✨ Priority & Status Selector: Categorize tasks as High, Medium, or Low priority; set status as To Do, In Progress, or Done
• 📅 Deadlines & Reminders: Assign deadlines and reminders to tasks
• 📈 Analytics: Visualize task distribution and priorities with charts
• 🌓 Dark Mode First: Consistent dark theme across all pages
• 🔐 Authentication & AuthGuard: Secure routes, with mock login/logout flows
• 🧑‍💻 API Mocking: Uses MSW so you can run and test full features locally
• 🛠 Responsive Design: Works well on both desktop and mobile screens
• 🚀 UNIT TESTS FOR COMPONENTS (BONUS FEATURE)
• 🐳 DOCKERIZE THE FRONTEND APP (BONUS FEATURE)

---

Screenshots

Home Page of Taskly

Dashboard with Analytics

Add a New Task

Current Tasks

---

Installation & Setup

# Clone the repository
git clone https://github.com/yourusername/task-manager-app.git
cd task-manager-app

# Install dependencies
npm install

# Start the development server
npm run dev

Then, open http://localhost:5173 in your web browser.

---

How to Run the Project Locally

1. Clone the repository and change into the directory:

   git clone https://github.com/yourusername/task-manager-app.git
   cd task-manager-app

2. Install dependencies:

   npm install

3. Start the local dev server:

   npm run dev

4. Open http://localhost:5173 in your browser.
5. All API requests (tasks, login) are mocked via MSW for rapid development and demo usage—no backend required.

---

Mocking API

• MSW (Mock Service Worker) intercepts HTTP requests for /tasks, /login, etc., simulating realistic backend responses.
• Mock handlers are in src/mocks/ and MSW is initialized in your entry file (e.g., main.tsx).
• Easily modify mock handlers to simulate different responses, errors, and scenarios.
• No backend server is needed—everything runs in the browser for local development and preview.

---

Sample Mock Endpoints

Endpoint	Description
POST /login	Simulates user login
GET /tasks	Fetch list of tasks
POST /tasks	Add a new task
PUT /tasks/:id	Update a task
DELETE /tasks/:id	Delete a task

These endpoints let you test full CRUD flow and authentication entirely with MSW, no backend required.

---

Project Structure

src/
  features/
    auth/           # Authentication logic, login page, logout button, AuthGuard
    tasks/          # Redux slice, dashboard, task form, edit form, task analytics
  components/
    ui/             # UI primitives (Card, Button, Input, Select, etc.)
  mocks/            # MSW handlers and worker setup
  app/
    store.ts        # Redux store setup
  assets/
    screenshots/    # Project screenshots
    task-manager-banner.png

---

Libraries Used

• React 19 – UI library
• Vite – Lightning fast build tool
• Redux Toolkit – State management
• React Router – Routing & route protection
• Tailwind CSS – Utility-first CSS framework
• shadcn/ui – Accessible UI components
• MSW – Mock API server for development
• Lucide – Icon library
• Recharts – Data visualizations
• (and more, see package.json)

---

Contributing

Pull requests, feature suggestions, and bug reports are welcome!
Please create feature branches and keep your commit messages clear and descriptive.