https://github.com/drissiomar98/angular-ngrx-todo-app

A Task Management application built with Angular's reactive state management powered by NgRx
https://github.com/drissiomar98/angular-ngrx-todo-app

angular ngrx-effects ngrx-store ngrx-store-devtools rxjs

Last synced: about 2 months ago
JSON representation

A Task Management application built with Angular's reactive state management powered by NgRx

• Host: GitHub
• URL: https://github.com/drissiomar98/angular-ngrx-todo-app
• Owner: drissiOmar98
• Created: 2025-06-23T22:44:52.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2025-06-26T11:09:45.000Z (3 months ago)
• Last Synced: 2025-07-02T17:29:30.747Z (3 months ago)
• Topics: angular, ngrx-effects, ngrx-store, ngrx-store-devtools, rxjs
• Language: TypeScript
• Homepage:
• Size: 143 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🚀 NgRx Productivity App

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Angular](https://img.shields.io/badge/Angular-17+-DD0031?logo=angular)](https://angular.io/)

[![NgRx](https://img.shields.io/badge/NgRx-16+-BA55D3?logo=ngrx)](https://ngrx.io/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?logo=typescript)](https://www.typescriptlang.org/)

[![RxJS](https://img.shields.io/badge/RxJS-7.0+-B7178C?logo=rxjs)](https://rxjs.dev/)



A modern **Task Management** application built with Angular's reactive state management powered by NgRx, featuring secure authentication and real-time weather integration.

## 🌟 Key Features

### 🧠 Core Functionality

- ✅ **Complete Task Management** (Add, Remove, Toggle Completion)

- 🔐 **JWT Authentication Flow** (Login/Logout)

- 🌦️ **Real-time Weather Dashboard** (OpenWeatherMap API)

### ⚡ State Management

- 🏗️ **NgRx Store** - Centralized application state  

- ✨ **Actions** - Events describing state changes (login, addTask, loadWeather)  

- 🔄 **Effects** - Side effect model for API calls  

- 🎯 **Selectors** - Efficient, memoized access to specific parts of the state

- ✨ **Reducers** - Immutable state transitions  

### 🎨 UI/UX

- 🧩 **Standalone Components** - Modern Angular architecture

- 🏎️ **Reactive Templates** - Async pipe patterns

- 🎭 **Animations** - Smooth UI transitions

- 📱 **Fully Responsive** - Mobile-first design

## 🛠️ Tech Stack

### 🧱 Core Frameworks

| Technology | Purpose | Version |

|------------|---------|---------|

|  Angular | Frontend Framework | 17+ |

|  NgRx | State Management | 16+ |

|  RxJS | Reactive Programming | 7+ |

### 🧰 Key Libraries

| Technology | Purpose |

|------------|---------|

|  TypeScript | Type Safety |

|  OpenWeather | Weather API |

## 📂 Project Structure

```text

src/

├── app/

│   ├── auth/               # Authentication

│   ├── task-store/         # Task management

│   ├── weather-store/      # Weather data

│   └── app.state.ts        # Root state

├── assets/                # Static files

└── environments/          # Configuration