Skip to content

feat: add corpus account integration and media upload support in EHRS frontend

Damanagari Sathwika requested to merge feat/event-gallery into develop

Overview

Integrated Corpus account connection and media upload support into the EHRS frontend application for medical camp event management.

This MR adds the frontend workflow for connecting volunteer Corpus accounts and enabling medical camp media uploads through the EHRS interface.

What does this MR do and why?

feat: add corpus account connection and media upload integration in EHRS frontend

This MR introduces the frontend integration layer for connecting EHRS volunteers with the Corpus platform.

The main goal of this change is to prepare the Event Gallery workflow by allowing volunteers to:

  • connect their Corpus accounts
  • authenticate using phone number and password
  • upload medical camp related images/videos from the EHRS UI

The implementation reuses the existing frontend architecture, API utilities, routing structure, and UI patterns already present in the EHRS application.

The integration flow follows: Frontend → EHRS Dev Server/API Layer → Corpus Services

This keeps the frontend clean and avoids direct external API exposure.

Changes Made

Volunteer Profile

  • Added "Connect Corpus Account" section

  • Added:

    • phone number input
    • password input
    • connect account button
    • connected state badge

Media Upload

  • Added upload support for:

    • images
    • videos

  • Added upload form integration for medical camp media

  • Added loading states and error handling

  • Added upload success feedback

UI/UX

  • Added responsive upload components
  • Added improved volunteer profile integration flow
  • Reused existing Tailwind and shadcn/ui patterns

Technical Details

Authentication Flow

  1. Volunteer enters Corpus credentials
  2. Frontend sends authentication request through existing API layer
  3. Successful connection updates volunteer UI state
  4. Connected status badge is displayed

Upload Flow

  1. Volunteer selects image/video

  2. Frontend sends multipart/form-data request

  3. Upload request includes:

    • medical-camp category metadata

  4. Upload state and responses are handled through the existing frontend API utilities

Architecture Decisions

  • Reused existing frontend routing and API structure
  • Avoided direct raw external API usage inside UI components
  • Followed current project component and state management patterns
  • Kept implementation modular for future Event Gallery expansion

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

#338 (closed)

## Before ##
Screenshot_from_2026-05-17_15-06-30
Screenshot_from_2026-05-17_15-07-23

| Volunteer profile without Corpus integration |

## After ##
Screenshot_from_2026-05-17_14-46-16!
Screenshot_from_2026-05-17_14-52-20
Screenshot_from_2026-05-17_15-01-58
Volunteer profile with Corpus account connection and upload support

How to Set Up and Validate Locally!

  1. Pull this branch / checkout MR

  2. Install dependencies:

bun install
  1. Update environment variables if required:
VITE_CORPUS_SERVER_URL=https://api.corpus.swecha.org
  1. Run development server:
bun dev
  1. Navigate to:
Volunteer Profile Page
  1. Test:
  • Corpus account connection
  • media upload flow
  • upload validations
  • loading/error states

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Connect valid Corpus account Successful connection state shown ✅
Upload medical camp image Upload request triggered successfully ✅
Upload medical camp video Upload request triggered successfully ✅
Invalid credentials Proper error handling shown ✅
Loading state handling Upload/auth loading UI displayed correctly ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No duplicate code and use of existing components for reusability
  • Tailwind and shadcn/ui patterns reused consistently
  • ESLint and Prettier checks pass

React Best Practices

  • Components are properly split and reusable
  • Hooks follow React rules
  • State management follows existing project patterns
  • Loading and error states handled appropriately

Error Handling

  • User-friendly error messages displayed
  • Upload failures handled gracefully
  • Authentication failures handled properly

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)

Known Limitations / Technical Debt

  • Event Gallery media listing is pending
  • Volunteer uploaded media feed is pending
  • Some lint warnings/errors remain in test files and require cleanup

Additional Notes

This MR focuses only on the EHRS frontend integration and UI workflow for Corpus account connection and media upload support.

Edited by Damanagari Sathwika

Merge request reports