ankitrout2903 / swingyy Goto Github PK

Swingyy Chat App Swingyy is a real-time chat application that allows users to connect and communicate with their friends instantly. With Swingyy, you can send and receive messages in real-time, mark messages as seen or unseen, and stay updated with the online/offline status of your friends. Features: - User authentication: Sign up, log in, and lo

Home Page: https://swingyy-c0af7.web.app/

License: MIT License

JavaScript 79.81% HTML 2.52% CSS 17.67%

expressjs hacktoberfest mysql nodejs reactjs socket-io docker

swingyy's Introduction

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.

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 🎨

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
```

Configuration
- Update MySQL connection details in backend/config/db.js.
- Update Socket.IO server URL in frontend/src/utils/socket.js.
Start Development Servers
- Backend:
```
cd client
npm start
```
- Frontend:
```
cd Server
npm start
```
Open http://localhost:3000 in your browser.

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.

swingyy's People

Contributors

Stargazers

Watchers

Forkers

debshibraj123 saumya-14 villain45 jaiakash gauravtomar7 aenaghai fardin7864 fjuren pratikdate himanshuc22 v-nsh ayush-tibrewal

swingyy's Issues

After login navbar design

After log in navbar will change and show some more valid data and need to look more professional .

New Login Page

Will be changing the UI of the login page

CHNAGE THE UIUX OF THE README AND ADD SEARCH ENGINE OPTIMIZED WORD

@jaiakash @ankitrout2903 @sb-decoder PLEASE ASSIGN MW THIS ISSUE UNDER HACKOCTOBER FEST

Improve the readme of repo.

Have screenshots at the top.
Fix missing images in the readme.
Fix the styling of the readme.
Etc

The whole flow is breaking the container is not taking proper width

unable to recieve message on realtime basis

may be message.jsx or socket.js is problem if you can fix it

Modern UI Of Login page.

I want to apply some styles to make the "/login" page to make it look like a professional webpage.
For Example the text "Sign up with google" looks a bit compressed. I will remove the minor UI bugs and make it a clean UI.

Navbar is not responsive on mobile view

Unused APIs

well I went through the code and saw a couple of issues, you've created APIs for login and registration but not using it ig? You are trying to show everyone on the DB except the user himself on the friends list, but I don't see you storing these registered people? Also I don't see any option to add friends too.

Display username instead of email

In the "Chat" page, I think it would be better to display the username instead of email in the "Logged in as ..." at the navbar. I'd like to work on this.

Register button on the Login Screen

There should be signup/register button or link on the login screen itself. This will enable users to register if they don't have an acount from the login screen itself.

Optimize Home Page

Assign me this issue so I can perform following task:

Better UI for home page
Users profile picture

Minor update to README

When setting up my workspace, I ran into a minor inconvenience following the readme.

Suggest changing git clone https://github.com/your-username/chat-app.git to git clone https://github.com/your-username/Swingyy.git

Please tag with hacktoberfest and assign to me @ankitrout2903.

suggestions: Instead of merging u can use squash and merge which will create more clearer git history + why are we storing all auth credentials in local storage we can use only relevant data