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';
2
3const WAKATIME_API_KEY = process.env.WAKATIME_API_KEY;
4const WAKATIME_API_URL = 'https://wakatime.com/api/v1/users/current/all_time_since_today';
5
6export async function GET() {
7 try {
8 // WakaTime uses Basic Auth with API key as username and empty password
9 const encodedAuth = Buffer.from(`${WAKATIME_API_KEY}:`).toString('base64');
10
11 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 hour
17 });
18
19 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 }
25
26 const data = await response.json();
27
28 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}
37
38export 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";
2
3export 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