Skip to main content

[Chat App] Data Structure

For chat app, we need to store the following data:

  1. User
  2. Room
  3. Message

User​

User is a person who can send and receive messages in the chat room.

type User = {
  id: string, // unique identifier of the user
  name: string, // a name of the user shown on the UI
  avatar?: string, // the image representation of the user
}

Room list of the participant​

Room is a place where participants can join to start chatting.

type Room = {
  id: string, // unique identifier of the room
  participants: User[], // participants of the room
  createdAt?: Date, // the time when the room is created
  lastMessage?: string, // the last message of the room
  lastMessageAt?: Date, // the time when the last message is sent
}

type UserRooms = Room[]; // a list of rooms of the current user

Message list of the room​

Message is a content sent by participants in the room

type Message = {
  roomId: string, // the room id of the message
  messageId: string, // unique identifier of the message generated by client
  content: string, // the content of the message
  senderId: string, // the id of the user who sent the message
  createdAt: Date, // the time when the message is sent
  status: 'pending' | 'in-flight' | 'success' | 'failed', // the status of the message
}

type Messages = Message[];

Draft message​

Draft message is a message that is still left in input, we can store it and restore it when the user re-open the chat room.

type DraftMessage = {
  userIdAndRoomId: string, // take as the client storage key
  message: string, // the content of the message
  fileList?: File[], // the list of files attached to the message
}


Reference​

  • GreatFrontend - Chat App