gormonn / test-message-feed

Test Chat App

Publish to Github Pages

Vite Static Deploy Pipeline starts after push to main.

Comments:

Architecture and state

Here I am using the FSD methodology with Effector.

Type of FeedMessage contains userId prop instead of userFullName / userAvatar props:

• It can depends on API design
• Pros:
  • Light version of the message
• Cons:
  • Additional delay when first loading a user
  • Need to manage user cache

Request all messages at once:

• It's a bad practice in real life, when the feed is big
• So in real life, we need to request messages in parts (by date, page/limit/offset, etc.)

Using REST API instead of WS or SSE:

• In real life, we need to communicate in real time, but task is very abstract by requirements

Task

Лента текстовых сообщений с фильтрацией. Сообщения состоят из:

• даты и времени;
• текста;
• автора.

Модальное окно добавления нового сообщения

• Поле ввода текста со счётчиком символов и ограничением по длине 200 знаков.

Страница автора:

• произвольная информация по автору;
• список сообщений.

Roadmap:

• Fake API
  • Generate data with config
  • Fake AxiosInstance
  • Add API client methods
• Chat Layout
  • Virtual list
  • Scroll from bottom
  • "Go back" button
• Add new message
  • Add modal with textarea and symbols count checker
  • API method (done)
  • Optimistic Update chat on message
  • Auto focus input
  • Handle ESC/ENTER key press
  • Add keyboard shortcuts
  • Fix line break of messages
• UserInfo with user's messages
  • Add router
  • Add layout with user's info and filtered feed
• Filtration
  • Add filter UI by text and user
  • Add filter logic to model
  • Resolve AND/OR problems
  • Add additional filters to UserInfo page
  • Add highlight wrapper to texts
• Beautify and tech debt
  • Fix time format
  • Fix date format
  • Add Skeleton loading animation
  • Add aria?
  • Use mount/unmount instead of display:none in Modal
• Build optimizations
  • css & js minimize

Additional Features

Common

• Add Keyboard Shortcuts Cheat Sheet
• Fix deplow workflow with pnpm: issue
• Cache Images from stable mocks (to indexed db?)
• Add debounce / cancellation to load users/avatars while scrolling
• Feed movement between found words / users (if using "search" instead of "filter by text")

Profile Routing

Since mocks are generated on the fly, you can's open the same profile after reload can't For thar purpose:

• Add stable mocks for testing purposes (e.g. user profile page) with LocalStorage
• Add stable mocks with InnoDB

Known Bugs:

• currentUser still random
• Empty search text doesn't reset the filter by text
• Reset filter doesn't work properly in profile (nothing changed in feed)
• Filter doesn't reset on change route (closeGate?)
• Twice rendering http://localhost:5173/profile/:id
• On change feedCount and reload page -> smooth scroll down. (Flickering / Scrolling on filter)
• May have accessibility issues. Problem with focus in "Filter By Users".
• Bad skeletons layout UserAvatar / UserFullName
• List of users does not follow input when resized (fix or use floating UI)
• Wrong type in shortcutsKeys

Tech Debt:

• Add stable mocks for testing purposes (e.g. user profile page)
• https://www.w3.org/WAI/ARIA/apg/#dialog_modal
• Use contenteditable instead of textarea (to use stickers)
• Add message state: Pending / Delivered / Seen / Error
• May be use some UI lib