Skip to content

dashboard_README.md

Latest commit

 

History

History
70 lines (53 loc) · 2.18 KB

dashboard_README.md

File metadata and controls

70 lines (53 loc) · 2.18 KB

Research Dashboard

A React frontend for searching, filtering, and visualising a research paper database. Built to demonstrate component-based UI development, state management, and data visualisation in React — directly relevant to AlphaSights' frontend engineering stack.

Features

  • Full-text search across paper titles and authors
  • Multi-dimensional filtering by topic, publication status, and impact level
  • Sortable results by date, citation count, and title
  • Live summary statistics updating dynamically with filters
  • Bar chart visualisations showing papers and citations by topic
  • Detail panel — click any row to expand full paper metadata
  • Responsive layout — works on mobile and desktop

Tech stack

  • React 18 with hooks (useState, useEffect, useCallback)
  • Vite for fast development and bundling
  • No external UI libraries — all components built from scratch
  • CSS Grid and Flexbox layout

How to run

npm install
npm run dev

Open http://localhost:3000

Project structure

src/
├── App.jsx                  ← Root component, state management, filtering logic
├── App.css                  ← All styles
├── index.jsx                ← React entry point
└── components/
    ├── SearchBar.jsx        ← Controlled search input with clear button
    ├── FilterPanel.jsx      ← Topic, status, impact, sort dropdowns
    ├── ResearchTable.jsx    ← Sortable data table with detail panel
    ├── ResearchChart.jsx    ← Bar charts: papers and citations by topic
    └── StatsPanel.jsx       ← Live summary statistics

API integration

The dashboard is currently seeded with local data. To connect to the Kotlin REST API backend:

Replace the SAMPLE_DATA constant in App.jsx with a fetch call:

useEffect(() => {
  fetch('http://localhost:8080/api/research')
    .then(res => res.json())
    .then(data => setData(data));
}, []);

See the companion repo research-api-kotlin for the backend.

Author

Atrija Haldar LinkedIn MSc Engineering, Technology and Business Management — University of Leeds