Skip to content

KirillSenkov/my-cloud-frontend

Repository files navigation

My Cloud – Frontend (React + TypeScript + Vite)

Требования

  • Node.js 18+
  • yarn или npm

Установка и запуск (dev)

cd FRONT yarn install yarn dev

Возможности

  • Регистрация и аутентификация пользователей
  • Загрузка файлов
  • Просмотр списка файлов
  • Переименование и редактирование комментариев
  • Скачивание файлов
  • Публичная ссылка (включение/выключение, копирование)
  • Административный интерфейс управления пользователями
    • Список пользователей (уровень, файлы, объём, путь хранилища)
    • Смена ролей пользователей (с учётом иерархии)
    • Удаление пользователя (опционально с удалением файлов)
    • Переход в хранилище выбранного пользователя (через ?userId=)

Маршруты (React Router)

  • / — список файлов (свои файлы)
  • /?userId=<id> — список файлов пользователя (для админа; права дополнительно проверяются бэком)
  • /admin/users — админка: список доступных пользователей

Разработка (dev)

Frontend — Vite (:5173)
Backend — Django (:8000)

Для работы с CSRF в dev добавлен trusted origin:

Используется Vite proxy: все запросы с префиксом /api перенаправляются на backend.

Аутентификация основана на Django sessions + CSRF cookie. Axios передаёт cookie с заголовком X-CSRFToken.

План разработки

Этап 1. Каркас и инфраструктура

  • Vite + TypeScript
  • Proxy Vite → Django для /api
  • Axios client (cookies + CSRF)
  • Redux Toolkit: auth state
  • React Router: базовые маршруты
  • ProtectedRoute
  • NavBar (зависит от авторизации)

Этап 2. Аутентификация и регистрация

  • Login (POST /api/auth/login/)
  • Logout (GET /api/auth/logout/)
  • Register (POST /api/auth/register/)
  • Валидация регистрации на фронте по ТЗ

Этап 3. Файловое хранилище

  • Список файлов (метаданные, без контента)
  • Загрузка файла с комментарием
  • Удаление файла
  • Переименование файла
  • Изменение комментария
  • Скачивание файла
  • Просмотр файла (если поддерживается браузером) или скачивание
  • Публичная ссылка (включение/выключение, копирование)
  • Скачивание по публичной ссылке (без авторизации)
  • UI списка: действия, tooltips, sticky header, scroll

Этап 4. Админка

  • Список пользователей
  • Смена ролей пользователей
  • Удаление пользователя
  • Переход в хранилище выбранного пользователя (admin)

Этап 5. UX и финализация

  • Глобальная обработка ошибок API (единый формат отображения)
  • README: инструкции деплоя и сборки

About

My Cloud – Frontend (React + TypeScript + Vite)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages