This content originally appeared on DEV Community and was authored by Binary_codes
This is a submission for the The Pinata Challenge
What I Built
I developed a real-time chat application with the following key 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
Working: app link
My Code
Project Title - Realtime Chat App
Features:
-
Google User Authentication: Users can be able to log in and log out using their Google accounts via Firebase Authentication.
-
Chat Rooms: Users should be able to create, join, and leave chat rooms.
-
Real-Time Messaging: Messages sent by users should appear in the chat room in real time.
-
Share File: It allows users to upload and share various types of files, including images and PDFs using Pinata IPFS.
-
Message History: The chat application should store the history of messages for each chat room, which should be visible to users when they join the room.
-
Private Messaging: Users should be able to send private messages to other users.
Tech Stack
- React JS
- Pinata
- Firebase Firestore
- Firebase Realtime database
- Firebase Authentication
Screenshots
 |
|---|
| Chat Screen |
 |
|---|
| Create Group |
 |
|---|
| Group Chat |
 |
|---|
| Join Group |
 |
|---|
| Login Page |
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
This content originally appeared on DEV Community and was authored by Binary_codes
Binary_codes | Sciencx (2024-10-09T08:36:26+00:00) Real-Time Chat Application with React and Pinata for Effortless Messaging and File Sharing. Retrieved from https://www.scien.cx/2024/10/09/real-time-chat-application-with-react-and-pinata-for-effortless-messaging-and-file-sharing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.