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.
Demo: Link
- 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
