/CLOUD-STORAGE

Курсовая работа для универа. Полноценное клиент-серверное приложение с серверной и клиентской частью - облачное хранилище по типу Google или Yandex Disk. Web-приложение для хранения файлов и предоставления доступа к ним.

Primary LanguageTypeScript

Web-приложение для хранения файлов и предоставления доступа к ним

Проект Облачное Хранилище показался мне очень интересным и перспективным. Давайте подробнее рассмотрим используемые технологии и инструменты в этом проекте.

Первым шагом в разработке облачного хранилища было создание frontend-части на React. React - это один из самых популярных JavaScript-фреймворков для создания веб-приложений. Он облегчает создание масштабируемых, быстрых и интерактивных пользовательских интерфейсов. React-router-dom - это навигационная библиотека для React, которая позволяет создавать маршрутизацию и переходы между страницами в приложении.

Redux-toolkit-query - это библиотека, которая упрощает работу с асинхронными запросами к серверу и управление состоянием приложения. Она использует концепцию "нормализованных" данных, что позволяет легко хранить и обрабатывать большие объемы информации.

Для выполнения запросов к серверу я использовал Axios - это библиотека, которая позволяет легко отправлять HTTP-запросы и обрабатывать ответы. Она обеспечивает поддержку Promise API, перехват и обработку ошибок, а также автоматическую сериализацию и десериализацию данных.

TypeScript - это язык программирования, который представляет собой надмножество JavaScript. Он добавляет статическую типизацию, что позволяет легче отлавливать ошибки в коде, а также улучшает разработку и поддержку приложения.

Для хранения JWT-токенов в браузере используется cookie - это небольшие текстовые файлы, которые хранятся на стороне клиента и передаются с каждым запросом к серверу. JWT - это технология аутентификации и авторизации, которая позволяет передавать зашифрованные данные между клиентом и сервером. Она основана на цифровой подписи, которая обеспечивает безопасность передачи данных.

На frontend части облачного хранилища были использованы перехватчики запросов Axios Interceptors. Эта технология позволяет перехватывать все запросы, отправляемые из frontend приложения, и добавлять дополнительные параметры или изменять их.

Это дает большую гибкость и контроль над запросами и ответами на frontend, что помогает улучшить безопасность и производительность приложения. Например, можно добавить заголовки для авторизации, указать таймаут для запроса или изменить параметры запроса перед отправкой на сервер.

Использование перехватчиков запросов Axios Interceptors является частой практикой в разработке современных веб-приложений, так как они позволяют легко и быстро управлять запросами и ответами на frontend, что повышает надежность и безопасность приложения.

Backend-часть облачного хранилища написана на Node.js и Express. Node.js - это среда выполнения JavaScript, которая позволяет запускать код на стороне сервера. Express - это веб-фреймворк для Node.js, который облегчает создание API и веб-приложений.

Основным методом авторизации, используемым в облачном хранилище, является JWT авторизация с access и refresh токенами. Access токен выдается при успешной аутентификации пользователя и используется для авторизации доступа к ресурсам на сервере. Refresh токен выдается при первом получении access токена и используется для обновления access токена в случае его истечения.

Для создания и проверки JWT токенов я использовал библиотеку jsonwebtoken - это библиотека, которая обеспечивает генерацию и проверку JWT токенов на стороне сервера. Она позволяет задавать параметры токена, такие как срок действия, алгоритм шифрования и другие.

Кроме использования JWT авторизации, в облачном хранилище были использованы дополнительные методы безопасности на backend, чтобы обеспечить надежность и защиту данных.

Так, на backend был создан свой класс безопасной обработки ошибок ApiError, который обеспечивает более точную и контролируемую обработку ошибок, что повышает безопасность и предотвращает возможные уязвимости в системе.

Кроме того, на backend была реализована валидация данных перед сохранением в базу данных, что уменьшает вероятность возникновения ошибок и помогает предотвратить возможные атаки на систему.

Для контроля и регистрации возникающих ошибок на backend была использована библиотека winston для логирования ошибок. Это помогает быстро обнаруживать и исправлять ошибки, повышает надежность и стабильность работы приложения.

В качестве базы данных для облачного хранилища я использовал MongoDB - это документо-ориентированная NoSQL база данных, которая хранит данные в формате JSON-подобных документов. Она обеспечивает высокую производительность и масштабируемость, а также гибкость в работе с данными.

В целом, использование таких технологий, как React, Redux-toolkit-query, Axios, TypeScript, Express, MongoDB и JWT токены, позволяет создавать масштабируемое и безопасное облачное хранилище, обеспечивая удобный и быстрый интерфейс для пользователя, а также надежную защиту данных на сервере.

Пример моего проекта:

Логин

Страница Логина На странице Логин вы можете войти в свой аккаунт, введя вашу учетную запись и пароль.

Регистрация

Страница Регистрации На странице Регистрация вы можете создать новую учетную запись, введя необходимые данные.

Домашняя страница

Домашняя страница 1 Домашняя страница 2 Домашняя страница 3 Домашняя страница является главной страницей нашего сайта. Здесь вы можете найти информацию о наших услугах, продуктах и контактную информацию для связи с нами.

Диск

Диск Страница Диск предоставляет доступ к вашим файлам и документам, которые хранятся на нашем сервере. (ошибка кодировки исправлена)

Страница не найдена

Страница не найдена Страница не найдена означает, что запрошенная страница не была найдена на нашем сайте.

Страница профиля

Страница профиля На странице профиля вы можете просмотреть информацию о своем профиле и настроить свои настройки.

Панель поиска

Панель поиска Страница поиска позволяет искать информацию на нашем сайте с помощью ключевых слов.

Папки

Папки Также можно создавать папки внутри папок.