Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hire-hoffee/web-mail

Приложение для участия в VK Cup 2022
https://github.com/hire-hoffee/web-mail

axios backend competition frontend i18n nodejs react redux slate styled-components

Last synced: about 2 months ago
JSON representation

Приложение для участия в VK Cup 2022

Host: GitHub
URL: https://github.com/hire-hoffee/web-mail
Owner: Hire-Hoffee
Created: 2022-12-13T14:33:20.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-12-23T19:48:05.000Z (about 2 months ago)
Last Synced: 2024-12-23T20:34:50.692Z (about 2 months ago)
Topics: axios, backend, competition, frontend, i18n, nodejs, react, redux, slate, styled-components
Language: TypeScript
Homepage: http://petwebmail.freemyip.com
Size: 53.9 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

README

# VK Cup 22/23

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

- Ссылка на [приложение](http://petwebmail.freemyip.com).
- [Комплект тестовых данных](https://cloud.mail.ru/public/kLv4/mYrohjF9k).
- Дизайн [figma]().
- [Презентация проекта](https://docs.google.com/presentation/d/1EKmwgqBBrcyU9DvVRfKy7KlfONIlUulJS9pQHHUdUOs/edit?usp=sharing)
- [Техническое задание](./Техническое%20задание.md)

### Описание

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

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

![Dark theme](https://i.imgur.com/Xu98oZY.png "Dark theme")
![Message](https://i.imgur.com/y7I8ZXK.png "Message")
![Light theme](https://i.imgur.com/DVg21s4.png "Light theme")
![Colored theme](https://i.imgur.com/KHASe2n.png "Colored theme")

### Технологии

#### 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 для ускорения последующих запросов.