Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pintu544/todoscoketrbacfrontend

Collaborative To-Do Application with Real-Time Updates and User Management
https://github.com/pintu544/todoscoketrbacfrontend

jest react redux redux-toolkit socket-io-client tailwind

Last synced: 29 days ago
JSON representation

Collaborative To-Do Application with Real-Time Updates and User Management

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


    

  1. 

    Clone the repository:
    

    bash
    

    git clone https://github.com/pintu544/Todosocketrback cd Todosocketrback npm install
    

    2. 

  2. 

    Install dependencies for both frontend and backend:
    

    bash
    

    3. 



git clone https://github.com/pintu544/TodoScoketRbacFrontend


cd TodoScoketRbacFrontend


npm install


    

  1. 

    Configure environment variables:
    

      

    • 

      Create a .env file in the backend folder and add:
      

      env
      

      JWT_SECRET=<your-secret-key>  

      SOCKET_PORT=8000 
      


      

      • 

    

    2. 

  2. 

    Start the development servers:
    

      

    • 

      Backend:
      

      bash
      

      npm start`
      

      • 

    • 

      Frontend:
      

      bash
      

      npm run dev`
      

      • 

    

    3. 

  3. 

    Open the application:
    

    Visit http://localhost:5173 in your browser.
    

    4. 





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.
    •