Mini Incident Dashboard

Setup Instructions

1. Clone the Repository

git clone https://github.com/drnhng/mini-incident-dashboard.git
cd mini-incident-dashboard

2. Install Dependencies

npm install

3. Start the GraphQL Server

node server.js

4. Run the React App

npm start

The app should now be running at http://localhost:3000.

---

Structure

/src
  /components                      # UI components
    /DetailedSingleIncident.tsx    # Detailed view for each single incident, appears on click as a modal
    /FiltersBar.tsx                # Filter selection by status and severity
    /IncidentForm.tsx              # Form for adding an incident, appears on click as a modal
    /IncidentList.tsx              # List of SingleIncidents for rendering all the incidents in a table
    /Pagination.tsx                # Pagination UI component
    /SeverityBadge.tsx             # Severity Badge with color coded indicator, used to display severity of an incident
    /SingleIncident.tsx            # Represents a single incident entry in the list

  /context                         # Context for shared state management
  /graphql                         # GraphQL queries and setup
  /hooks                           # Custom React hooks for GraphQL logic
  /styles                          # CSS stylesheets for components
  /types                           # TypeScript types (autogenerated from GraphQL Code Generator)

---

Features

• View a list of incidents with title, description, severity, and status
• Severity level displayed with a color coded badge
• Create new incidents via modal form
• View the modal detail view of an incident by clicking on an incident
• Edit existing incidents in the modal detail view
• Delete 1 or more selected incidents with confirmation
• Filter incidents by severity or status
• Pagination for browsing through incidents (5 per page)
• Reusable UI Components

---

Approach

In my tech stack, I used React, Typescript, GraphQL with Apollo Server, and React Context.

First, I set up the GraphQL backend using Express and Apollo Server, and created mock data based on the sample provided so I could test the frontend. With GraphQL Code Generator, I was able to generate types which i put in the /types folder.

In my frontend design, I made sure to create reusable UI components to avoid code duplication and maintain clean code throughout. The stylesheet for each component is organized under the /styles folder.

I started by creating just the incident feed and a button to add a new incident. I created my own custom React hooks in the /hooks folder for the GraphQL queries and mutations, and connected them to the frontend components. This allowed the query/mutation logic to be abstracted and made reusable.

Once I tested and verified the hooks were properly set up, I implemented the remaining functionality: filtering, deleting, and editing incidents. I decided to allow the user to select multiple incidents for the purpose of batch deleting incidents.

I used a ContextProvider to avoid prop drilling and manage UI states such as selected incidents and filters.

Finally, I implemented a reusable pagination component to allow for browsing incidents in pages of 5.