Swingyy: Real-Time Chat Application 🚀

Table of Contents 📚

• Features
• Technologies
• Installation
• Usage
• Screenshots
• License

Features 🌟

• User Authentication: Sign up, log in, and log out functionalities.
• Friends List: View and manage your list of friends.
• Real-Time Messaging: Send and receive messages instantly.
• Message Status: Mark messages as seen or unseen.
• User Status: Monitor the online/offline status of friends.
• Profile Management: Upload and display your profile picture.

Technologies 💻

Frontend

• React
• React Router
• Axios
• Socket.IO Client

Backend

• Node.js
• Express.js
• MySQL
• Socket.IO
• Docker

Styling 🎨

• CSS

Cloud Services (Google Cloud Platform) ☁️

• Cloud Build: CI/CD pipeline
• Cloud Run: Serverless deployment
• Cloud SQL: MySQL database
• Firebase: Google Authentication
• Artifact Registry: Docker container registry
• Cloud Storage: File storage
• Docker 🐳

Installation

1. Clone the Repository

   git clone https://github.com/your-username/Swingyy.git

2. Navigate to Project Directory

   cd chat-app

3. Install Dependencies

   • Frontend:

     cd client
     npm install

   • Backend:

     cd Server
     npm install

4. Configuration

   • Update MySQL connection details in backend/config/db.js.
   • Update Socket.IO server URL in frontend/src/utils/socket.js.

5. Start Development Servers

   • Backend:

     cd client
     npm start

   • Frontend:

     cd Server
     npm start

   Open http://localhost:3000 in your browser.

Usage

1. Sign up or log in.
2. You'll be redirected to the chat interface.
3. Your friends list appears on the left; click a friend to start chatting.
4. Messages are real-time and auto-scroll to the latest.
5. Click messages to mark as seen or unseen.
6. Log out via the "Logout" button in the top-right corner.

Screenshots

License

This project is licensed under the MIT License.