Queue-Management-App

A full-stack application for managing queues of messages with a REST API backend and a modern web frontend.

Screenshots

Features

• POST /api/{queue_name}: Add a new message to a specified queue.

• GET /api/{queue_name}?timeout={ms}: Retrieve the next message from the queue, with optional timeout support.

• GET /api/queues_details: The frontend displays all available queues and the number of messages in each queue.

• Fetch Next Message: Select a queue, click ‘Fetch Next Message,’ and see the response.

Technologies Used

Frontend:

• ReactJS
• Vite
• TypeScript
• Tailwind
• Redux Toolkit Query
• shadcn/ui
• Radix UI
• React Hook Form
• yup
• Lucide
• ESLint

Backend:

• Node.js
• Express

Installation

To run this application locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/zivab/Queue-Management-App.git

2. Access the project.

   cd Queue-Management-App
   

3. Setup backend environment

    cd Backend
   

4. Install backend dependencies.

    pnpm install
   

5. Start the backend development server.

   pnpm run dev
   

6. The backend will run on port 5000.

7. Setup Frontend environment

    cd Frontend
   

8. Install Frontend dependencies.

    pnpm install
   

9. Start the Frontend development server.

   pnpm run dev
   

10. The Frontend will run on port 3000.

API Endpoints

GET /api/v1/queues_details

• Description: Returns all available queues & amount of messages in each queue
• Response:

{
    "status": "success",
    "data": [
        {
            "queueName": "queue 1",
            "messageCount": 0,
            "createdAt": "2024-09-29T16:15:41.061Z",
            "uuid": "6daf560c-6b76-47e2-a708-ec3c26452645"
        }
    ]
}

GET /api/v1/queues/{queue_name}

• Description:
• Response:

{
    "status": "success",
    "message": "Queue 1 message"
}

GET /api/v1/queues/{queue_name}?timeout=10000

• Description:
• Response:

{
    "status": "success",
    "message": "Queue 1 message"
}

POST /api/v1/queues/{queue_name}

• Description:
• Request Body:

{
    "message": "Second item"
}

• Response:

{
    "status": "success",
    "details": "A new queue {queue_name} was created",
    "message": "Second item"
}

DELETE /api/v1/queues/{queue_name}

• Description:
• Response:

{
    "status": "success",
    "details": "Queue {queue_name} has been deleted successfully"
}

Authors

• @zivab