VK Cup 22/23

Упрощённая веб-версия почты

• Ссылка на приложение.
• Комплект тестовых данных.
• Дизайн figma.
• Презентация проекта
• Техническое задание

Описание

Данный проект представляет собой упрощенную веб-версию почтового клиента, разработанную для участия в VK Cup 22/23. Приложение предоставляет базовый функционал для работы с электронной почтой, включая:

• Отображение списка папок.
• Отображение списка писем в выбранной папке.
• Отображение содержимого письма.
• Фильтрация писем по различным критериям.
• Интернационализация (поддержка русского и английского языков).
• Темизация (несколько цветовых схем, включая светлую, темную и тематическую).
• Бесконечная прокрутка списка писем.
• Интерфейс создания письма.

Технологии

Frontend

React, React Router, Styled Components, i18next, Redux, react-redux, Slate, Axios, redux/toolkit.

Backend

Node.js, http, path, fs, stream-json, mongodb, dotenv.

Архитектура

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

• Frontend: React приложение, которое выполняется в браузере пользователя. React Router используется для маршрутизации между различными страницами приложения (список папок, список писем, просмотр письма). Styled Components отвечают за стилизацию компонентов. i18next обеспечивает интернационализацию. Redux используется для управления состоянием приложения, включая темы, фильтры, язык и прочие настройки. Slate используется для создания rich text редактора при создании письма. Axios используется для отправки HTTP запросов к backend.
• Backend: Node.js сервер, который обрабатывает HTTP запросы от Frontend. Сервер использует встроенные модули Node.js для работы с HTTP, файловой системой, и для загрузки переменных окружения. Backend подключается к MongoDB для получения данных о письмах и пользователях.

Особенности

• Бесконечная прокрутка: при достижении конца списка писем Frontend автоматически запрашивает следующую порцию писем с backend.
• Обработка изображений: backend конвертирует изображения из формата base64 в jpg и сохраняет их в файловую систему, предоставляя Frontend относительные пути к изображениям.
• Хранение данных: данные о письмах и пользователях хранятся в базе данных MongoDB.
• Кэширование данных: Backend кэширует загруженные данные в файле db.json для ускорения последующих запросов.