An interview assingment for ematiq.com. The goal was to "create a web app that determines who pays for lunch". 🌮🍕🥪
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.
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.)
- 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
- react-intl for translations
- next-i18n-router for localized routing
- react-use for reusable React hooks adhering to industry standards
You know the drill.
npm install
npm run dev # For development
npm run build && npm start # For production preview