DEV Community

Hasnain

Posted on Oct 9

Real-Time Chat Application with React and Pinata for Effortless Messaging and File Sharing

#devchallenge #pinatachallenge #webdev #api

This is a submission for the The Pinata Challenge

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.

Working: app link

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.


Chat Screen


Create Group


Group Chat


Join Group


Login Page

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.