cibulka/ematiq-whopays

whopays.cibulka.me

❓ What is this?

An interview assingment for ematiq.com. The goal was to "create a web app that determines who pays for lunch". 🌮🍕🥪

📦  Features

Persisted state

The state is persisted in localStorage - the result, the number of players and their names. This way the tool can be used repeatedly from the same device - let's say everyday during a lunch hour.

To avoid showing the suspense animation on refresh, the suspense result is persisted as well.

Dynamic setting of users

User can set between 2 to 20 users. The names of users are either typed by user, or automatically created (according to the number defined in range).

Suspense animation

The transition between settings page and the page with result shows silly suspense animation, to increase the tension. The animation is shown only once per each game.

i18n

Application is ready to be translated to multiple languages with react-intl. So far Czech and English version is available, with the dictionaries, appropriate routing and automatic locale resolution.

Tools

The app is built with Next.js, as it is a library I'm most comfortable to use. CSS is handled by Tailwind.

All UI is coded and styled by me, with the exception of headless react-range (that provides a styling API that is a bit easier to use than native solution.)

UI

• react-range for headless implementation of range, that is a bit easier to style than native HTML input
• react-confetti for cheering up the person who will need to pay for lunch

i18n

• react-intl for translations
• next-i18n-router for localized routing

Other

• react-use for reusable React hooks adhering to industry standards

🔧  Install & Use

You know the drill.

npm install
npm run dev # For development
npm run build && npm start # For production preview