surtr1st/resendo

Real-time chat application

Table of Contents

1. Introduction
2. Features
   • Implemented Features
   • Unfinished Features
3. User Interface
4. Technical Implementation
5. Conclusion

1. Introduction

• Resendo is a real-time chat application, just like other chat applications which are Telegram, WhatsApp, Messenger, etc.
• Resendo is created via my interest about making a real-time application, with the intention of learning about socket, how socket works, how to implement it, etc.

2. Features

Implemented Features

• Message: Users can send and receive messages sent by other users, as well as anyone in the group. There are two types of chats: peer-to-peer chat and group chat, typing indicator is also implemented for each type.
• Request: Users can send friend requests to other users, and those other users could either accept or reject the request.
• Group: Users can create groups without a single member, and they can add and remove members.
• Profile: Users can customize their own profiles, but this is limited.
• Authentication: Easy registration and login, only need email to login.
• Media: User can send media such as images, videos (limit: 10MB).
• Notification: A real-time notification whenever the users receives a message.

Unfinished Features

• Group notification: Exactly like Notification but in group.
• Chat audio: A sound effect is played whenever the notification is appended.
• Friend request indicator: A notification about friend request whenever users have request.

3. User Interface

Chat Layout

4. Technical Implementation

• In order to make this application, what I have used to accomplish it:
  • Vue.js: An open-source front-end JavaScript framework used for building user interfaces and single-page applications.
  • Express.js: A popular open-source web application framework for Node.js.
  • Socket.IO: Esstential module, a real-time, bidirectional, event-driven framework for building scalable network applications in JavaScript.
  • Mongoose: An ODM for connect and to work with MongoDB databases by defining schemas, models and managing relationships between data.
  • Cloudinary: A cloud-based media management solution that provides an end-to-end image and video management service, including upload, storage, administration, manipulation, optimization, and delivery.

5. Conclusion

• This project has finished after a month (05/03/2023 to 05/04/2023), and there were plenty of things that I experienced:
  • The struggle from the client side: Literally the most thing I've suffered when it comes to front-end is design and making the user interface for the app. It's due to my lack of creativity and incomplete visualization. At first, the client was made in React, but the inefficiency in performance caused me to migrate to Vue, and the migration really took a lot of time to complete. The responsiveness is awful and drives me crazy.
• What I've learned:
  • Always have a blueprint before diving into making user interfaces.