A simple chat app has built based on Facebook messenger. User can use public or privat chat as well. For private chat, the user needs to add a friend into the room.

• Log in with Google authentication
• Firebase uses for backend to store users, chat rooms and messages data
• React routes uses to handle pages
• Loading screen uses until data are loaded for Chat page
• Light and Dark theme can choose
• Different viewport size are handled with media query
• Sidebar:
  • Porfile picture from google authentication
  • Buttons for theme changes, logout and to add private chat
  • Public chat can be used by every users for general chating
  • Private chat can be added and 2 users can talk
  • Red border notification if chat room's name or user selection is missing
• Header:
  • Shows selected chat room logo, room name and last message date
  • Delete button to remove chats with messages, except the Public Chat data
• Messages:
  • Message bubbles oriented based on the message has written by the logged user or by other users
• Message sending:
  • Send button and Enter key can be used
  • Emoji characters can use beside normal characters

• React
• React Router DOM
• React Icons
• React Emoji Picker
• Typescript
• Vite
• Firebase
• Styled components
• date-fns