UI frames drawn from the live apps — upload real screenshots in Admin → Projects.
$inspect keen-keeper --summary
role="Solo frontend developer"
status="live"
stack=["React.js", "Vite", "Tailwind CSS", "Recharts", "React Router"]
✓ build verified · demo online
Keen Keeper — Friendship tracker
React dashboard to keep close friends in view — add contacts, log interactions, and see who is on track or needs attention.
Problem
It is easy to lose track of who you last called. Keen Keeper is a small shelf for the people you want to stay close to — not a finance app.
Stack
Vite, React, React Router, Tailwind CSS, Lucide icons, and Recharts for the interaction charts. Frontend-only; data lives in the client.
- Source: B13-A7-keen-keeper
Architecture
React Router
├── friend list and filters
├── interaction state
└── Recharts analytics
This is intentionally a frontend-only project. The dashboard organizes client-side relationship data and turns interaction counts into readable status cards and charts.
What I built
- Hero and dashboard copy: friends to keep close, with On Track / Need Attention counts
- Add-a-friend flow and a list that loads relationship cards
- Monthly interaction summary and chart views
- Layout that works on phone and desktop
Key decisions
- Kept the product focused on friendship and interaction tracking rather than adding unrelated finance features.
- Used clear “On Track” and “Need Attention” states so the dashboard communicates priority quickly.
- Used Recharts for the analytics layer and React Router for page-level navigation.
Challenge and result
The main design challenge was fitting lists, status cards and charts into one responsive dashboard without making mobile screens dense. The result is a focused React interface that demonstrates component composition, filtering and data visualization.
