Real-Time Messaging App

This Real-Time Messaging App called Relay is developed using the MERN stack (MongoDB, Express.js, React, Node.js), enabling seamless real-time communication between users. I built this project not only to create a functional messaging app, but also to challenge myself and deepen my understanding of full-stack development. I learnt a lot about real-time data handling with Socket.io, as well as how to implement robust user authentication, and create a dynamic user interface using React and Tailwind CSS. This experience allowed me to build and grow my problem-solving skills, and gain experience with the design and architecture of real world web applications.

Live Demo

Experience the app live at this link. Login with email: demoUser@email.com and password: 123456 Feel free to test its features and functionality. (It may take some time to launch due to hosting).

Key Features & Technologies

User Authentication

Secure login and signup functionality is implemented using JWT and bcrypt with Express.js, ensuring that user data is protected and accessible only to authorized users.

Real-Time Messaging

Utilizing Socket.io, users can send and receive messages instantly, enhancing their experience with real-time interactions.

Dynamic User Interface

The frontend is designed with React and Tailwind CSS, incorporating DaisyUI components for a responsive and visually appealing interface.

Media Sharing

Users can share text messages and images in real time, showcasing a seamless multimedia communication experience.

User Status Display

Real-time online status indicators are integrated, allowing users to see who is available for chat, implemented using Socket.io for efficient data handling.

Profile Management

A user profile page allows users to update their information and change profile pictures.

Theme Customization

A settings page enables users to choose from a range of pre-set themes using DaisyUI, providing flexibility and customization in design.

Technologies Used

• Frontend:
  • React: For building interactive user interfaces.
  • Tailwind CSS: For styling with utility-first CSS.
  • DaisyUI: To provide pre-designed UI components for faster development.
• Backend:
  • Node.js: For server-side JavaScript execution.
  • Express.js: To create robust RESTful APIs.
  • Socket.io: For enabling real-time bidirectional communication.
• Database:
  • MongoDB: For storing user data and chat messages efficiently.
• Deployment:
  • Render.com: For hosting the live demo