CodeTimeline

Turn any public GitHub repo into a beautiful, AI-powered visual history timeline.

Paste a GitHub URL → get a scrollable, animated timeline of the project's entire development story, with AI-named chapters, contributor avatars, language breakdowns, and commit sparklines.

🔗 codetimeline.vercel.app

Features

• AI chapter naming — NVIDIA NIM (Llama 3.1 70B) groups commits into narrative eras and names them
• Scroll-driven animations — GSAP ScrollTrigger reveals each chapter as you scroll
• Language donut chart — D3.js SVG shows the language composition per chapter
• Commit sparkline — visualises commit frequency across the repo's lifetime
• Contributor avatars — top contributors with GitHub profile links
• OG image generation — every timeline page has a share card for X / LinkedIn / Discord
• GitHub rate limit handling — graceful errors with retry guidance
• Skeleton loading — full shimmer UI while data fetches

Tech stack

Local setup

Prerequisites

• Node.js 18+
• A GitHub personal access token (public repo read scope)
• An NVIDIA NIM API key (free tier available)

Steps

git clone https://github.com/Rohan5commit/codetimeline.git
cd codetimeline
npm install

Copy the example env file and fill in your keys:

cp .env.example .env.local

NVIDIA_API_KEY=nvapi-...
GITHUB_TOKEN=ghp_...
NEXT_PUBLIC_APP_URL=http://localhost:3000

Run the dev server:

Open http://localhost:3000 and paste any public GitHub URL.

Example timelines

• facebook/react
• vercel/next.js
• expressjs/express
• vuejs/vue

Project structure

src/
├── app/
│   ├── api/og/[owner]/[repo]/   # OG image generation
│   ├── timeline/[owner]/[repo]/ # Timeline page + error/loading states
│   ├── robots.ts                # SEO robots config
│   └── sitemap.ts               # XML sitemap
├── components/
│   ├── TimelineClient.tsx       # Main animated timeline (client)
│   ├── LanguageDonut.tsx        # D3 donut chart
│   ├── CommitSparkline.tsx      # D3 sparkline
│   ├── RepoInput.tsx            # URL input + example buttons
│   └── ShareButton.tsx          # Clipboard share button
└── lib/
    ├── github.ts                # GitHub REST API wrapper
    ├── claude.ts                # NVIDIA NIM integration
    ├── process.ts               # Chapter grouping logic
    └── types.ts                 # TypeScript interfaces

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

License

MIT