Skip to content

feat(ui): Initial setup of Next Generation Sequencing (NGS) platform web app

Mohana Sri Bhavitha requested to merge gns-draft into main

  1. Overview: This Merge Request bootstraps the foundational frontend of the Next Generation Sequencing (NGS) Platform. It transitions the project into a comprehensive, multi-page React application powered by Vite, providing a premium UI system oriented around wellness and preventive healthcare.

  2. Key Features & Changes:

  • Vite & React Setup: Successfully bootstrapped the Vite + React ecosystem and cleaned up placeholder files.
  • Routing Infrastructure: Integrated react-router-dom to support 11+ dedicated pages spanning clinical services, company info, and educational genomics resources.
  • Premium Design System:
    • Implemented a custom genomics-inspired design aesthetic (Dark/Teal themes, DNA gradients).
    • Designed and heavily utilized a reusable component for a modern glassmorphism feel.
  • Interactive UI Elements:
    • Leveraged framer-motion for fluid scroll and entry animations.
    • Implemented swiper/react to create a fully responsive, auto-playing Hero Carousel with parallax effects.
  • Core Pages Implemented:
    • Home: Animated hero carousels, NGS workflow, Impact Metrics, and an interactive services grid.
    • Wellness Genomics: Deep dive into WES/WGS mapping and Gut Microbiome capabilities.
    • Pharma+ (PGx): Focused layout on personalized drug responses & dosage insights.
    • Services (Hub): Master hub linking to specific test endpoints (Oncology, ExploreCRL, Clinical).
    • Also completed content structures for About Us, Oncology, Resources, Personalized Medicine, and Contact

Dependencies Installed:

  • react-router-dom (Routing mapping)
  • framer-motion (Component animations)
  • swiper (Hero carousels)
  • lucide-react (SVG Icons)

Checklist:

  • Application successfully builds locally via npm run build
  • Confirmed dynamic routing transitions between all pages
  • Verified responsive behavior without throwing console errors

The application uses pure CSS paired with utility classes mapping standard layout constraints (mimicking Tailwind functionality natively) to ensure full design control without requiring an external build step. The design heavily utilizes CSS grids, backdrop filters, and CSS variables for theming.

Merge request reports