{"id":29624937,"url":"https://github.com/drissiomar98/angular-ngrx-signal-store","last_synced_at":"2026-05-18T11:09:52.699Z","repository":{"id":304062488,"uuid":"1015483275","full_name":"drissiOmar98/Angular-NgRx-Signal-Store","owner":"drissiOmar98","description":"a high-performance, server-side rendered (SSR) E-Commerce platform using Angular 19 and NgRx Signal Store, leveraging fine-grained reactivity for optimized state management. Delivered real-time cart synchronization, persistent client-side favorites with storage sync, and a modular, SEO-optimized product catalog architecture.","archived":false,"fork":false,"pushed_at":"2025-11-01T14:45:21.000Z","size":211,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-01T16:18:36.895Z","etag":null,"topics":["angular","ngrx-signals-store","ssr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drissiOmar98.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-07T15:10:57.000Z","updated_at":"2025-11-01T14:45:25.000Z","dependencies_parsed_at":"2025-07-11T04:33:16.618Z","dependency_job_id":"9a466551-b0a2-4ba5-b616-86820db39022","html_url":"https://github.com/drissiOmar98/Angular-NgRx-Signal-Store","commit_stats":null,"previous_names":["drissiomar98/angular-ngrx-signal-store"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/drissiOmar98/Angular-NgRx-Signal-Store","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drissiOmar98%2FAngular-NgRx-Signal-Store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drissiOmar98%2FAngular-NgRx-Signal-Store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drissiOmar98%2FAngular-NgRx-Signal-Store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drissiOmar98%2FAngular-NgRx-Signal-Store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drissiOmar98","download_url":"https://codeload.github.com/drissiOmar98/Angular-NgRx-Signal-Store/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drissiOmar98%2FAngular-NgRx-Signal-Store/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33175957,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","ngrx-signals-store","ssr"],"created_at":"2025-07-21T06:04:56.011Z","updated_at":"2026-05-18T11:09:52.694Z","avatar_url":"https://github.com/drissiOmar98.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛍️ ShopNest - E-Commerce Platform With NgRx Signal Store\n\n**ShopNest** is a cutting-edge, full-featured e-commerce platform built with **Angular 19** that leverages the latest innovations in reactive state management powered by **NgRx SignalStore**. Designed for exceptional performance and user experience, ShopNest offers real-time shopping cart updates, a favorites system, and a dynamic product catalog — all seamlessly synchronized with a robust **Node.js/Express** backend enabling secure, Stripe-powered checkout.\n\nBuilt with out-of-the-box support for **Server-Side Rendering (SSR)**, ShopNest delivers blazing-fast initial page loads, improved SEO, and optimal cross-platform performance by intelligently detecting the execution environment (browser or server). Its modern architecture embraces standalone components, reactive signals, and an extensible theme system to create a responsive, accessible, and maintainable e-commerce experience.\n\nExperience the future of Angular e-commerce with ShopNest — where advanced state management meets high-performance SSR and seamless integrations.\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Angular-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/NgRx_SignalStore-BA55D3?style=for-the-badge\u0026logo=ngrx\u0026logoColor=white\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/RxJS-B7178C?style=for-the-badge\u0026logo=rxjs\u0026logoColor=white\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Stripe-635BFF?style=for-the-badge\u0026logo=stripe\u0026logoColor=white\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Node.js-339933?style=for-the-badge\u0026logo=node.js\u0026logoColor=white\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://miro.medium.com/v2/resize:fit:1100/format:webp/1*NtR1S43HQ5eObm6iR2KaLQ.png\" alt=\"NgRx Architecture\" width=\"600\"\u003e\n\u003c/p\u003e\n\n## 🌟 Why ShopNest?\n\nShopNest is a **showcase project** created to harness and demonstrate the power of **Angular 16+**, specifically featuring:\n\n- **NgRx SignalStore** 📊: The next-level state management solution fully embracing Angular Signals for simple yet powerful state handling.\n- **Server-Side Rendering (SSR)** 🌐: Boost SEO, improve performance, and provide seamless server/browser platform detection.\n- **Modern UX/UI Patterns** ✨: Responsive design, dynamic dark/light theme toggling, real-time updates, and smooth loading experiences.\n\n## 🎯 Main Purposes\n\n- Explore Angular's new reactive paradigm with **Signal-based State Management**\n- Build a production-grade e-commerce SPA with **optimized SSR**\n- Demonstrate advanced architectural patterns like standalone components and reactive signals\n- Develop a fully themed application with user-friendly toggling and persistent preferences\n- Implement a secure checkout workflow using Stripe integration\n\n## 🛠️ Technical Highlights\n\n| Feature                      | Description                                                       |\n|-----------------------------|-------------------------------------------------------------------|\n| **Angular 16+**              | Standalone components, signals, and reactive forms               |\n| **NgRx SignalStore** 📊       | Declarative, opinionated state management with native Signals     |\n| **SSR \u0026 Platform Detection** 🌐 | Server vs client platform detection via `platform-detection.service.ts` for universal rendering |\n| **Theme System** 🎨          | SCSS variables for light/dark themes + toggle component that stores user preference in `localStorage` |\n| **State Persistence** 🔄      | Cart and favorites saved and restored in real-time                |\n| **UI/UX**                   | Responsive layout, toast notifications, skeleton loaders, theme toggle |\n| **API Backend** ⚙️           | Node.js/Express with Stripe integration for secure checkout       |\n\n## 🚀 Features Overview\n\n### Modern Angular Architecture ✨\n\n- Fully **standalone components** — minimal module boilerplate\n- Signal-powered reactive programming for **fine-grained performance**\n- **Type-safe, declarative stores** with NgRx SignalStore  \n  \u003e *NgRx SignalStore* is a **robust and extensible state management solution** leveraging Angular’s new Signals. It lets you define stores declaratively, making state logic simple yet powerful and maintainable.\n\n### Shopping Experience 🛒\n\n- Dynamic product catalog with powerful **filtering and search**\n- Real-time **shopping cart** with instant UI updates\n- Wishlist \u0026 Favorites tracking with state sync and persistence\n- Smooth and secure **checkout flow** powered by Stripe API integration\n\n### Server-Side Rendering (SSR) \u0026 Platform Detection 🌍\n\n- Universal app support for blazing fast first paint and enhanced SEO\n- A robust **Platform Detection Service** (`platform-detection.service.ts`) to optimize behavior based on whether code runs on browser or server\n- **Incremental Hydration:** Enables partial activation of page components on user interaction or viewport entry, significantly enhancing startup performance.\n\n### Themes \u0026 User Preferences 🌗\n\n- Fully themable UI with **predefined SCSS light/dark variables**\n- Intuitive **Theme Toggle Component** allowing one-click switches\n- Saves user choice persistently in **localStorage** for consistent UX\n\n## 📂 Project Structure\n\n```text\nsrc/\n├── app/\n│   ├── features/\n│   │   ├── cart/              # Cart logic + UI\n│   │   │   ├── components/    # Cart-related views\n│   │   │   └── store/         # NgRx SignalStore state logic\n│   │   ├── favorites/         # Wishlist logic \u0026 components\n│   │   ├── products/          # Catalog, search, filters\n│   │   └── shared-ui/         # Layout components, header, etc.\n│   ├── core/\n│   │   ├── store/             # App-level reducers/meta-reducers\n│   │   └── services/          # API clients, storage sync,Platform detection, theme management\n│   └── app.routes.ts         # Route configuration\n├── shared/\n│   ├── models/                # Interfaces, types, enums\n│   ├── pipes/                 # Custom pipes\n│   └── ui/                    # Reusable components (buttons, cards)\n└── assets/                    # Static files (images, icons)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrissiomar98%2Fangular-ngrx-signal-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrissiomar98%2Fangular-ngrx-signal-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrissiomar98%2Fangular-ngrx-signal-store/lists"}