• HTML5
• React
• Typescript
• Sass
• Tailwind

• Vite

• uuid
• vitest
• axios
• jsdom
• testing-library
• postcss

This projects uses code standards by applying the eslint and prettier tools:

• Eslint: identifies bugs and patterns to make the code more consistent.
• Prettier: code formatter for making the code more readable and consistent.

• Step 1: Clone and download repo.
• Step 2: Install node_modules using npm i.
• Step 3: Create and use API Url, there is an example.env file in root.
• Step 4: Run script for vite (npm run dev) to launch the application.

This project is marked as "Finished"

This is a code challenge to build a casino lobby on a limited amount of time. The focus is mainly on logic and experience with React and a litle bit of UX. Orders is to fetch API and be able to filter games by studios, categories and currencies. These are connected to each other in the json data.

• Categories: User can filter by category.
• Currency Modal: Users can filter by a bunch of currencies.
• Studio Modal: User can pick one or several studios.
• Load More: Buttons for user to interact and load more or hide casino games.

• Chose to use load more functionality to improve performance and UX, 50 games per click.
• Used React.lazy on a bigger modal for studios.
• Used useMemo when filtering games to memoize it due to large data sample.
• Checked if the library react-window did any improvements on performance, but could not see it so i decided not to use it.

• Improve UI
• Accessibility
• SEO
• Further Performance improvment
• Animation Libraries
• Some images urls are not working
• Further Testing of components
• Better responsiveness
• ImageKit for better performance

• RalfiSlask