Skip to content

docs: add detailed UI implementation guide

SandhyaRani Bandaram requested to merge ui-implementation-notes into UI

Summary
This merge request adds a comprehensive documentation file that explains how the VISWAM.ai website UI is implemented across the entire frontend. The goal is to give a clear, structured view of the application architecture, the technologies used, and how each routed page is built from the shared design system and page-specific components.

What was added

  • A new root-level documentation file: UI_IMPLEMENTATION_CHANGES.md
  • A detailed explanation of the frontend technology stack
  • A breakdown of the app shell and global UI architecture
  • A description of the shared styling system and reusable UI components
  • A page-by-page implementation guide for every routed page in the application
  • A clear explanation of the data flow between the frontend and Strapi backend
  • A plain-text, link-free format to avoid broken editor link resolution issues

Frontend technologies documented

  • React for component-based UI construction
  • TypeScript for typed UI components, page models, and API data mapping
  • react-router-dom for client-side routing and route-based page views
  • Tailwind CSS for layout, spacing, color, responsiveness, and theme-aware styling
  • ThemeContext for light/dark mode management
  • Strapi as the backend content source
  • axios for API requests
  • qs for query-string serialization in API calls

Implementation areas covered

  • App shell setup in App.tsx
  • Root rendering in index.tsx
  • Global styling and design tokens in tailwind.config.js and index.css
  • Theme management and persistence in ThemeContext
  • Shared UI primitives such as Card, Button, Accordion, Input, MegaMenu, and ScrollToTop
  • API handling through the shared backend client
  • Page-level UI implementation for:
    • Home
    • About
    • Projects
    • Collaborations
    • Structure
    • Roadmap
    • News
    • NewsDetail
    • Events
    • EventDetail
    • SummerOfAI
    • AIHackdays
    • Contact
    • LLMProjects
    • Speech
    • Vision
    • Community

Key documentation outcome
This MR now gives readers a full technical picture of how the UI is assembled:

  • which pages are API-backed versus static
  • how layouts are structured
  • which reusable components power each screen
  • how dark mode and responsive styling are applied
  • how the frontend maps backend content into polished page experiences

Testing

  • No runtime tests were required because this change is documentation-only.
  • The markdown was updated to avoid clickable links and editor path resolution issues.

Merge request reports