https://github.com/w1llow1sp/multibit-angular
Туду лист (тестовое задание)
https://github.com/w1llow1sp/multibit-angular
angular crud rxjs tslib
Last synced: 12 days ago
JSON representation
Туду лист (тестовое задание)
- Host: GitHub
- URL: https://github.com/w1llow1sp/multibit-angular
- Owner: w1llow1sp
- Created: 2025-07-09T13:23:42.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-09T16:24:23.000Z (11 months ago)
- Last Synced: 2025-07-10T01:20:57.078Z (11 months ago)
- Topics: angular, crud, rxjs, tslib
- Language: TypeScript
- Homepage: https://multibit-angular.onrender.com
- Size: 152 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Мини-приложение "Список задач" (ToDo)
Современное Angular-приложение для управления задачами с продвинутыми возможностями, уведомлениями и аналитикой.
## 🌐 Демо
**🔗 Живое приложение:** [https://multibit-angular.onrender.com](https://multibit-angular.onrender.com)
## 🚀 Технологии
- **Angular 18+** (CLI-проект, Standalone Components)
- **TypeScript** (Strict Mode)
- **HTML + CSS** (Адаптивный дизайн)
- **RxJS** для реактивного программирования
- **Angular Router** для навигации
- **Angular Forms** (Template-driven)
- **localStorage** для персистентности данных
## 📋 Функциональность
### 📄 Главная страница (`/tasks`)
- ✅ Список задач с полями: `title`, `description`, `status`
- ✅ Кнопка "Добавить задачу" (открывает форму)
- ✅ Кнопка "Удалить" для каждой задачи с подтверждением
- ✅ Кнопка "Подробнее" → переход на `/tasks/:id`
- ✅ **Расширенный поиск и фильтрация** задач
- ✅ **Сортировка** по дате создания/обновления/названию/статусу
- ✅ **Skeleton Loader** для плавной загрузки
- ✅ **Уведомления** о действиях пользователя
### ➕ Добавление задачи
- ✅ Форма с **валидацией** (title — обязательно, description — необязательно)
- ✅ Статус задачи по умолчанию: "К выполнению"
- ✅ **Счетчик символов** с индикацией лимитов
- ✅ **Горячие клавиши** (Ctrl+Enter для сохранения, Escape для отмены)
- ✅ **Toast-уведомления** об успехе/ошибках
### 🔍 Страница задачи (`/tasks/:id`)
- ✅ Полная информация о задаче с **красивым дизайном**
- ✅ Кнопка "Назад" → возврат к списку
- ✅ **Inline редактирование** задачи
- ✅ **Быстрое изменение статуса** через выпадающий список
- ✅ **Умное отображение дат** на русском языке
- ✅ **Хлебные крошки** для навигации
- ✅ **Горячие клавиши** для управления
## 🛠 Архитектура
### Компоненты
- **TaskListComponent** - главная страница со списком задач
- **TaskDetailComponent** - детальная страница задачи
- **AddTaskComponent** - форма добавления новой задачи
- **IconComponent** - переиспользуемый компонент иконок (20+ иконок)
- **SearchFilterComponent** - продвинутый поиск и фильтрация
- **LoadingSkeletonComponent** - красивые состояния загрузки (9 типов)
### Сервисы
- **TaskService** - улучшенный сервис для работы с задачами
- ✅ **CRUD операции** с `OperationResult`
- ✅ **Кеширование** для производительности
- ✅ **Уведомления** о действиях
- ✅ **Расширенная статистика** и аналитика
- ✅ **Автосохранение** каждые 30 секунд
- ✅ **Фильтрация и сортировка** задач
- ✅ **Импорт/экспорт** данных
- ✅ **Обработка ошибок** с fallback
### Пайпы
- **RussianDatePipe** - интеллектуальное форматирование дат
- ✅ **Относительное время** ("2 часа назад", "вчера")
- ✅ **Кеширование** результатов
- ✅ **Временные зоны** и кастомные форматы
- ✅ **7 форматов**: relative, short, medium, full, time, date-only, iso, custom
- ✅ **Fallback** для старых браузеров
### Модели
- **Task** interface - структура задачи
- **TaskStatus** enum - статусы задач
- **CreateTaskDto**, **UpdateTaskDto** - DTO для операций
- **OperationResult** - типизированные результаты операций
- **TaskStatistics** - расширенная статистика
## 🎨 Дополнительные возможности
- 🔍 **Умный поиск** по названию и описанию с предложениями
- 🎛 **Продвинутая фильтрация** по статусу, дате, быстрые фильтры
- 📊 **Гибкая сортировка** по различным критериям с сохранением состояния
- 📱 **Полностью адаптивный дизайн** для всех устройств
- 🎭 **Плавные анимации** и переходы между состояниями
- 🎹 **Горячие клавиши** для быстрого управления
- 🔄 **Skeleton Loading** для улучшенного UX
- 🎯 **Полная Accessibility** (ARIA-атрибуты, клавиатурная навигация)
- 📅 **Интеллектуальные даты** на русском языке
- 💾 **Автосохранение** и бэкапы в localStorage
- 🎲 **Демо-данные** для быстрого старта
- 🔔 **Toast-уведомления** о всех действиях
- 📈 **Детальная статистика** выполнения задач
- 🎨 **Цветовое кодирование** статусов задач
- 🔄 **Офлайн поддержка** через localStorage
## 🚀 Установка и запуск
### Предварительные требования
- **Node.js** (версия 18+)
- **npm** или **yarn**
- **Angular CLI** (опционально)
### Клонирование репозитория
```bash
git clone https://github.com/w1llow1sp/multibit-angular.git
cd multibit-angular
```
### Установка зависимостей
```bash
npm install
```
### Запуск в режиме разработки
```bash
npm start
# или
ng serve
```
Приложение будет доступно по адресу: `http://localhost:4200/`
### Сборка для продакшена
```bash
npm run build:prod
# или
ng build --configuration production
```
Файлы будут собраны в папку `dist/my-app/browser/`
## 🌐 Деплой
### Автоматический деплой на Render
Проект настроен для автоматического деплоя на **Render.com**:
- **Build Command:** `npm run build:prod`
- **Publish Directory:** `dist/my-app/browser`
- **Auto-Deploy:** включен для ветки `main`
### Деплой на другие платформы
```bash
# Netlify/Vercel
npm run build:prod
# Загрузите содержимое dist/my-app/browser/
# GitHub Pages (с Angular CLI)
ng deploy --base-href="/repository-name/"
```
## 📁 Структура проекта
```
src/app/
├── components/ # Основные компоненты
│ ├── task-list/ # Список задач + фильтрация
│ ├── task-detail/ # Детали задачи + редактирование
│ └── add-task/ # Форма добавления + валидация
├── shared/ # Общие модули
│ ├── components/ # Переиспользуемые компоненты
│ │ ├── icon/ # Компонент иконок (20+ иконок)
│ │ ├── search-filter/ # Продвинутая фильтрация
│ │ └── loading-skeleton/ # Skeleton Loading (9 типов)
│ ├── models/ # Модели данных + типы
│ ├── services/ # Сервисы + результаты операций
│ └── pipes/ # Пайпы + форматирование дат
├── app.routes.ts # Маршрутизация (Lazy Loading)
├── app.component.* # Корневой компонент
└── main.ts # Точка входа
```
## 🧪 Тестирование
### Запуск unit-тестов
```bash
npm test
# или
ng test
```
### Запуск e2e-тестов
```bash
npm run e2e
# или
ng e2e
```
### Проверка типов TypeScript
```bash
npx tsc --noEmit
```
## 📝 Использование
1. **Просмотр задач**: Откройте главную страницу для просмотра списка
2. **Добавление**: Нажмите "Добавить задачу" и заполните форму
3. **Поиск**: Используйте умный поиск с предложениями
4. **Фильтрация**: Выберите статус, период или быстрые фильтры
5. **Детали**: Нажмите "Подробнее" для просмотра полной информации
6. **Редактирование**: На странице деталей нажмите "Редактировать" (Ctrl+E)
7. **Статус**: Быстро меняйте статус через выпадающий список
8. **Демо-данные**: Приложение автоматически загружает примеры при первом запуске
### Горячие клавиши
- **Ctrl+E** - Начать редактирование
- **Ctrl+S** - Сохранить изменения
- **Ctrl+Enter** - Отправить форму
- **Escape** - Отменить действие/вернуться назад
## 🎯 Производительность
- **Lazy Loading** модулей для быстрой загрузки
- **OnPush Change Detection** для оптимизации
- **Кеширование** данных и результатов вычислений
- **Debounced Search** для экономии ресурсов
- **Virtual Scrolling** готов для больших списков
- **Gzip сжатие** статических файлов
## 🤝 Разработка
Проект использует современные подходы Angular:
- **Standalone Components** - без NgModules
- **Lazy Loading** - для оптимизации загрузки
- **OnPush Change Detection** - для производительности
- **TypeScript Strict Mode** - для безопасности типов
- **Angular Style Guide** - для структуры кода
- **RxJS Best Practices** - для реактивного программирования
## 🔧 Технические особенности
- **Angular 18+** с новейшими возможностями
- **Строгая типизация** TypeScript
- **Реактивные формы** с валидацией
- **Observable-based** архитектура
- **Error Boundaries** для обработки ошибок
- **Progressive Enhancement** для доступности
## 📊 Метрики
- **Bundle Size**: ~280KB (gzipped ~79KB)
- **Performance Score**: 95+ (Lighthouse)
- **Accessibility Score**: 100 (Lighthouse)
- **Best Practices**: 100 (Lighthouse)
- **TypeScript Coverage**: 100%
## 📜 Лицензия
MIT License - свободное использование для образовательных и коммерческих целей.
## 👥 Контрибьютинг
1. Fork репозитория
2. Создайте feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit изменения (`git commit -m 'Add some AmazingFeature'`)
4. Push в branch (`git push origin feature/AmazingFeature`)
5. Откройте Pull Request
---
*Современное Angular-приложение, демонстрирующее лучшие практики разработки 2024 года*
**🔗 Live Demo:** [https://multibit-angular.onrender.com](https://multibit-angular.onrender.com)