Designer vs Developer

An attempt at recreating the graphic design for an animated light and dark mode toggle switch depicted in the meme.

Original Video: https://www.youtube.com/watch?v=0Bxs9XGK5fE

Demo

Getting Started

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 and click the toggle. Watch the sun set and rise.

Design Notes

Some design choices have been made that deviate from the original video. These modifications were implemented to enhance the visual appeal and technical implementation while maintaining the core concept of the designer vs developer meme.

Tech Stack

• Next.js 15.5.4 - React framework with App Router and Server Components
• React 19.1.0 - Latest version with improved performance
• TypeScript - Strict type checking for better code quality
• Tailwind CSS v4 - Utility-first CSS framework
• Turbopack - High-performance build tool

Commands

npm run dev    # Start development server
npm run build  # Build for production
npm start      # Run production server
npm run lint   # Run ESLint