Fibonacci game

Overview

This project is a small interactive grid game built with React, where clicking a cell increases the values in its row and column, and sequences of 5 consecutive Fibonacci numbers get cleared. It was created out of curiosity to explore state management, UI updates, and algorithmic logic in React.

Project snapshot

• My role: Front-end developer / Creator
• Team: Solo project
• Type: Personal project / curiosity-driven
• Stack: React, JavaScript, TailwindCSS

The challenge

The main challenge was efficiently handling grid updates while maintaining immutability and React-friendly state. Detecting consecutive Fibonacci sequences horizontally and vertically (and later diagonally, as shown in the gif) without degrading performance added an additional layer of complexity.

The solution

I created pure helper functions outside of React components to handle grid increments, sequence detection, and clearing cells. React components handle state orchestration and rendering. I used Sets for fast lookups and experimented with lazy initialization, state flags, and timeouts for animations, keeping UI logic separate from core game logic. An abstract sequence lookup util makes it very easy to broaden the detection from merely horizontal and vertical to diagonal (in both directions) if desired. Combined with a configurable grid and sequence length (which by default is 5) makes it entirely and easily customizable. Throughout the project, I consciously evaluated performance trade-offs and chose solutions that were appropriate for the scale of the application, prioritizing clarity and maintainability over unnecessary optimization.

My contributions

• Implemented grid state management using React useState with lazy initialization.
• Built pure functions to increment rows/columns, detect consecutive Fibonacci sequences, and clear them immutably.
• Added visual highlighting for Fibonacci sequences and simple animations via state and timeouts.
• Explored performance optimizations and trade-offs for larger grids using Sets and discussed virtualized rendering.
• Structured React components and utility functions to separate UI from game logic.

Challenges & learnings

I learned how to manage complex state updates in React without mutation, designed reusable pure functions, explored performance trade-offs for large grids, and improved my understanding of reactive UI updates and animations using state.

Outcome

The project resulted in a fully playable and configurable grid-based Fibonacci game with interactive feedback. It demonstrates clean separation of logic and UI, and served as a sandbox to explore scaling performance and optimizing React applications.