Skip to content

feat: Improve Project Data Visualization & Add Structured Information Module

Praveena Veeranki requested to merge wireframe-feature into viswam/frontend

📌 What does this MR do?

This MR introduces a structured Project Insights Module and improves the overall UI/UX of project data visualization in the VISWAM website.

✅ Key Changes:

  • Added About Section (mission, purpose of VISWAM)

  • Introduced card-based project layout

  • Clearly separated:

    • Repository Links
    • Live Demo Links
    • Source Code

  • Created Project Details Page

  • Improved navigation and layout consistency

  • Handled missing data cases (e.g., no live link)

  • Standardized UI structure across all project views

❗ Why is this change needed?

Before:

  • No clear platform introduction
  • Project links were not well differentiated
  • UI lacked structure and consistency
  • Difficult for users to understand and navigate projects
  • No detailed view for individual projects

After:

  • Clear VISWAM identity (About section)
  • Improved project clarity and readability
  • Better user experience and navigation
  • Scalable and consistent UI structure
  • Enhanced developer and contributor usability

🔴 Before (Unstructured UI)

image

  • Mixed project links
  • No clear sections
  • Poor readability

👉 Attach screenshot here (e.g., old project list view)

🟢 After (Improved UI)

image

  • Card-based layout
  • Clear Repo / Live / Source separation
  • Clean and structured design

👉 Attach screenshot here (e.g., new UI with project cards)

🧪 Test Cases

✅ 1. Project Data Separation

  • Repo, Live, Source links are clearly separated
  • No duplication or confusion

✅ 2. Project Card Rendering

  • All projects display in uniform card format
  • Includes title, description, and links

✅ 3. Missing Data Handling

  • Projects without live/source links handled gracefully
  • UI remains consistent

✅ 4. Navigation

  • Clicking project card opens detailed page
  • Data displayed correctly

✅ 5. Responsiveness

  • Works on mobile, tablet, desktop
  • Layout adapts correctly

✅ 6. UI Consistency

  • Same structure across all project pages
  • No layout breaks

✅ 7. Performance (Basic Check)

  • No noticeable lag with multiple projects

📦 Files/Modules Affected

  • components/ProjectCard.tsx
  • pages/Projects.tsx
  • pages/ProjectDetails.tsx
  • components/AboutSection.tsx
  • Styling updates (CSS/Tailwind)

🎯 Expected Outcome

  • Better project data visualization
  • Improved UX and readability
  • Clear and consistent UI structure
  • Foundation for future enhancements (filters, search, analytics)

🔗 Related Issue

Closes: #<issue_number:>

Merge request reports