Engineering case study

Volunteer Portal

Building admin reports and volunteer profile workflows

I implemented the complete frontend workflows for the Network Portal Admin Dashboard and Global Profile, connecting administrative reporting, profile management, and volunteer activity to their supporting APIs.

My role
Frontend Engineer
Delivery period
January–June 2026
Source code
Private

At a glance

Problem
Connect configurable admin reports with practical profile and participation workflows.
My ownership
Network Portal Admin Dashboard and Global Profile frontend workflows, with supporting API integration.
Key decision
Keep table settings and exports consistent, and refresh shared profile state after photo uploads.
Outcome & evidence
Delivered the frontend phase in January–June 2026. Client feedback was positive; no formal impact metrics were collected.

The illustrations show a redesigned presentation of the current implementation using sample data. The delivery account describes my January–June 2026 work.

The project

Volunteer Portal helps organizations publish opportunities, manage participation, and operate branded portals. Administrators need useful reports, while volunteers need a place to manage their profile and review their participation.

My responsibility

My work covered administrative interfaces and reporting, profile management, profile-photo editing, and the My Activity timeline, including integration with the supporting APIs.

This case study covers the frontend phase I delivered during January–June 2026, focusing on configurable admin reports, the photo editor, and the activity timeline.

Frontend stack: Next.js, React, TypeScript, Mantine UI, and Tailwind CSS, with Redux Toolkit for report data integration and react-easy-crop for photo editing.

Reports: keeping table controls and exports consistent

Admin reports combined selectable columns, filters, sorting, pagination, and CSV export. The challenge was making these controls work together while keeping their responsibilities clear.

Report configuration and export

  1. Choose fields

    Column visibility controls the table and CSV fields. At least one column stays visible.

  2. Filter and sort records

    Apply the criteria and sort order, then return to page one.

  3. Browse or export

    Pagination controls the visible page. CSV export uses the selected fields across the filtered, sorted result set.

Choose report columns

Volunteer Portal: Choose report columns (desktop)
1 / 2

I managed column visibility separately from applied filters. Administrators could choose which fields to see without changing the records they were working with. I also prevented the last visible column from being hidden, so the table always retained at least one field.

In the delivered version, filtering, sorting, and pagination were handled through API requests. Applying filters or changing the sort order returned the table to the first page, keeping pagination consistent with the updated result set.

For CSV export, I used the current column selection and the filtered, sorted records across the result set, rather than limiting the export to the visible page. The exported fields matched the administrator’s choices in the table.

Profile photos: from selection to an updated avatar

Updating a profile photo involved more than selecting a file. I built an editor where volunteers could choose a supported image, adjust its crop and zoom, and upload the cropped result.

Profile-photo update workflow

  1. Select and preview

    Choose a supported image, then adjust its crop and zoom.

  2. Upload the cropped image

    Show file and upload errors inside the editor; confirm before discarding a selection.

  3. Refresh the shared avatar

    Update profile state and add a timestamp to the image URL after a successful upload.

Crop & zoom a profile photo

Volunteer Portal: Crop & zoom a profile photo (desktop)
1 / 2

File rejection and upload failures appeared inside the editor, giving users feedback at the point where they were making the change. I also added confirmation before discarding a selected image.

After a successful upload, I updated the shared profile state and appended a timestamp to the avatar URL. This prompted the browser to display the new photo instead of reusing a cached version.

Temporary preview URLs were cleaned up when the selected image changed or the component unmounted, keeping the preview lifecycle tied to the editor.

My Activity: bringing participation records into one timeline

Volunteer participation came from different records. I combined the existing activity data with additional signup and logged-time entries, mapped them into a common display structure, and organized them into date groups.

Volunteer activity timeline

Volunteer Portal: Volunteer activity timeline (desktop)

Each entry could show an activity-specific icon, a description with links, and its time. The common structure let different kinds of participation appear together in a consistent timeline.

I provided fallback icons for entries without a recognized icon and an empty state for volunteers who had no recorded activity.

Delivery and client feedback

I delivered the frontend phase covering configurable admin reports, profile-photo editing, and the My Activity timeline.

During a client review, administrators said that choosing report columns and exporting those fields helped them prepare reports. Reviewers also confirmed that the photo-cropping preview made it easier to adjust a profile picture before uploading.

This is qualitative feedback from the review. I did not collect formal impact metrics.