Skip to content

Fix: About page issue

Lakshmi pavani Challa requested to merge about-page into develop

Overview

This MR fixes the issue where the About page was rendering as a blank screen on the /about route. It ensures stable rendering and proper navigation from both footer and sidebar.

What does this MR do and why?

  • Fixes blank screen issue on About page
  • Improves component stability by handling missing i18n keys
  • Ensures consistent navigation flow
  • Adds test coverage for About page rendering

This change was needed because users were unable to access the About page, impacting usability and giving the impression that the app was broken.

Changes Made

  • Modified AboutPage.tsx to stabilize rendering
  • Verified and updated /about route in App.tsx
  • Fixed navigation from AppLayout.tsx (footer & sidebar)
  • Added fallback handling for missing i18n keys
  • Added unit and route tests

Technical Details

  • Root cause: Component failed to render due to missing/invalid i18n keys
  • Fix: Added fallback-safe rendering and removed fragile dependencies
  • Ensured component renders independently without runtime crash

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature
  • 💥 Breaking change
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • Closes #

Screenshots

BEFORE : Blank screen on /about

image

AFTER

![Screenshot_from_2026-04-02_14-47-15](/uploads/5c6b73302f01059e4dde513d6b1061c8/Screenshot_from_2026-04-02_14-47-15.png

In english image In Telugu image In Hindi image

How to Set Up and Validate Locally

  1. Checkout this branch

  2. Install dependencies:

    bun install

  3. Run the app:

    bun dev

  4. Test:

    • Login to app
    • Click "About" from footer
    • Open sidebar → click "About"
    • Directly visit /about

  5. Expected:

    • About page content should render
    • No blank screen
    • No console errors

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Footer navigation About page loads ✅
Sidebar navigation About page loads ✅
Direct URL access Page renders ✅
i18n fallback No crash, fallback shown ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log/debugger
  • No unused code
  • No duplicate code
  • i18n check passed
  • TypeScript types defined
  • ESLint/Prettier passed

React Best Practices

  • Components properly structured
  • Hooks used correctly
  • Proper state management
  • No unnecessary re-renders
  • Clean event handling

Component Patterns

  • shadcn/ui used correctly
  • Tailwind followed
  • Responsive design considered
  • Accessibility handled
  • Icons consistent

API & Data Fetching

  • Not applicable

Error Handling

  • Errors handled gracefully
  • User-friendly messages
  • No runtime crashes

Documentation

  • README.md updated
  • .env.example updated
  • CHANGELOG.md updated

Known Limitations / Technical Debt

  • Minor dependency on i18n structure remains
  • Further improvements possible with centralized fallback handling

Additional Notes

  • Ensured no hardcoded strings (i18n compliant)
  • Focused on stability and user experience
  • No breaking changes introduced
Edited by Lakshmi pavani Challa

Merge request reports