Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ibrsec/chat-app-socket-fs
Fullstack Chat App
https://github.com/ibrsec/chat-app-socket-fs
express jwt mongodb react redux socket-io tailwind
Last synced: 8 days ago
JSON representation
Fullstack Chat App
- Host: GitHub
- URL: https://github.com/ibrsec/chat-app-socket-fs
- Owner: ibrsec
- Created: 2024-08-22T15:57:16.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-09T13:31:05.000Z (2 months ago)
- Last Synced: 2024-10-16T21:03:31.494Z (23 days ago)
- Topics: express, jwt, mongodb, react, redux, socket-io, tailwind
- Language: JavaScript
- Homepage: https://chat-app-socket-fs.onrender.com
- Size: 10 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Full stack Chat App
An awesome Full-stack Chat app with socket.io
View Demo
·
Frontend Repo
·
Backend Swagger
·
Backend Redoc
·
Report Bug
·
Request Feature
📎 Table of Contents 📎
---
[](https://chat-app-socket-fs.onrender.com/)
---
ERD:
[](https://chat-app-socket-fs.onrender.com/)
---
📦 A Fullstack Chat-app Project
🏀 [Frontend Live](https://github.com/ibrsec/chat-app-socket-fs) || [Backend Swagger](https://github.com/ibrsec/chat-app-socket-fs/api/documents/swagger) || [Backend Redoc](https://github.com/ibrsec/chat-app-socket-fs/api/documents/redoc)
FRONTEND:
🎯 React.js Development: Built a responsive and interactive chat interface with React.js, providing a smooth user experience.
🛠 State Management: Utilized Redux Toolkit and Persist to manage user sessions and real-time chat states efficiently.
🚀 Real-time Messaging: Implemented real-time chat features using Socket.io, ensuring instant message delivery and updates.
🔔 User Notifications: Added real-time notifications with Toastify notification sound to alert users of incoming messages.
🔍 User Search: Enabled quick and efficient user search functionality to find chat contacts easily.
📷 Profile Picture Upload: Enabled users to upload their profile pictures.
BACKEND:
🎯 Express.js API: Developed a robust backend with Express.js to handle user authentication, chat message storage, and user management.
📄 API Documentation: Used Swagger for clear API documentation, aiding easy testing.
🔒 Authentication: Implemented JWT-based authentication for secure login and registration processes.
📦 Socket.io Integration: Integrated Socket.io for real-time communication, enabling instant messaging across users.
📊 Database Management: Utilized MongoDB and Mongoose for managing user data, messages, and chat histories.
🛠 Middleware & Error Handling: Added custom middleware for validation and consistent error handling.
🛠 File Uploads: Integrated Multer for handling profile picture uploads and storing them securely.
```sh
# clone the project
git clone https://github.com/ibrsec/chat-app-socket-fs.git
# enter the project directory
cd chat-app-socket-fs
# install dependency
# linux
npm run setup-production
# windows
npm run setup-production-windows
# run
node index.js
```
```diff
+ chat-app-socket-fs (folder)
|---client (folder)
| |
| |---public (folder)
| |
+ | |---src (folder)
| | |---assests (folder)
| | |
| | |---pages (folder)
| | |
| | |---components (folder)
| | |
| | |---app (folder) ---store.jsx
| | |
| | |---features (folder)(slices)
| | |
| | |---router (folder)
| | |
| | |---services (folder)
| | |
| | |---helper (folder)
| | |
| | |---App.js
| | |---Index.js
| | └---Index.css
| |
| |----package.json
| |----package-lock.lock
| |----tailwind.config.js
| └----readme.md
|
+ |---src (folder)
| |---config (folder)
| |
| |---controllers (folder)
| |
| |---errors (folder)
| |
| |---helpers (folder)
| |
| |---middlewares (folder)
| |
| |---models (folder)
| |
| └---routes (folder)
|
|----logs (folder)
|----pics (folder)
|----socket (folder)
|----.env
|----.gitignore
|----index.js
|----package-lock.json
|----package.json
|----swaggerAutogen.js
└----readme.md
```
---
---
Backend
