A friendship-tracking web app that helps you keep in touch with the people who matter — see who's overdue for a check-in, log calls/texts/video chats, and visualize your interaction habits over time.
Keen Keeper is a personal relationship-management dashboard built with React. It lists your friends with a "days since last contact" status (on-track, almost due, or overdue) based on a custom contact goal for each person. From a friend's profile you can log a quick check-in (Call / Text / Video), see the interaction show up on a live Timeline, and track overall communication habits on an analytics page with a pie chart breakdown.
https://keen-keeper-xi-five.vercel.app
- React 19 – component-based UI
- Vite – dev server & build tool
- React Router v7 – client-side routing (
createBrowserRouter) - Tailwind CSS v4 + DaisyUI – styling & UI components
- Recharts – pie chart for interaction analytics
- React Context API – global friends/interaction state
- React Toastify – toast notifications on check-ins
- React Spinners – loading states
- React Icons – icon set throughout the UI
- Friends dashboard (Home) – summary cards (total friends, on-track, need attention, interactions this month) plus a grid of all friends fetched from
friends.json - Friend detail page – shows bio, tags, days since contact, goal (in days), next due date, and relationship status badge
- Quick check-in – log a Call, Text, or Video interaction with one click; each logs a success toast and adds an entry to the timeline
- Timeline page – chronological feed of all logged interactions, filterable by type (All / Call / Text / Video)
- Friendship Analytics (Stats page) – donut/pie chart breaking down interactions by type using Recharts
- Snooze / Archive / Delete controls on the friend detail view
- Responsive navigation with a mobile hamburger menu
- Custom 404 / error page for unmatched routes or unknown friend IDs
Production:
| Package | Version | Purpose |
|---|---|---|
| react | ^19.2.6 | Core UI library |
| react-dom | ^19.2.6 | React DOM rendering |
| react-router | ^7.17.0 | Routing (createBrowserRouter) |
| @tailwindcss/vite | ^4.3.0 | Tailwind CSS Vite plugin |
| tailwindcss | ^4.3.0 | Utility-first CSS |
| daisyui | ^5.5.23 | Tailwind component library |
| react-icons | ^5.6.0 | Icon library |
| react-spinners | ^0.17.0 | Loading spinners |
| react-toastify | ^11.1.0 | Toast notifications |
| recharts | ^3.8.1 | Pie chart on the Stats page |
Development:
| Package | Version | Purpose |
|---|---|---|
| vite | ^8.0.12 | Build tool & dev server |
| @vitejs/plugin-react | ^6.0.1 | Vite React plugin |
| eslint | ^10.3.0 | Code linting |
| @eslint/js | ^10.0.1 | ESLint JS config |
| eslint-plugin-react-hooks | ^7.1.1 | React hooks lint rules |
| eslint-plugin-react-refresh | ^0.5.2 | React refresh lint rules |
| globals | ^17.6.0 | Global variables for ESLint |
| @types/react | ^19.2.14 | React type definitions |
| @types/react-dom | ^19.2.3 | React DOM type definitions |
- Node.js v18+
- npm (comes with Node.js)
-
Clone the repository
git clone https://github.com/Morshedul-developer/keen-keeper.git
-
Navigate into the project folder
cd keen-keeper -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open in browser Vite will print a local URL in the terminal (usually
http://localhost:5173) — open it there.
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build the app for production |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint checks |
src/
├── assets/ # images (hero, logos)
├── components/
│ ├── footer/ # Footer
│ ├── homePage/ # Banner, YourFriends
│ ├── myNavLink/ # active NavLink wrapper
│ ├── navBar/ # NavBar
│ └── ui/ # FriendCard, SummaryCard, TimelineCard
├── context/ # FriendsContext + Provider (global check-in state)
├── hooks/ # useFriends (fetches /public/friends.json)
├── layout/ # RootLayout
├── pages/ # HomePage, TimeLine, Stats, FriendDetails, ErrorPage
├── router/ # Routes.jsx (createBrowserRouter)
└── main.jsx
public/
├── friends.json # mock friends dataset
├── call.png / text.png / video.png # timeline event icons
- Repository: github.com/Morshedul-developer/keen-keeper
- Live Site: https://keen-keeper-xi-five.vercel.app