Implementation of "Analytics" Page

[Benjtalkshow]

Implementation of "Analytics" Page (app/me/analytics)

Objective

Build a personal growth dashboard that transforms raw session-available time-series data into a visually rich, interactive analytics experience. This page is not a passive display of numbers — it should actively surface trends, contextualize performance over time, and give users a genuine sense of their trajectory on the platform. Every stat should tell a story, and every chart should invite exploration. All data is sourced directly from the session, keeping the page performant and free of redundant network overhead.

---

UI Description

Aesthetics & Design Intent

The analytics page should feel like a premium personal growth console — the kind of dashboard that makes users want to engage with their own data. The layout should be confident and spacious, with charts and stat cards that complement each other visually. Color should be used purposefully to guide attention and communicate meaning, not just for decoration. The overall impression should be one of clarity, depth, and polish.

Layout

• Implement a full-width interactive dashboard that takes full advantage of the available viewport
• Use a Bento-grid layout for the core stats section — asymmetric, magazine-style tiles of varying sizes that group related metrics together without feeling rigid or repetitive
• The Bento grid should prioritize the most meaningful stats at larger sizes (e.g., "Global Reputation", total earnings, project count) while supporting metrics occupy smaller tiles
• The chart section should sit below or alongside the Bento grid, given enough visual breathing room to feel like a distinct, focused section

Charts

• Implement multi-line graphs using Recharts to visualize "Projects vs. Earnings" over time
• Apply the official Boundless color palette — gradient from Secondary Cyan to Deep Indigo — consistently across all chart lines, fills, and interactive elements
• Charts must be fully interactive: hover tooltips showing exact values per data point, and smooth animated entry on mount using Framer Motion or Recharts' built-in animation props
• Axes should be clearly labeled with readable tick values; avoid overloading the x-axis with too many data points at once — consider a range selector or time-period toggle (e.g., 7D | 30D | 90D | All Time) to keep charts readable
• Ensure charts are responsive and reflow gracefully at all breakpoints without overflowing their containers

Bento Grid — Core Stats

The Bento grid should surface key metrics as scannable, visually distinct tiles. Suggested stat categories include:

Stat	Description
Global Reputation	Aggregated reputation score across all platform activity
Total Earnings	Cumulative earnings with trend indicator
Projects Completed	Count of completed projects with period-over-period delta
Hackathons Entered	Total participations with win/placement rate
Trend Percentages	Dynamically calculated Up/Down vs. previous period for each stat

• Each tile should display the Trend Percentage badge prominently — green with an upward arrow for positive trends, red with a downward arrow for declines, and neutral for flat periods
• Tiles should use subtle background treatments (gradient fills, soft borders, or glassmorphism) consistent with the Boundless design language

---

Technical Details

Data Path & Sources

• Pull all analytics data from two fields on the session user object:
  • user.profile.chart — time-series data used to power the multi-line charts
  • user.profile.stats — aggregated stat values used to populate the Bento grid tiles

Trend Percentage Calculation

• Implement client-side calculation for Trend Percentages using useMemo to avoid recalculating on every render
• For each stat, compare the current period value against the previous equivalent period (e.g., current 30 days vs. prior 30 days) to derive a percentage change
• The calculation logic should be encapsulated in a dedicated utility function (e.g., lib/utils/calculateTrend.ts) to keep the component clean and the logic independently testable
• Handle edge cases: zero values in the previous period (avoid division by zero), missing data points, and null/undefined fields from the session

Chart Data Processing

• Transform user.profile.chart into the shape expected by Recharts before passing it to chart components — this transformation should also live in a utility or useMemo block, not inline in JSX
• Ensure the multi-line graph correctly maps each data series (Projects, Earnings) to its own line with distinct colors from the Boundless palette

---

⚠️ Caution

This is a production environment — not a sandbox.

