My Public Chat

Как это работает

1. API эндпоинт:  
   - `GET /api/messages` возвращает массив всех сообщений (in memory).  
   - `POST /api/messages` добавляет новое сообщение в массив.

2. Хранение пользовательского ID:  
   - На сервере (через `getServerSideProps`) проверяем, есть ли cookie `userId`. Если нет, генерируем и записываем в cookie.
   - На клиенте при отправке сообщения передаём этот `userId` в теле POST-запроса.

3. В памяти:  
   - При перезапуске сервера глобальный массив с сообщениями очищается.

4. Монолитная структура:  
   - Next.js проект: и фронтенд, и бэкенд (API) в одном репозитории, без отдельного бэкенда и БД.

Структура проекта

my-public-chat 
├── pages 
│ ├── api 
│ │ └── messages.ts # API для получения и отправки сообщений 
│ ├── index.tsx  # Страница выбора имени и аватара (Landing)
│ └── chat.tsx # Страница чата 
├── public 
│ ├── logo.png # Логотип HypeDate!
│ └── avatar.png # Изображение по умолчанию для аватара 
├── styles 
│ └── globals.css # Импорт стилей Tailwind CSS 
├── tailwind.config.js # Конфигурация Tailwind CSS 
├── postcss.config.js # Конфигурация PostCSS 
├── package.json 
└── README.md

Установка и локальная разработка

1. Клонируйте репозиторий:

   git clone https://github.com/Mart22052006/ChatHypeDate.git 
   cd ChatHypeDate

2. Установка зависимостей:

   npm install

3. Запуск приложения:

   npm run dev

!Если вы видите сообщения об ошибках с Tailwind (например, попытка использовать Tailwind 4 в виде PostCSS-плагина), убедитесь, что в проекте установлена стабильная версия Tailwind 3.x. Если необходимо, выполните:!

npm remove tailwindcss postcss autoprefixer @tailwindcss/postcss
npm install -D tailwindcss@3.3.2 postcss@latest autoprefixer@latest

!Проверьте версию командой:!

npm list tailwindcss