📱 Cloudgram Web App

Веб-приложение для облачного хранения файлов с интеграцией через Telegram бота.

📝 Описание проекта

Cloudgram - это веб-приложение для управления файлами в облачном хранилище, использующее Telegram как основное хранилище данных. Пользователи могут загружать, организовывать и управлять своими файлами через веб-интерфейс, в то время как все данные надежно хранятся в инфраструктуре Telegram.

✨ Основные возможности

• 🔐 Быстрая авторизация через Telegram
• 📂 Продвинутое управление файлами и папками
• 📤 Загрузка и скачивание файлов любого типа
• 🎨 Цветовая организация папок
• 🔍 Умный поиск по файлам
• 📱 Адаптивный интерфейс

🛠️ Технологии

• Frontend Framework: ⚛️ React 18 + TypeScript
• UI компоненты: 🎨 Material UI
• Стилизация: 🎨 SCSS Modules + Emotion
• Управление состоянием: 🔄 TanStack Query v5 + Redux Toolkit
• Роутинг: 🔀 React Router v7
• Анимации: 💫 GSAP
• Валидация данных: ✅ Zod
• Сборка: ⚡ Vite
• Контейнеризация: 🐳 Docker

📁 Структура проекта

├── src/
│   ├── app/              # Конфигурация приложения
│   │   ├── store/       # Redux стор
│   │   └── styles/      # Глобальные стили
│   ├── features/        # Функциональные модули
│   │   ├── auth/        # Авторизация
│   │   ├── search/      # Поиск
│   │   └── folderManagement/  # Управление папками
│   ├── shared/          # Переиспользуемый код
│   │   ├── api/        # API клиенты
│   │   ├── assets/     # Статические ресурсы
│   │   ├── config/     # Конфигурации
│   │   ├── hooks/      # React хуки
│   │   ├── lib/        # Утилиты и хелперы
│   │   ├── types/      # TypeScript типы
│   │   └── ui/         # UI компоненты
│   └── widgets/         # Составные компоненты
│       ├── Sidebar/     # Боковая панель
│       ├── FoldersList/ # Список файлов
│       └── Breadcrumbs/ # Навигация
├── public/              # Публичные файлы
└── config/              # Конфигурация сборки

🏗️ Основные компоненты

📄 Страницы (pages/)

• AuthPage - 🔑 Страница авторизации
• MainPage - 🏠 Главная страница с файлами и папками
• OfflinePage - 📵 Страница при отсутствии подключения

🧩 Компоненты (components/)

• Header - 📱 Шапка с навигацией и информацией пользователя
• Footer - 🔽 Нижняя панель навигации
• FileManager - 📂 Основной компонент управления файлами
• FoldersList - 📂 Список файлов и папок с различными видами отображения
• UserPanel - 👤 Панель информации о пользователе
• Filters - 🔍 Фильтры и создание файлов/папок
• Breadcrumbs - 🗺️ Навигационная цепочка
• SearchInput - 🔎 Поиск файлов
• ActionMenu - 📄 Контекстное меню действий
• ModalWindow - 🪟 Универсальное модальное окно
• Loader - ⌛ Компоненты загрузки
• AuthCodeInput - 🔢 Ввод кода авторизации
• UploadFile - 📤 Загрузка файлов с прогрессом
• CreateFolder - 📁 Создание новых папок

🔌 API (api/)

• Auth.ts - 🔐 Авторизация
• Files.ts - 📄 Управление файлами
• Folders.ts - 📁 Управление папками
• User.ts - 👤 Информация о пользователе

🎣 Хуки (hooks/)

• useUserQuery - 👤 Получение данных пользователя
• useFolderQuery - 📂 Получение содержимого папки
• usePathFinder - 🗺️ Навигация по папкам
• useHotkeys - ⌨️ Обработка горячих клавиш

🛠️ Утилиты (utils/)

• animations/ - 💫 Утилиты для GSAP анимаций
• validators/ - ✅ Zod схемы валидации
• calcSumUpload - 📊 Расчет размера загрузки
• formatDate - 📅 Форматирование дат
• getFileIcon - 🎨 Иконки для типов файлов
• isPremium - ⭐ Проверка премиум статуса

🔥 Особенности реализации

🔐 Авторизация

• 📱 Интеграция с Telegram
• 🔑 Сессионная авторизация
• 🛡️ Защита роутов

📂 Управление файлами

• 📤 Загрузка файлов с прогресс-баром
• 📄 Поддержка различных типов файлов
• 🖼️ Предпросмотр изображений
• 🎨 Цветовая маркировка типов файлов

🎨 Интерфейс

• 📱 Адаптивный дизайн
• ✨ Анимации при взаимодействии
• 🔤 Кастомные шрифты (Gilroy, Roboto)
• 🪟 Модальные окна

⚡ Оптимизация

• 💾 Кэширование запросов
• 🚀 Ленивая загрузка компонентов
• ⚡ Оптимизация ре-рендеров

🚀 Установка и запуск

1. Клонировать репозиторий:

git clone https://github.com/Cloudgram/cloudgram-webapp.git

2. Установить зависимости:

npm install

3. Запустить в режиме разработки:

npm run dev

4. Сборка для продакшена:

npm run build

🐳 Docker

Проект поддерживает контейнеризацию через Docker:

npm run docker:run-compose    # Запуск в Docker
npm run docker:down-compose   # Остановка контейнеров

🔌 API Endpoints

API доки: https://api.cloudgram.online/docs#

Базовый URL: https://api.cloudgram.online

• /auth - 🔐 Авторизация через Telegram
• /user - 👤 Информация о пользователе
• /folder/{id} - 📂 Управление папками
• /file - 📤 Загрузка файлов
• /file/{id} - 📥 Скачивание/удаление файлов
• /trash - 🗑️ Управление корзиной

Документация API: https://api.cloudgram.online/docs#/

⚙️ Конфигурация

Основные конфигурационные файлы:

• vite.config.ts - Конфигурация сборки
• tsconfig.json - Настройки TypeScript