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

This is a submission for the The Pinata Challenge

What I Built

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

Working: app link

My Code

Hasnain01-hub / realtime-chat-app

Project Title - 2Connect

Features:

1. Google User Authentication: Users can be able to log in and log out using their Google accounts via Firebase Authentication.

2. Chat Rooms: Users should be able to create, join, and leave chat rooms.

3. Real-Time Messaging: Messages sent by users should appear in the chat room in real time.

4. Share File: It allows users to upload and share various types of files, including images and PDFs using Pinata IPFS.

5. 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.

6. 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

View on GitHub

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

Comments

[Ashutosh_dev]

Not responsive.
Take a look at my real-time chat app jeeoracle.netlify.app/app

[Hasnain]

Thank you for your feedback. I have fixed the responsiveness. It appears there is no one-to-one chat feature on your portal.

[Ashutosh_dev]

Yup, I just want to show you the responsiveness of my site.