Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pintu544/todosocketrback
Collaborative To-Do Application with Real-Time Updates and User Management
https://github.com/pintu544/todosocketrback
express jest mongodb nodejs socket-io
Last synced: about 1 month ago
JSON representation
Collaborative To-Do Application with Real-Time Updates and User Management
- Host: GitHub
- URL: https://github.com/pintu544/todosocketrback
- Owner: pintu544
- Created: 2024-11-18T09:18:48.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-18T09:54:28.000Z (about 1 month ago)
- Last Synced: 2024-11-18T10:56:14.492Z (about 1 month ago)
- Topics: express, jest, mongodb, nodejs, socket-io
- Language: JavaScript
- Homepage: https://todosocketrback.onrender.com
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Collaborative To-Do Application with Real-Time Updates and User Management
Project Overview
This application is a collaborative To-Do List platform where users can manage tasks, track real-time updates, and collaborate efficiently. With role-based access control, users are categorized as “Admin” or “User” to ensure permissions are managed effectively. Real-time updates enable dynamic interaction, and an intuitive interface streamlines task management.
Features
Authentication & Authorization
- JWT-based authentication for registration, login, and logout.
Role-based access control:
Admins: Manage all tasks.
Users: Manage only their tasks.- Secure password storage using bcrypt hashing.
Task Management (CRUD)
- Create, Read, Update, and Delete (CRUD) tasks with attributes:
- Title
- Description
- Due date
- Status (To Do, In Progress, Done)
- Assigned user
- Validation to ensure tasks include a title and due date.
Real-Time Collaboration
- Real-time task updates using WebSockets (Socket.io).
- Notifications for task changes (e.g., “Task marked as completed by UserX”).
Frontend (React)
- Responsive and intuitive UI built with React.
- Features include:
- Task list views with sorting and filtering (by due date or status).
- Forms for creating/editing tasks.
- Global state management via Redux or React Context.
Activity Log
- Tracks user actions (e.g., task creation, updates, deletions).
- Displays logs in an accessible format (e.g., “UserX marked TaskY as completed on [timestamp]”).
Notifications
- Real-time toast notifications for:
- Task updates.
- Tasks nearing their due dates (assigned to the current user).
- Mark notifications as read.
Testing
- Backend tested using Jest and Supertest.
- Frontend components tested with React Testing Library.
- Real-time WebSocket connections tested to ensure seamless updates.
Tech Stack
Frontend
React for UI development.
Redux or React Context API for state management.
Material-UI (MUI) or CSS Modules for styling.Backend
Node.js with Express.js for the API.
MongoDB for data storage.
Socket.io for real-time WebSocket communication.Testing
Jest, Supertest, and React Testing Library.
Installation
Prerequisites
- Node.js (v16+)
- MongoDB (local or cloud instance)
Setup Instructions
Clone the repository:
bash
git clone https://github.com/pintu544/Todosocketrback cd Todosocketrback npm install
Install dependencies for both frontend and backend:
bash
git clone https://github.com/pintu544/TodoScoketRbacFrontend
cd TodoScoketRbacFrontend
npm install
Configure environment variables:
Create a
.env
file in thebackend
folder and add:env
JWT_SECRET=<your-secret-key>
SOCKET_PORT=8000Start the development servers:
Backend:
bash
npm start`
Frontend:
bash
npm run dev`
Open the application:
Visithttp://localhost:5173
in your browser.
Folder Structure
Frontend
src/
components/
– Reusable React components.context/
– Context API for state management.pages/
– Page-level components (e.g., Home, Login).utils/
– Helper functions.Backend
models/
– MongoDB models (e.g., Task, User).routes/
– API endpoints.controllers/
– Request handlers.middlewares/
– Authentication and error handling.tests/
– Backend test cases.