Emojigram - это приложение для общения в интернете, особенностью которого является возможность пользоваться лишь эмодзи - все диалоги наполнены иконками желтых человечков без единой буквы.
Данный проект был создан как поле для практики и освоения новых технологий и методологий
Текущая версия проекта - 1.0.1
Выпуск версии 1.1.0 будет MVP проекта, включающий следующий функционал:
- Интерфейс, обновляемый на изменение хранилища
- Рабочий Backend сервер с хранением данных в оперативной памяти
- Авторизация на cookie
- Несколько общих чатов, доступных всем пользователям, куда можно будет отправлять сообщения
- Обмен сообщениями по WebSocket
Для запуска необходимо скачать все зависимости и запустить сервер следующими командами:
npm install
npm run start
После чего сайт будет доступен по ссылке http://localhost:3000
- React + TypeScript
- React Router DOM
- Архитектура Feature-Sliced Design
- Redux Toolkit
- CSS Modules
В будущем так же:
- TanStack Query
- Node.js Backend Server
- MongoDB
Проект реализует принципы FSD имеет следующую структуру:
.
├── public/
│ └── index.html
└── src/
├── app/
│ └── Здесь лежит компонент приложения и глобальное хранилище
├── entities/
│ └── Здесь лежат компоненты бизнес сущностей
├── pages/
│ └── Здесь лежат компоненты страниц
├── widgets/
│ └── Здесь лежат компоненты отдельных виджетов
├── features/
│ └── Здесь лежат компоненты бизнес логики
├── shared/
│ └── Здесь лежат компоненты, используемые по всему проекту
│
└── index.tsx - точка старта приложения
Структура компонента имеет в себе:
.
└── Component/
├── lib/
│ └── function.ts - некоторая вынесенная бизнес логика
├── model/
│ ├── selectors - селекторы глобального хранилища
│ └── types - типы и интерфейсы ts
├── ui/
│ ├── Component.tsx - интерфейс компонента, хуки, обработчики
│ └── style.module.scss - стили css modules
│
└── index.ts - публичный API компонента