This project was initiated as part of the Computer Networks course in the Computer Technologies and Information Systems (CTIS) department. The goal was to develop a real-time chat application as part of the course.
Over time, the project was further developed by Hamza Doğan and Nazmi Koçak, evolving into a more comprehensive application. After an extensive development process, the project was successfully completed on March 25, 2025.
The primary purpose of this project was to help the development team successfully complete the course while gaining hands-on experience with a large-scale software implementation.
Our main objective was to create a user-friendly, minimalist, and modern real-time chat application with a smooth and engaging user experience.
This project is designed for software developers, students, employers, and web users who are interested in real-time communication technologies.
- Software developers and students can explore the project's architecture, WebSocket/WebRTC integration, performance optimizations, UI/UX design, and modern website layout to enhance their technical skills or gain inspiration.
- Employers can assess our software development skills, problem-solving abilities, and work discipline by reviewing the project's implementation.
- Web users can experience a fast, user-friendly, and responsive real-time chat application designed for seamless communication, including text, voice, and video chat.
This project serves as an example of how real-time messaging, group chats, multimedia sharing, and voice/video calling can be efficiently implemented in a web-based environment.
- Account creation with email and password.
- Quick login using Google and Facebook.
- Password reset via email.
- JWT Implementation
- Experience real-time individual and group chats.
- Send messages with emojis, files, images, audio files, and AI-generated results.
- Track message statuses: Sent, Delivered, and Read.
- Options to delete messages for everyone or just for yourself, and copy messages.
- See who has received and read the messages in group chats.
- Make one-on-one voice and video calls with users registered on Mingle.
- Mute microphone and toggle speaker on/off.
- View records of voice and video calls in the Calls menu.
- Access details such as call time, duration, and call type.
- Delete call logs if needed.
- The mobile interface is optimized for an enhanced user experience.
- Users can archive their individual chats.
- Archived chats can be deleted or unarchived at any time.
- Create a group by setting a group image, name, and description, and adding users.
- Add, remove, and modify user roles within the group.
- Users with the "admin" role can view, edit, and update group settings.
- Both admins and members can leave the group at any time.
- When a user leaves, their past messages remain visible without any inconsistencies.
- Discover Mingle AI by clicking the star icon in the message input bar.
- Text Generation: Enter a prompt in the input field to generate AI-powered text.
- Image Generation: Choose from Flux, Artples, or Compvis models in the image menu to create custom images.
- If unsatisfied with the result, use the refresh button to regenerate content with the same prompt or clear the input to start over.
- Generated content can be copied, liked, or reattempted for refinement.
- Send images, files, sound, and videos in both individual and group chats.
- Supported file formats: DOC, DOCX, XLSX, TXT, RAR, ZIP, PPT.
- Sent audio and files can be downloaded.
- Profile Information: Edit and update account details.
- Profile Picture: Upload, change, and view profile photo.
- Choose from Dark Mode, Light Mode, or System Default for a customizable experience.
- Select from 8 different chat background themes to personalize your chat.
- Change your password to enhance security.
- Manage and secure your account with a new password.
- Contact support for assistance with account or technical issues.
- Contact Information: For inquiries, reach out via email.
- For project-related inquiries, you can reach out to the development team via Email, LinkedIn and GitHub.
- Developer team details:
- LinkedIn account
- GitHub account
- Email contact
- End-to-end encryption for secure communication.
- All chat messages are encrypted for enhanced privacy.
- Search for specific users, groups, calls, and archives.
- Works well on both desktop and mobile devices.
- Adjusts to different screen sizes for a smooth experience.
- Special design changes for better use on all devices.
- Clean, minimal, and user-friendly interface.
- Smooth transitions and animations for an engaging experience.
- Real-time updates for message seen status, user profile changes, chat modifications, and call logs in both individual and group conversations.
React is a JavaScript library for building user interfaces. It helps create dynamic and reusable components, enhancing the user experience and making the application more maintainable.
ASP.NET is a robust framework for building backend APIs. It serves as the backbone of this project, handling data processing, user authentication, and real-time communication with the frontend.
Firebase Authentication is used to handle user authentication securely. It allows users to sign up and log in using email/password or third-party services like Google and Facebook.
Firebase Realtime Database enables real-time synchronization of data across all clients. It is used to store and manage user data, chat history, call logs, and group records efficiently.
WebSocket provides full-duplex communication channels over a single TCP connection, enabling real-time, bidirectional communication between the frontend and backend, crucial for live messaging and updates.
WebRTC enables real-time peer-to-peer communication, including voice and video calls. It allows users to connect with each other seamlessly for interactive communication.
Sass/SCSS is a powerful and organized version of CSS. It provides advanced features like variables, nesting, and mixins, helping to structure and maintain large-scale CSS more effectively.
Cloudinary is a powerful cloud-based media management service used for storing, optimizing, and delivering images and files. In this project, it handles media uploads, transformations, and fast content delivery, ensuring efficient and scalable asset management.
Vite is a fast and efficient build tool for modern web projects. It enables quick reload and builds, improving the development workflow and integrating smoothly with React.
Netlify is a platform for deploying and hosting the project. It automates the deployment process, ensuring the app is live and served securely on the web.
It is a platform focused on hosting ASP.NET and .NET Core applications. It automates the deployment process, ensuring the app is live and served securely on the web.
- react – The core library for building user interfaces.
- react-dom – Renders React components into the DOM.
- @reduxjs/toolkit – A powerful toolset for managing global state in Redux.
- react-redux – Connects React components to Redux state management.
- @microsoft/signalr – Enables real-time communication between the client and the server.
- firebase – Handles authentication and real-time database operations.
- crypto-js – Provides cryptographic functions for data security.
- date-fns – Simplifies date manipulation and formatting.
- jwt-decode – Decodes JSON Web Tokens (JWT) for authentication.
- marked – Converts Markdown to HTML for rendering formatted text.
- @emotion/react – Enables styling using a CSS-in-JS approach.
- @emotion/styled – Allows for creating styled components with dynamic styles.
- @mui/material – Provides modern and accessible UI components.
- @mui/icons-material – Offers a collection of Material-UI icons.
- react-icons – Offers a collection of icons.
- sass – Enhances CSS with features like variables, nesting, and mixins.
- framer-motion – Adds smooth animations and transition effects.
- react-hot-toast – Displays stylish toast notifications.
- react-h5-audio-player – A customizable audio player for React applications.
- emoji-picker-react – Enables users to select and insert emojis.
- @hookform/resolvers – Integrates schema validation with React Hook Form.
- react-hook-form – A lightweight library for handling form state and validation.
- zod – Provides type-safe form validation.
- react-router-dom – Manages routing and navigation in single-page applications.
- react-datepicker – Provides an interactive and customizable date picker.
The first step was to think about the main purpose of the project and what makes it unique.
We focused on:
- Understanding what problem it solves for users.
- Finding ways to make it different from other chat applications.
- Making sure the idea is realistic, useful, and can grow in the future.
This phase helped us create a clear vision for the project.
In this phase, we analyzed existing real-time chat applications to learn from them.
We focused on:
- Examining how other chat applications work.
- Identifying their weaknesses and missing features.
- Finding useful features that we could adapt and improve.
This research helped us design a more efficient and competitive chat application.
In this phase, we focused on defining the core features of the application and aimed to create a unique and superior user experience compared to existing chat applications. After analyzing the current market and competitors, we identified several key features that would set our project apart.
The application will offer real-time messaging with sent, delivered, and read message statuses, allowing users to always know the status of their messages. Both individual and group chats will be supported, with additional features for group member management, message history, and real-time updates. Voice and video calls will be integrated, with features like muting and toggling the speaker to improve the communication experience.
Additionally, users will have access to AI-powered chat, allowing them to generate text and images directly from the chat interface, offering a modern and interactive experience. File sharing will also be a priority, enabling a wide range of file types to be sent and received in both individual and group chats. To help users better organize their conversations, we will include options for archiving and unarchiving chats, as well as maintaining call logs, which will display details such as call time, duration, and type.
By combining all of these features, we aim to create an innovative and user-centered messaging application that not only meets users' basic needs but also offers advanced functionalities that competitors often lack.
In this phase, we created detailed wireframes and storyboards for the application's user interface and experience. Using Figma, we designed an intuitive and visually appealing chat application. The designs were optimized to ensure user-friendly navigation and smooth interactions.
Storyboards helped us plan the user flow, ensuring that each feature would be accessible and easy to use. The designs were shaped according to the project's requirements and goals.
Once the designs were finalized in Figma, preparations were made for their integration into the project, and the visual designs will be adapted accordingly.
In this phase, we focused on selecting the best technologies to help the project reach its goals. Our main aim was to make sure the app is scalable and efficient, and can handle real-time communication, security, and smooth performance.
We looked at different technologies to see if they could meet needs like real-time messaging, user authentication, and performance optimization. After reviewing the options, we chose the best technologies that would allow us to develop a secure, scalable, and smooth-working app.
This phase was an important step for the whole project. By choosing the right tools and frameworks, we made sure the app could be developed effectively and meet both user and technical needs.
In this phase, after finalizing all the ideas, resources, and technologies to be used, as well as completing the initial planned designs, we began the project. This stage involved setting up the project environment, installing necessary dependencies, and configuring the project structure to ensure everything was ready for development.
By making sure all configurations and setups were in place, we ensured a smooth start to the coding process and the overall development of the project.
In this phase, we focused on creating a clear and organized folder structure for the project. The goal was to make it easy to manage and navigate through the project’s files. We carefully decided how to organize the codebase, making sure that the folders were logically named and categorized.
By setting up the folder structure in an efficient way, we ensured that the project would be scalable and maintainable in the long run. This organization helped both the development team and future contributors easily find and update the necessary files without confusion.
To manage the development process effectively, we divided the project into different phases. Each phase focused on a specific feature or improvement, ensuring a structured and step-by-step approach.
We first prioritized the core features, such as real-time messaging and authentication. Then, we planned additional functionalities like group chats, file sharing, and voice/video calls. This helped us stay organized and work efficiently without overwhelming the development process.
We also identified reusable components that could be used across the project, making development faster and maintaining consistency in the UI. By breaking the project into clear phases, we ensured a smooth and well-structured workflow.
This phase is where we started writing the actual code for the project. Based on the planned workflow and priority order, we developed each feature step by step.
One of the most important tasks in this stage was transforming the UI designs from Figma into real React components. We carefully translated each screen, ensuring that the design was accurately implemented while keeping the code clean and reusable. This process required attention to detail, especially in styling, responsiveness, and component structure.
During this stage, we also researched the best methods to implement different features. We explored various libraries and npm packages to make development easier and more efficient. For example, we looked for solutions for real-time messaging, authentication, and file sharing. If we needed a feature that didn’t have a ready-made solution, we built it from scratch.
We continuously tested each part as we coded to ensure everything worked correctly. This phase was the most time-consuming but also the most important, as it turned our ideas and plans into a working application.
Additionally, some new feature ideas came up during development that were not included in the original designs. Instead of implementing them immediately, we decided to leave them for the next phase, where we would evaluate the progress and decide how to integrate these improvements effectively.
As the coding process continued, we regularly stopped to evaluate the completed features and discuss possible improvements. This phase was important for ensuring that everything was working as expected and aligned with our initial goals.
We tested different parts of the application, reviewed the user experience, and checked for any performance issues. If we found areas that could be improved, we discussed possible solutions and adjusted our approach.
During this phase, we also revisited the new feature ideas that came up while coding. We carefully analyzed whether these features would add real value to the project and if they were feasible to implement. Some of them were added immediately, while others were planned for future updates.
By continuously evaluating our progress, we ensured that the project stayed on the right track and delivered the best possible user experience.
At this stage, we finalized all the planned features and ensured the application was fully functional. After implementing the core functionalities, we carefully reviewed the entire codebase to eliminate unnecessary code and improve overall efficiency.
We then moved on to the performance optimization phase, where we researched different methods to enhance speed and responsiveness. This included:
- Reducing unnecessary re-renders in React components.
- Optimizing API calls to minimize network usage.
- Improving state management for better memory and performance efficiency.
- Lazy loading components and assets to improve load times.
Additionally, we analyzed potential performance bottlenecks and researched various optimization strategies to ensure smooth operation under different conditions. By the end of this phase, the core development work was officially completed, and the project was prepared for the next critical step:
Performance and Optimization, where we focused on enhancing the overall performance and ensuring the application runs smoothly under all conditions.
During this phase, we focused on making the application more sustainable and efficient by implementing various performance optimization techniques. Our goal was to ensure the application runs smoothly and efficiently, providing a seamless user experience. Here are some of the methods we applied to improve performance:
-
Image Optimization: We converted PNG and JPG images to WEBP format, which reduces file sizes by up to 84.5%. This made the images load faster, improving overall page speed and reducing bandwidth usage.
-
Preventing Unnecessary Re-renders: We worked on reducing unnecessary re-renders caused by useEffect by optimizing dependencies. This helps in avoiding excessive rendering of components, making the app more responsive and faster.
-
useDebounce Hook: For search operations, we used the useDebounce hook to prevent continuous data queries every time a user types. This helped to avoid unnecessary fetch calls, improving the efficiency of the app.
-
Tree Shaking: We implemented tree shaking, which removes unused imports, code fragments, and whitespace from the project. This ensures that only the necessary code is included, making the final bundle smaller and faster to load.
-
Static File Caching: We used static file caching for assets like CSS, JavaScript, and images. By caching these files on hosting platforms like Netlify, the app loads faster on subsequent visits, as the user's browser can use the cached files instead of downloading them again.
These optimizations helped improve the overall speed, performance, and user experience of the application, ensuring that it works smoothly under different conditions and can handle more users effectively.
At this stage, we focused on ensuring the security, stability, and reliability of our application before making it available to real users.
One of the most critical aspects of this phase was securing user data and preventing unauthorized access. Since we used Firebase, we implemented strict Firestore security rules to control data access and ensure that users could only interact with the data they were authorized to. We carefully defined these rules to protect personal information, messages, and other sensitive data.
To understand how the application performs in real-world scenarios, we conducted tests with real users. These tests helped us gather valuable feedback and identify any unexpected behaviors that might affect the user experience.
We performed various test cases to ensure the system worked seamlessly across different conditions, including:
- Multi-device testing – A single user logging in from multiple devices (e.g., phone, tablet, and desktop) to verify real-time synchronization.
- Cross-browser testing – Running the app on different browsers (Chrome, Firefox, Edge, Safari) to check for compatibility issues.
- Network conditions testing – Evaluating how the app handles slow or unstable internet connections.
Throughout this phase, we monitored system behavior, analyzed logs, and fixed any detected issues to ensure our authentication, real-time messaging, and security systems worked flawlessly.
With security and stability confirmed, we were ready for the next step:
Deployment Phase, where we prepared to launch our application for public use.
The deployment phase is the final step before making the project publicly available. During this stage, we focused on deploying the frontend of our application to a reliable hosting platform, ensuring that everything was fully functional and ready for real-world use.
We chose Netlify as our deployment platform for hosting the frontend of the application. Netlify provides seamless integration with Git repositories and allows for automatic deployment whenever changes are made to the codebase. The process was smooth, but we did face some challenges along the way.
During the deployment, we encountered some issues related to build processes and routing. We worked through these challenges by adjusting our build configurations and fixing routing issues to ensure proper navigation throughout the application. This involved tweaking Netlify configuration files to correctly handle client-side routing for single-page applications (SPA).
We also updated and configured CORS (Cross-Origin Resource Sharing) settings across the project to allow safe interaction between the frontend and backend services. This was essential to ensure that data could flow correctly between the client and server, even when hosted on different domains or environments.
By resolving these issues, we successfully deployed the project, making sure everything worked correctly, from data handling to real-time communication. The application is now live and functioning smoothly, ready for users to start interacting with it.
With the deployment complete, we moved on to the final phase: User Feedback and Maintenance Phase, where we monitor user interactions and improve the application further.
This phase focuses on gathering real user feedback, suggestions, and addressing any bugs or issues that arise after the deployment of the application. It's an ongoing process where we continuously monitor the application's performance in real-world conditions.
After launching the app, we encouraged users to provide feedback on their experience, which helped us identify areas for improvement. Based on this feedback, we worked on fixing bugs, improving user interface elements, and optimizing the overall experience.
We also monitored the application to catch any unforeseen issues or bugs that might not have been detected during the testing phase. Once identified, we swiftly addressed these issues to ensure that the application remained stable and user-friendly.
This phase is crucial because it ensures the application keeps evolving to meet user expectations and remains reliable in the long term. By implementing user feedback and regularly improving the app, we maintained high levels of user satisfaction and ensured continuous progress in the development process.
-
Release Date: 25.03.2025
-
Last Updated: 29.03.2025 🕟 12:00
-
Version: 1.000.0.0
-
License: MIT License
-
Supported Browsers:
The project is compatible with popular web browsers like Chrome, Firefox, Safari, and Edge in their latest versions. -
Project Link:
Access the project by clicking Here. -
Developers:
The frontend of the project was developed by Hamza Doğan. For more information about the developer, please visit the LinkedIn Profile.
The backend of the project was developed by Nazmi Koçak. For more details, you can visit the backend repository. -
Feedback and Support:
If you have any feedback or need support, feel free to contact me at [[email protected]].
For questions or issues related to the backend, you can reach out to Nazmi Koçak at [[email protected]].