/ScalityOA

Your mission is to craft a React application featuring a counter with an increment button.

Primary LanguageTypeScript

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.