Docs
→Card
→WakaTime Stats Card
WakaTime Stats Card
A card showing WakaTime stats.
by Sarthak Kapila
Loading stats
Installation
Usage
wakatime-stats-card/route.ts
1import { NextResponse } from 'next/server';23const WAKATIME_API_KEY = process.env.WAKATIME_API_KEY;4const WAKATIME_API_URL = 'https://wakatime.com/api/v1/users/current/all_time_since_today';56export async function GET() {7 try {8 // WakaTime uses Basic Auth with API key as username and empty password9 const encodedAuth = Buffer.from(`${WAKATIME_API_KEY}:`).toString('base64');1011 const response = await fetch(WAKATIME_API_URL, {12 headers: {13 'Authorization': `Basic ${encodedAuth}`,14 'Content-Type': 'application/json',15 },16 next: { revalidate: 3600 } // Cache for 1 hour17 });1819 if (!response.ok) {20 console.error(`WakaTime API error: ${response.status} - ${response.statusText}`);21 const errorText = await response.text();22 console.error('Error response:', errorText);23 throw new Error(`WakaTime API error: ${response.status}`);24 }2526 const data = await response.json();2728 return NextResponse.json(data);29 } catch (error) {30 console.error('Error fetching WakaTime stats:', error);31 return NextResponse.json(32 { error: 'Failed to fetch WakaTime stats' },33 { status: 500 }34 );35 }36}3738export async function POST() {39 return NextResponse.json(40 { error: 'Method not allowed' },41 { status: 405 }42 );43}
WakaTime Stats Card Example
1import WakaTimeStatsCard from "@/components/wakatime-stats-card";23export default function Example() {4 return <WakaTimeStatsCard />;5}
Understanding the component
The card shows the total coding time, daily average, and digital coding time.
Credits
By Sarthak Kapila.
Other requirements
- WakaTime API key
- WakaTime API key is used to fetch the stats
- WakaTime Stats endpoint
/api/wakatime-stats
to fetch the stats