This is a submission for the The Pinata Challenge
What I Built
<!-- Share an overview about your project. -->
I developed a real-time chat application with key features, and it is fully responsive, making it accessible from mobile UI as well.
features:
-
Real-Time Messaging: The application supports real-time messaging, ensuring that messages sent by users instantly appear in the chat room without delays.
-
File Sharing: The application allows users to upload and share various file types, such as images, PDFs, and documents, using Pinata for secure and decentralized file storage.
-
Chat Rooms: Users have the ability to create, join, and leave chat rooms, making the platform dynamic and user-controlled.
-
Message History: Each chat room maintains a message history, which is stored and made visible to users when they join a room, allowing for continuity in conversations.
-
Google User Authentication: Users can log in and log out seamlessly using their Google accounts, enabled via Firebase Authentication.
-
Private Messaging: Users can also send private messages to other users for one-on-one conversations.
Demo
<!-- Share a link to your application and include some screenshots here. -->
Working: app link
My Code
{%embed https://github.com/binarycoder110/realtime-chat-app %}
More Details
- Users can share images directly by selecting them from their local directory. The application utilizes Pinata IPFS to manage and store these assets in a secure and decentralized manner.
 |
|---|
| Chat window |
- Users can also share PDFs, which are embedded in an iframe, allowing them to view and download the file directly from the chat interface.
 |
|---|
| Group chat |
- Users can join multiple group forums, allowing them to participate in various discussions and collaborate with different communities. This feature enhances user engagement by providing a platform for diverse interactions, enabling users to share ideas, ask questions, and connect with others folks.
 |
|---|
| Join Group |
TechStack Used:
- React JS
- Pinata
- Firebase Realtime Database
- Firebase Firestore
- Firebase Authentication
<!-- Don't forget to add a cover image (if you want). -->
<!-- Thanks for participating! -->
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式