https://github.com/nenad0707/tasktackler
Task Tackler is a Blazor WebAssembly app with an ASP.NET Core backend, featuring client-side caching, JWT authentication, pagination, and user notifications. It is containerized with Docker and deployed using GitHub Actions and Azure Bicep.
https://github.com/nenad0707/tasktackler
asp-net-core azure-bicep bicep-modules blazor blazor-webassembly client-side-caching css docker docker-compose docker-container dockerfile github-action html jwt-authentication notifications pagination powershell powershell-script
Last synced: about 18 hours ago
JSON representation
Task Tackler is a Blazor WebAssembly app with an ASP.NET Core backend, featuring client-side caching, JWT authentication, pagination, and user notifications. It is containerized with Docker and deployed using GitHub Actions and Azure Bicep.
- Host: GitHub
- URL: https://github.com/nenad0707/tasktackler
- Owner: nenad0707
- License: mit
- Created: 2024-04-28T19:53:23.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-11T09:34:16.000Z (11 months ago)
- Last Synced: 2025-08-11T11:33:41.427Z (11 months ago)
- Topics: asp-net-core, azure-bicep, bicep-modules, blazor, blazor-webassembly, client-side-caching, css, docker, docker-compose, docker-container, dockerfile, github-action, html, jwt-authentication, notifications, pagination, powershell, powershell-script
- Language: C#
- Homepage:
- Size: 405 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://github.com/nenad0707/TaskTackler/actions/workflows/azure-static-web-apps-green-bay-0d264ad03.yml)
# 📋 Task Tackler
**Task Tackler** is a **Blazor WebAssembly** application serving as the frontend for the Task Tackler project. This project demonstrates advanced techniques in client-side caching, authentication, authorization, and pagination.
## 🌐 Live Demo
[](https://rista007-002-site3.atempurl.com/)
> **⚠️ Note:** Registration is required to access the features. Please register and login to use the application.
---
## 📖 Table of Contents
- [📋 Task Tackler](#-task-tackler)
- [🌐 Live Demo](#-live-demo)
- [📖 Table of Contents](#-table-of-contents)
- [🚀 Features](#-features)
- [🛠️ Technologies Used](#️-technologies-used)
- [📂 Project Structure](#-project-structure)
- [🧩 Key Components](#-key-components)
- [🔒 Authentication](#-authentication)
- [🗃️ Caching](#️-caching)
- [🔄 Pagination](#-pagination)
- [📝 User Notifications](#-user-notifications)
- [🔄 Additional Components](#-additional-components)
- [CSS Isolation](#css-isolation)
- [🌟 Features in Detail](#-features-in-detail)
- [🗃️ Client-Side Caching](#️-client-side-caching)
- [🔒 Authentication \& Authorization](#-authentication--authorization)
- [🔄 Pagination](#-pagination-1)
- [📝 User Notifications](#-user-notifications-1)
- [🐳 Docker Configuration](#-docker-configuration)
- [🚀 Deployment with GitHub Actions](#-deployment-with-github-actions)
- [Azure Resource Deployment](#azure-resource-deployment)
- [Manual Deployment Trigger](#manual-deployment-trigger)
- [🏃 Running Locally](#-running-locally)
- [📸 Screenshots](#-screenshots)
- [📄 License](#-license)
---
## 🚀 Features
- **Client-Side Caching**: Efficiently caches responses using `ETag` values to reduce server requests and improve performance.
- **Authentication & Authorization**: Secure login and registration using JWT tokens.
- **Pagination**: Smooth navigation through paginated lists of tasks.
- **User Notifications**: Toast notifications for actions like adding, updating, or deleting tasks.
## 🛠️ Technologies Used
- **Blazor WebAssembly**: For building interactive web UIs.
- **ASP.NET Core Web API**: Backend service for handling API requests.
- **Docker**: For containerization.
- **GitHub Actions**: For continuous integration and deployment.
- **Azure Bicep**: For Azure resource management and deployment.
## 📂 Project Structure
- `TaskTackler`: Blazor WebAssembly client-side code and backend API.
## 🧩 Key Components
### 🔒 Authentication
- **CustomAuthenticationStateProvider**: Manages user authentication state using JWT tokens.
- **AuthorizationMessageHandler**: Adds Bearer tokens to server requests for authenticated communication.
### 🗃️ Caching
- **CachingHandler**: Manages caching logic using `ETag` values and localStorage for client-side caching.
- **CacheManager**: Provides methods for setting, getting, and removing items from localStorage.
- **CacheInvalidationService**: Handles cache invalidation when tasks are added, updated, or deleted.
### 🔄 Pagination
- **Pagination Component**: Provides navigation controls for paginated task lists.
- **TaskService**: Handles API requests and integrates with the caching system to efficiently fetch and display tasks.
### 📝 User Notifications
The application uses toast notifications to inform users about the success or failure of their actions, such as adding, updating, or deleting tasks. These notifications enhance the user experience by providing immediate feedback.
### 🔄 Additional Components
- **Index.razor**: Main page component integrating other components to display the todo list and handle pagination.
- **TodoList Component**: Displays a list of todos and integrates with `TodoItem` components.
- **AddTodoForm Component**: Handles the addition of new todo items.
- **TodoItem Component**: Displays individual todo items with options to update, mark as completed, or delete.
- **Pagination Component**: Manages pagination logic and navigation.
### CSS Isolation
Some components use CSS isolation to encapsulate their styles and avoid conflicts with global styles.
## 🌟 Features in Detail
### 🗃️ Client-Side Caching
The caching mechanism is implemented using `CachingHandler`, which manages `ETag` values and localStorage to store and retrieve cached responses. This reduces the number of HTTP requests by leveraging cached data when possible.
### 🔒 Authentication & Authorization
The application uses JWT tokens for authentication. `CustomAuthenticationStateProvider` manages the authentication state, and `AuthorizationMessageHandler` ensures that all API requests include the appropriate Bearer token.
### 🔄 Pagination
Pagination is handled by the `Pagination` component, which allows users to navigate through different pages of tasks. The `TaskService` integrates with the caching system to efficiently fetch tasks for the requested page, leveraging cached data to reduce server load.
### 📝 User Notifications
The application uses toast notifications to inform users about the success or failure of their actions, such as adding, updating, or deleting tasks. These notifications enhance the user experience by providing immediate feedback.
## 🐳 Docker Configuration
The project uses Docker for containerization, including a Dockerfile and Docker Compose setup. The Docker Compose configuration sets up three services: `tasktacklerapp`, `todoapi`, and `db`. These services use custom images hosted on Docker Hub.
For detailed configuration, please refer to the `docker-compose.yml` and `nginx.conf` files in the repository.
## 🚀 Deployment with GitHub Actions
### Azure Resource Deployment
The project uses Bicep files for creating and managing Azure resources. GitHub Actions are used to automate the deployment process.
**Workflow: Deploy Bicep**
This workflow deploys Azure resources using Bicep files.
**Workflow: Build and Deploy Website**
This workflow builds the Blazor WebAssembly application and deploys it to Azure.
**Workflow: Publish Docker Image**
This workflow builds and pushes the Docker image for the application to Docker Hub.
### Manual Deployment Trigger
A separate workflow allows manual triggering of the deployment process, ensuring flexibility in deployment.
## 🏃 Running Locally
To run the project locally using Docker Compose:
```bash
docker-compose build
docker-compose up -d
```
## 📸 Screenshots
Here are some screenshots of the Task Tackler application:
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.