Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ev0clu/chat-app
Fullstack (BaaS, React.js) Chat app
https://github.com/ev0clu/chat-app
firebase react styled-components typescript vite
Last synced: 2 days ago
JSON representation
Fullstack (BaaS, React.js) Chat app
- Host: GitHub
- URL: https://github.com/ev0clu/chat-app
- Owner: ev0clu
- Created: 2023-05-12T10:08:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-27T09:21:22.000Z (3 months ago)
- Last Synced: 2024-08-27T10:36:57.198Z (3 months ago)
- Topics: firebase, react, styled-components, typescript, vite
- Language: TypeScript
- Homepage: https://ev0clu.github.io/chat-app/
- Size: 851 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Chat app**
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](https://ev0clu.github.io/chat-app/)
## Features
- 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
### Developement dependencies
- [React](https://react.dev/)
- [React Router DOM](https://www.npmjs.com/package/react-router-dom)
- [React Icons](https://www.npmjs.com/package/react-icons)
- [React Emoji Picker](https://www.npmjs.com/package/emoji-picker-react)
- [Typescript](https://www.typescriptlang.org/)
- [Vite](https://vitejs.dev/)
- [Firebase](https://firebase.google.com/)
- [Styled components](https://styled-components.com/)
- [date-fns](https://github.com/date-fns/date-fns)
### Layout
