Chatwave is a web-based real-time chat application designed to enable seamless communication between multiple users. The application allows users to authenticate, view online participants, and exchange messages through both group and private chats, all within a clean and intuitive interface.
Chatwave is built using plain JavaScript, HTML, and CSS, focusing on simplicity, usability, and maintainability.
Real-Time Communication
Chatwave enables instant message exchange, allowing users to communicate efficiently.
Simplicity & Performance
Built using vanilla JavaScript, HTML, and CSS, the application avoids unnecessary complexity while maintaining responsiveness and cross-browser compatibility.
User-Centered Design
A clean and intuitive interface ensures a smooth user experience, making it easy to navigate chats and manage user interactions.
Persistent Data Storage
Chat messages and user data are stored locally to ensure conversation history is retained after page refresh.
Chatwave is a simple real-time chat application that allows authenticated users to communicate through group and private messaging. The system is designed to simulate real-time interaction using client-side technologies and local storage mechanisms, making it suitable for lightweight deployments and academic evaluation.
- Users can sign up with a unique username and password.
- Users can log in using valid credentials.
- Users can log out of the application.
- Non-existing users are denied access.
- Users have a unique profile identified by their username.
- Usernames must be unique across the system.
- Users can view their profile information.
- User session state is managed on login and logout.
- Users can send and receive messages in a shared chat room.
- Messages are displayed instantly to all active users.
- Users can send and receive private messages to specific users.
- Private messages are visible only to the sender and recipient.
- The application displays a list of users currently online.
- Online status is updated dynamically on login and logout.
- Chat messages are persisted using
localStorage. - Messages remain available after page refresh.
- User data is stored in JSON format for structured retrieval.
- Each chat message displays a timestamp.
- The interface is responsive and cross-browser compatible.
- Semantic HTML and well-organized CSS are used throughout the application.
- Follow the link:
https://rrusso15.github.io/chatwave/
-
Clone the repository:
git clone https://github.com/RRusso15/chatwave.git
-
Navigate into the project directory:
cd chatwave -
Open
index.htmlin a web browser
(No additional dependencies or frameworks required)
- Push the project to the
mainbranch. - Enable GitHub Pages in repository settings.
- Select the root directory as the source.
- Access the application using the provided GitHub Pages URL.
- Plain JavaScript, HTML, and CSS only (no frameworks or libraries).
- Clean coding principles are followed to ensure readability and maintainability.
- Semantic HTML is used for accessibility.
- CSS is modular and well-organized.
- Regular commits with meaningful messages.
- Feature-based branching strategy is used.
- GitHub Issues are used to track features, planning tasks, and bugs.
- A GitHub Project board is used to monitor progress.
- Milestones define major development phases.
- Pull requests require facilitator review before merging into
main.
- User typing indicators.
- Username change functionality.
- Message formatting options (bold, italic).
- Data encryption for stored JSON data.
This project is developed for academic purposes as part of a graduate program assignment.