A meticulous digital archive and interactive registry detailing the graphical, architectural, and structural evolution of the World Wide Web's most influential properties (Google, YouTube, Facebook, Netflix, Reddit, Amazon) from 1998 to 2024.
Built with a sleek, premium Retro-Neobrutalist design system, featuring custom metrics, interactive visual comparison tools, a chronological verification game, and a global voting registry database.
- Timeline Exhibition: Select any prominent web property and scrub through a mechanical, tape-measure timeline slider to inspect visual snapshots across different eras.
- Aesthetic Analytics Engine: In-depth, retro-themed analysis panel displaying metrics like whitespace ratio, navbar complexity, and brand color consistency for each historical snapshot.
- Dual-Era Comparator: A side-by-side comparison slider to visually contrast any two years of a website's evolution.
- Chronological Audit (Simulation.exe): An interactive game where users test their temporal awareness by identifying the exact capture year of corrupted historical dossiers.
- Global Evolution Registry (Leaderboard): A live ranking dashboard where users can view top contenders and vote on categories such as Most Redesigned, Most Minimalist, Most Cluttered, and Most Nostalgic, synced to a live database.
- Framework: Next.js 14 (React, TypeScript, App Router)
- Styling: Custom Vanilla CSS & TailwindCSS (Neo-Brutalism style system with heavy borders, solid shadows, noise textures, and clean typewriter/serif typography)
- Database & Storage: Supabase (PostgreSQL & Object Storage bucket for snapshot hosting)
- Scraper & Renderer: Puppeteer (Headless browser automation script for querying Wayback Machine CDX API and capturing high-fidelity screenshots)
internet-time-machine/
├── data/
│ └── site-config.json # Site milestones, timeline years, and static metadata
├── public/
│ └── snapshots/ # Offline local backup screenshots (.webp)
├── scripts/
│ ├── snapshot-pipeline.js # Automated CDX search and Puppeteer screenshot pipeline
│ ├── test-supabase.js # Database audit and verification script
│ └── test-screenshot.js # Single website capture test utility
├── src/
│ ├── app/
│ │ ├── explore/[domain]/ # Detail timeline explorer page
│ │ ├── game/ # Chronological Audit game (Simulation.exe)
│ │ ├── leaderboard/ # The Evolution Index (Leaderboard)
│ │ └── api/ # API endpoints for votes, sites, and snapshots
│ ├── components/ # Reusable UI elements (BrowserFrame, MilestoneCard, etc.)
│ └── lib/
│ └── supabase.ts # Supabase database client configuration
└── supabase/
└── schema.sql # SQL definition for the registry and votes tables
Ensure you have Node.js (v18+) installed on your machine.
Clone the repository and install the dependencies:
git clone https://github.com/Huzaifa-12Imran/InternetTimeMachine.git
cd internet-time-machine
npm installCreate a .env.local file in the root folder with your Supabase credentials:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_keyExecute the SQL commands in supabase/schema.sql inside your Supabase SQL editor to create the snapshots and votes tables.
Start the development server:
npm run devOpen http://localhost:3000 in your browser to view the application.
If you want to query new snapshots or update the repository's assets, you can run the automated snapshot pipeline.
The script queries the Wayback Machine CDX API, downloads the best snapshot, removes archival banner toolbars, screenshots it, uploads it to Supabase Storage, and registers it in the Database.
# Capture and update snapshots for a single domain (e.g. google.com)
node scripts/snapshot-pipeline.js --domain google.com
# Process all domains configured in data/site-config.json
node scripts/snapshot-pipeline.js --all- Historical website snapshots are sourced via the Internet Archive (Wayback Machine).