Fibonacci counter

Scality OA /2023-08-13/

Run demo

Exercise Overview

Your mission is to craft a React application featuring a counter with an increment button. The application should meet the following requirements:

• Fibonacci Suite Indicator: Display a clear signal next to the counter if its current value aligns with a Fibonacci sequence number.
• Threshold Alerts: As the counter approaches a predefined threshold, trigger a user-friendly alert to notify the user about its proximity to a higher value.
• Threshold Lock: Upon crossing a secondary threshold, prevent further counter increments. Provide a user-friendly explanation for this limitation.
• Bonus Challenge: Design your solution with user experience at the forefront. Consider your solution with adaptability in mind, allowing for easy adjustments to the threshold criteria in the future.

Features

• Fibonacci indication ruler
• Counter with simple button
• Settings for thresholds
• Threshold warning
• Magical animation

Tech

• [NextJS] - ReactJS framework which allows SSR
• [p5.js] - awesome javascript animation library
• [tailwind css] - Modern css framework

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.