https://github.com/eduardoss45/task-notifier-demo
Real-time task notifier with Socket.IO, Node.js backend, and interactive frontend.
https://github.com/eduardoss45/task-notifier-demo
fullstack-js nodejs-backend notifications-system real-time-web socket-io
Last synced: 4 months ago
JSON representation
Real-time task notifier with Socket.IO, Node.js backend, and interactive frontend.
- Host: GitHub
- URL: https://github.com/eduardoss45/task-notifier-demo
- Owner: Eduardoss45
- License: mit
- Created: 2025-10-04T22:27:11.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-10-04T22:54:36.000Z (4 months ago)
- Last Synced: 2025-10-05T00:24:23.848Z (4 months ago)
- Topics: fullstack-js, nodejs-backend, notifications-system, real-time-web, socket-io
- Language: JavaScript
- Homepage:
- Size: 24.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 📢 Task Notifier Demo
Demonstration project of **real-time notifications**, developed to showcase integration of a Node.js/Express backend with an HTML/CSS/JS frontend using Socket.IO.
The purpose of this repository is to serve as a reference for implementing a functional, lightweight, and modular real-time notification system for task creation, editing, and deletion events.
---
## 🚀 Technologies and Libraries Used
### Backend
* **Node.js + Express** – HTTP server, routing, and middleware organization.
* **Socket.IO** – Real-time communication (WebSockets), responsible for emitting notification events to all connected clients.
* **MySQL (or SQLite for demo)** – Persistent storage of tasks.
* **dotenv** – Environment variable management.
* **nodemon** – Facilitates development by automatically restarting the server.
### Frontend
* **HTML/CSS/JS** – Structure and logic of the interface.
* **Bootstrap 5** – Visual components and responsive design.
* **Bootstrap Icons** – Visual icons for buttons and interface elements.
* **Socket.IO client** – Receives events from the server and updates the frontend in real time.
---
## 📂 Project Structure
```
task-notifier-demo/
├─ backend/
│ ├─ server.js # Express + Socket.IO server
│ ├─ routes/
│ │ └─ tasks.js # Task CRUD routes
│ ├─ db/
│ │ └─ config.js # Database configuration
│
├─ frontend/
│ ├─ index.html # Main page
│ ├─ app.js # Frontend JavaScript logic
│ ├─ style.css # Custom styles
```
---
## ⚙️ Implemented Features
* **Task Creation** – User submits a task title; backend saves it to the database and emits an event to connected clients.
* **Task Editing** – Task titles can be updated; all clients receive notifications.
* **Task Deletion** – Deleting tasks updates the backend and emits a notification event.
* **Real-Time Notifications** – Toasters display title, description, and event timestamp.
* **Responsive Frontend** – Bootstrap-based layout with dynamic cards and toast container.
---
## 🧩 Communication Flow
1. Frontend connects to backend via **Socket.IO**.
2. **HTTP (fetch) requests** handle task CRUD operations.
3. Backend emits events to all connected clients.
4. Frontend automatically updates cards and displays notifications.
---
## 📌 Requirements and Considerations
* Node.js 18+
* MySQL 8+ (or SQLite as an alternative)
* Local network or server connection for Socket.IO communication
> The frontend was developed modularly, maintaining a clear separation between HTML, CSS, and JS. This simplifies maintenance, integration with future frameworks, and adding features like authentication or notification history.
---
## 🎯 Repository Purpose
* Serve as a **practical demonstration** of real-time notifications.
* Provide an **example of backend Node.js integration with a lightweight frontend**.
* Illustrate best practices for separation of responsibilities and communication via Socket.IO.
* Act as a **base for larger projects**, such as task management systems, corporate notifications, or admin dashboards.
---
## 📚 Dependency Notes
The project keeps separate package.json files for frontend and backend, ensuring dependency isolation and avoiding file path or script execution issues. Each part of the project should manage its own dependencies.
---
## 👨💻 Author
Developed by [Eduardoss45](https://github.com/Eduardoss45)