Task Manager - Enhanced Full Stack Application

A complete full-stack task management application built with React TypeScript frontend and C# .NET 8 backend API, featuring advanced filtering, offline capabilities, and modern Bootstrap UI.

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher) - Download
• .NET 8 SDK - Download

Running the Application

1. Start the Backend API

   cd backend
   dotnet run

   Backend will run on http://localhost:5002

2. Start the Frontend (in a new terminal)

   cd frontend
   npm install
   npm run dev

   Frontend will run on http://localhost:5173 (or next available port)

3. Open your browser and navigate to the frontend URL

📁 Project Structure

Task_Manager/
├── frontend/           # React TypeScript application
│   ├── src/
│   │   ├── components/    # React components
│   │   │   ├── AddTask.tsx
│   │   │   ├── TaskItem.tsx
│   │   │   ├── TaskList.tsx
│   │   │   ├── Filter.tsx      # Task filtering
│   │   │   └── Stats.tsx       # Statistics dashboard
│   │   ├── services/      # API and storage services
│   │   │   ├── taskService.ts
│   │   │   └── localStorageService.ts  # Offline storage
│   │   ├── types/         # TypeScript types
│   │   └── ...
├── backend/            # C# .NET 8 Web API
│   ├── Controllers/    # API controllers
│   ├── Models/         # Data models
│   ├── Services/       # Business logic
└── README.md          # This file

✨ Enhanced Features

Frontend Features

• Modern Bootstrap UI: Professional design with glassmorphism effects
• Responsive Design: Works perfectly on desktop and mobile
• User Friendly: Intuitive task management interface
• Advanced Filtering: Filter by All, Active, or Completed tasks
• Statistics Dashboard: Real-time task analytics and completion tracking
• Offline Support: Works without internet using localStorage

Backend Features

• RESTful API: Complete CRUD operations with Guid IDs
• CORS Support: Seamless frontend integration
• In-Memory Storage: Fast data access with clean start
• Error Handling: Proper HTTP status codes
• Clean Architecture: Separation of concerns

🛠️ Tech Stack

Frontend

• React 18 - Modern React with hooks
• TypeScript - Type-safe JavaScript
• Bootstrap 5 - Modern CSS framework
• Axios - HTTP client
• localStorage - Browser storage for offline functionality

Backend

• .NET 8 - Latest .NET framework
• ASP.NET Core - Web API framework
• C# 12 - Modern C# features
• Dependency Injection - Built-in IoC
• Guid IDs - Secure, non-sequential identifiers

🧪 Testing the API

Test the backend API directly:

# Get all tasks
curl http://localhost:5002/api/tasks

# Create a new task
curl -X POST http://localhost:5002/api/tasks \
  -H "Content-Type: application/json" \
  -d '{"description": "Test task"}'

🚀 Development Workflow

1. Start backend in terminal 1: cd backend && dotnet run
2. Start frontend in terminal 2: cd frontend && npm run dev
3. Open browser to the frontend URL

🔧 Available Commands

Frontend

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

Backend

dotnet run       # Run the application
dotnet build     # Build the project
dotnet clean     # Clean build artifacts
dotnet restore   # Restore dependencies

🎯 Enhancements

Task Filtering

• All Tasks: Shows all tasks (default view)
• Active Tasks: Shows only incomplete tasks
• Completed Tasks: Shows only finished tasks
• Live Counts: Filter buttons display relevant task counts

Statistics Dashboard

• Total Tasks: Overall task count
• Active Tasks: Incomplete tasks count
• Completed Tasks: Finished tasks count
• Completion Percentage: Visual progress indicator

Offline Capabilities

• localStorage Integration: Tasks persist across browser sessions
• Offline Mode: Full functionality without internet
• Data Sync: Automatic backup when API is available

Modern UI

• Bootstrap Framework: Professional, responsive design
• Loading States: Visual feedback for all operations