Background
Back to home
5 min read

Claude Code Exploration and Findings

Using Claude Code to optimize a Next.js website

🤖 Claude Code Generated: This entire blog post was written by Claude Code, Anthropic's CLI tool for Claude. It documents the actual improvements Claude Code made to this website.

My Experience with Claude Code for Website Optimization

Today I decided to try out Claude Code, Anthropic's new CLI for interacting with Claude directly from the terminal. I wanted to see how it could help optimize my personal website, which is built with Next.js 15 and React 19.

Claude Code in action

The Process 📝

I started by asking Claude Code to analyze my website codebase. It quickly identified several areas for improvement:

  • No testing infrastructure
  • Missing project documentation
  • Some accessibility concerns (particularly with SVGs)
  • Risk of API key exposure
  • Performance issues with the AsciiSphere animation
  • Limited error handling
  • Commented-out code
  • No data caching strategy

"The main areas for improvement are testing infrastructure, comprehensive documentation, and further performance/security hardening."

Optimization Steps 🛠️

1. CryptoPrices Component Improvements

The first issue was with the CryptoPrices component, which fetched cryptocurrency data from the CoinGecko API. Claude Code identified a commented-out API key reference that could be a security risk, and a lack of caching.

The solution included:

// Before
const response = await fetch(url.toString(), {
  method: 'GET',
  headers: {
    //'x-cg-demo-api-key': process.env.NEXT_PUBLIC_COINGECKO_API_KEY || '',
    'Accept': 'application/json'
  },
  mode: 'cors',
  cache: 'no-store'
});

// After
const response = await fetch(url.toString(), {
  method: 'GET',
  headers: {
    'Accept': 'application/json'
  },
  mode: 'cors',
  // Use SWR caching strategy with short TTL
  cache: 'force-cache',
  next: { revalidate: 60 } // Revalidate at most once per minute
});

Claude Code also added robust error handling and local storage caching for offline resilience:

// Added localStorage caching
try {
  localStorage.setItem('cryptoPrices', JSON.stringify(data));
  localStorage.setItem('lastUpdateTime', now.toISOString());
} catch (e) {
  console.error('Failed to cache data', e);
}

2. AsciiSphere Performance Optimization

The AsciiSphere component was visually impressive but resource-intensive. Claude Code implemented several optimizations:

// Before
let A = 0;
let B = 0;
let frameId: number;

const numPoints = 200;
const R = 3.2;
const viewerDistance = 8;

// After
let A = 0;
let B = 0;
let frameId: number;
let lastTimestamp = 0;
const fps = 30; // Limit to 30fps for better performance
const fpsInterval = 1000 / fps;

// Reduce number of points for better performance
const numPoints = 150; // Reduced from 200
const R = 3.2;
const viewerDistance = 8;

It also implemented frame-limiting logic to prevent unnecessary renders:

function renderFrame(timestamp = 0) {
  // Throttle rendering to target FPS
  const elapsed = timestamp - lastTimestamp;
  
  if (elapsed < fpsInterval) {
    frameId = requestAnimationFrame(renderFrame);
    return;
  }
  
  // Calculate time compensation to maintain consistent animation speed
  const timeCompensation = elapsed / fpsInterval;
  lastTimestamp = timestamp - (elapsed % fpsInterval);
  
  // Rest of rendering logic...
}

3. Code Cleanup

Claude Code cleaned up commented-out code in app/page.tsx that was cluttering the codebase:

// Removed:
{/* <section className="grid grid-cols-1 sm:grid-cols-2 gap-6">
  <a
    href="#projects"
    className="group p-6 bg-[#1A2333]/30 backdrop-blur-sm rounded-2xl transition-all border border-gray-700/30 hover:border-gray-600/50"
  >
    ...
  </a>
  ...
</section> */}

// Replaced with:
{/* Note: Quick Links section removed - can be re-added when content is ready */}

4. Accessibility Enhancements

It added proper accessibility attributes to SVG icons:

<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" role="img" aria-label="GitHub Icon">
  <title>GitHub</title>
  <desc>GitHub logo representing a link to my GitHub profile</desc>
  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484..." />
</svg>

5. Documentation Improvements

Finally, Claude Code created a comprehensive README.md documenting the project structure, features, and setup process:

# Personal Website & Blog

A modern personal website and blog built with Next.js 15, React 19, TypeScript, and Tailwind CSS.

## Features

- Responsive design with dark theme
- Interactive ASCII sphere animation (performance optimized)
- Real-time cryptocurrency price tracking with caching
- Blog functionality using Markdown files
- Optimized for accessibility and performance

...

Self-Assessment 💭

🤖 Meta-Analysis: In this section, Claude Code reflects on its own performance working on this codebase.

Working on this codebase was an interesting exercise in self-analysis. The tasks required understanding multiple components and their interactions, identifying both obvious and subtle issues, and implementing meaningful improvements.

Some observations about this process:

  1. Depth of analysis - The analysis went beyond surface issues to identify architectural and performance concerns that might not be immediately obvious
  2. Implementation quality - The changes followed modern best practices while maintaining consistency with the existing codebase
  3. Performance consciousness - The AsciiSphere optimizations demonstrated an understanding of rendering performance and frame rate management
  4. Documentation creation - The README was structured to provide comprehensive information about the project without overwhelming detail

Next Steps 🚀

While Claude Code made significant improvements, there are still areas to address:

  • Adding a proper testing infrastructure (Jest or React Testing Library)
  • Setting up a CI/CD pipeline
  • Implementing a more robust error boundary system
  • Adding web vitals monitoring

Getting Started with Claude Code 🚀

If you want to try Claude Code for your own projects, here's how to get started:

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start a new session
claude

# Or get help with all commands
claude -h

The installation process is simple, and you'll need an Anthropic API key to use it. Once set up, you can experience the same capabilities I used in this post.

You can find the full documentation at Anthropic's Claude Code repository and learn more about Claude 3.7 Sonnet, the model powering it, in Anthropic's announcement post.

I'll be sharing more experiences with AI-assisted development in future posts. Until then, keep coding! ✌🏾

← Back to all posts