Swingyy: Real-Time Chat Application 🚀
Swingyy is a robust chat application that enables real-time messaging between users. It comes with a range of features including user authentication, friends list management, and message status tracking.
Table of Contents 📚
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
-
Clone the Repository
git clone https://github.com/your-username/Swingyy.git
-
Navigate to Project Directory
cd chat-app
-
Install Dependencies
- Frontend:
cd client npm install
- Backend:
cd Server npm install
- Frontend:
-
Configuration
- Update MySQL connection details in
backend/config/db.js
. - Update Socket.IO server URL in
frontend/src/utils/socket.js
.
- Update MySQL connection details in
-
Start Development Servers
- Backend:
cd client npm start
- Frontend:
cd Server npm start
Open
http://localhost:3000
in your browser. - Backend:
Usage
- Sign up or log in.
- You'll be redirected to the chat interface.
- Your friends list appears on the left; click a friend to start chatting.
- Messages are real-time and auto-scroll to the latest.
- Click messages to mark as seen or unseen.
- Log out via the "Logout" button in the top-right corner.
Screenshots
License
This project is licensed under the MIT License.