Guess The Color

Web Dev
Full Stack
UI/UX
Guess The Color

Tech Stack

Next.js
React
Typescript
Tailwind CSS
Figma
Vercel

Description

Guess the Color is a fast-paced, interactive web game that challenges users to quickly identify mismatched color names and text under increasing time pressure

Designed to be both playful and mentally engaging, the game sharpens visual focus and cognitive reflexes as difficulty ramps up each round

Built with Next.js, TypeScript, and Tailwind CSS, the game delivers a smooth, responsive experience across devices

With dynamic state management, real-time score tracking, and progressive difficulty logic, the project combines fun gameplay with thoughtful engineering

  • Built an engaging color-based reflex game using Next.js, React, TypeScript, and Tailwind CSS for a responsive and playful UI
  • Designed progressive difficulty logic to reduce time limits per round and increase user engagement
  • Implemented real-time score tracking, game-over modals, and 'Play Again' functionality for seamless replayability
  • Optimized gameplay performance across devices using lightweight component structures and efficient rendering.
  • Developed reusable components for game states, buttons, and animations to support clean and scalable code
  • Deployed the game using Vercel, enabling fast global delivery and smooth game performance

Page Info

Landing Page

Landing page with a simple and clean user-centric design

/experience/guessthecolor/landing_page.png

Game Screen

Game screen with a timer and a color name to guess

/experience/guessthecolor/game_screen.png

Result Screen

Result screen with max difficulty level, restart button and score

/experience/guessthecolor/result_screen.png