• Code must be performant, accessible, and clean
• No dummy data — all data must be sourced strictly from user.profile.chart and user.profile.stats in the session; no hardcoded values or mock datasets
• AI-generated code will be scrutinized; poorly structured or "hallucinated" code will result in immediate issue closure
• Follow the existing design system: shadcn/ui, Tailwind, Framer Motion, Recharts

---

Testing & Verification

Automated Tests

npm run lint    # Ensure code quality
npm run build   # Verify no breaking changes in routing or types

Manual Verification

• Confirm no additional API calls are made on page load — all data must come from user.profile.chart and user.profile.stats in the existing session
• Verify the multi-line chart renders correctly with distinct lines for Projects and Earnings, using the Boundless cyan-to-indigo color palette
• Test chart interactivity — hover tooltips display correct values, and the chart animates on mount
• Confirm the time-period toggle (if implemented) correctly filters the chart data and re-renders cleanly
• Verify Trend Percentages are correctly calculated client-side and display the right direction (up/down/flat) and color for each stat tile
• Test edge cases in trend calculation — zero previous-period values, missing data points, and null fields must not cause errors or NaN displays
• Confirm the Bento grid layout renders correctly across all breakpoints without overflow or misalignment
• Verify the calculateTrend utility function is independently testable and handles all defined edge cases
• Confirm the page is fully responsive — charts and Bento tiles reflow gracefully at tablet and mobile breakpoints
• Verify accessibility — chart data is available to screen readers via appropriate ARIA labels or a data table fallback
• Provide video evidence

[linear]

BOU-108

[coderabbitai]

🔗 Related PRs

#381 - Hackathon analytics [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Anuoluwapo25]

Gm, I am a fullsatck web3 developer and I will love to work on this issue

[Agbeleshe]

Hello, can I handle this? Yes, I’d like to work on this issue. I am a proficient Next.js/React frontend developer with strong experience building interactive analytics dashboards using Tailwind, shadcn/ui, Framer Motion, and chart libraries such as Recharts in repositories hosted on GitHub. I have solid experience working with session-driven datasets, memoized transformations, and reusable dashboard component patterns to build performant, visually rich analytics interfaces. I’ve implemented similar growth dashboards where time-series processing, trend computation, and responsive Bento-style layouts were critical for clarity and scalability.

To tackle this, I will implement the app/me/analytics page by sourcing all data directly from user.profile.chart and user.profile.stats via the existing session, ensuring no additional API calls are introduced. I will transform the time-series dataset into the structure required for Recharts using useMemo, then implement a multi-line interactive chart for Projects vs. Earnings with proper tooltips, axis labeling, and responsive behavior. I will build the Bento grid stat layout using reusable tiles and compute trend percentages through a dedicated utility (e.g., calculateTrend) to compare current vs. previous periods while safely handling edge cases like zero or missing values. Finally, I will apply consistent motion and spacing aligned with the Boundless design language, ensure accessibility and responsiveness across breakpoints, validate lint/build checks, and provide the required video verification.

[Sandijigs]

hi My name is Sandra.
I have reviewed the issue and understand what needs to be done
I am a fullstack software/ Blockchain Engineer with over 6years of experience web2 experience(Fullstack) and 2 year web3 experience (JavaScript,TypeScript, Rust ,Python, Soroban,Solidity,(Backend, frontend, Mobile and smart contracts) ). I have contributed to several projects in the stellar ecosystem. . please Assign this Issue to me

[ojaraa]

Hello maintainer, i have carefully gone through the issue description and i am confident i can get this issue resolved as soon as possible.

[legend4tech]

Hi, I’m Legend4Tech, a full-stack developer and a former fellow at OnlyDust. I came across this issue and I’m really interested in working on it. I have experience across both frontend and backend development, and I enjoy digging into problems, understanding the context, and delivering clean, well-structured solutions.

I’d be happy to contribute and collaborate with the maintainers to get this resolved. Please let me know if you’d like me to proceed or if there are any specific guidelines I should follow.