🌿 NgPlantStore

Интернет-магазин растений, разработанный на Angular.

Проект представляет собой полноценное frontend-приложение с каталогом товаров, авторизацией пользователей, корзиной, избранным, заказами и личным кабинетом.

Основной акцент в проекте — на компонентной архитектуре Angular, разделении ответственности, переиспользовании компонентов и организации клиентской логики.

---

✨ Features

🛍️ Product catalog

• просмотр каталога растений;
• категории товаров;
• страница с подробной информацией о товаре;
• работа с изображениями и информацией о товарах.

🛒 Shopping cart

• добавление товаров в корзину;
• изменение количества товаров;
• удаление товаров;
• оформление заказа.

❤️ Favorites

• добавление товаров в избранное;
• просмотр списка избранных товаров;
• управление избранными товарами.

👤 User account

• регистрация;
• авторизация;
• личный кабинет;
• информация о пользователе;
• история заказов.

🔐 Authentication

В приложении реализована клиентская часть авторизации:

• access token;
• refresh token;
• автоматическое обновление токена;
• AuthGuard;
• AuthForwardGuard;
• HTTP interceptor;
• управление состоянием авторизации.

---

🏗️ Application Architecture

Структура приложения разделена по ответственности:

src/app/
├── core/
│   └── auth/
│
├── shared/
│   ├── components/
│   ├── directives/
│   ├── helpers/
│   ├── layout/
│   ├── services/
│   └── utils/
│
└── views/
    ├── main/
    ├── order/
    ├── personal/
    ├── product/
    └── user/

Core

Содержит функциональность, относящуюся к основным механизмам приложения.

В частности, здесь реализована работа с авторизацией пользователя, guards и interceptor.

Shared

Содержит переиспользуемые компоненты, сервисы, директивы и вспомогательные инструменты.

Views

Содержит функциональные части приложения:

• каталог и товары;
• корзину и заказы;
• личный кабинет;
• пользовательские сценарии.

Такое разделение позволяет не смешивать общую инфраструктуру приложения с конкретной бизнес-функциональностью.

---

🛠️ Tech Stack

• Angular 14
• TypeScript
• RxJS
• Angular Router
• Angular Forms
• Angular Material
• Angular CDK
• HTML5
• SCSS
• Karma / Jasmine

---

🧩 Angular Concepts

В проекте использованы основные механизмы Angular:

• components;
• services;
• dependency injection;
• routing;
• route guards;
• HTTP interceptor;
• reactive programming с RxJS;
• forms;
• shared components;
• переиспользуемая бизнес-логика.

---

🔐 Authentication Flow

Общая схема работы авторизации:

User
  │
  ▼
Login / Registration
  │
  ▼
AuthService
  │
  ├── Access Token
  └── Refresh Token
          │
          ▼
    HTTP Interceptor
          │
          ▼
       API requests

При необходимости access token обновляется с использованием refresh token.

Авторизованные и неавторизованные сценарии разделены с помощью route guards.

---

📱 User Flows

Основные пользовательские сценарии приложения:

Catalog
   │
   ├── Product details
   │       │
   │       ├── Add to cart
   │       └── Add to favorites
   │
   └── Categories

User
   │
   ├── Personal account
   │   ├── Personal information
   │   ├── Favorites
   │   └── Orders
   │
   └── Authentication

Cart
   │
   ▼
Order

---

🎯 Project Purpose

Проект создавался для практики разработки полноценного Angular-приложения и работы с типичными сценариями интернет-магазина.

Основные задачи проекта:

• освоение Angular и TypeScript;
• построение компонентной архитектуры;
• работа с маршрутизацией;
• реализация авторизации;
• организация переиспользуемой логики;
• работа с RxJS;
• создание пользовательских сценариев каталога, корзины и заказов.

🦊 What this project represents

NgPlantStore — один из этапов моего перехода от разработки отдельных frontend-страниц к созданию полноценных клиентских приложений.

Если artist был проектом про HTML, CSS, JavaScript, визуальную подачу и анимации, то здесь основной фокус уже смещается на Angular, TypeScript, архитектуру приложения и пользовательские сценарии.

---

🚀 Getting Started

npm install
ng serve

После запуска приложение будет доступно локально по адресу:

http://localhost:4200/

Для production-сборки:

ng build

---

📌 Project Status

Проект завершён в рамках первоначальной задачи и используется как демонстрация этапа освоения Angular и построения клиентских приложений.