Stellenbeschreibung:

What we need:
A single-page client-side only webpage that shows nested tabular data, namely the budget of a city.


"nested tabular data" is a table where only the first level is shown when the user enters the page. They can then click on a category (a line in the table) to open it (i.e. to show more lines to the table below the user's click). The idea is that they first see the big blocks of the budget and can then "zoom in" to see what the categories are made up of. Clicking on the same line again should close the category. There are 7 levels of categories, then there's the budget value in € for that line in the CSV.


The source of the data is a CSV with 14,000 rows and 8 columns (7 levels of categories, then the actual sum in €). This will be provided (sample attached).


Features needed:
• The sum needs to be shown visually in the last column (see attachment below), filling the cell's background from 0% to 100% as a quick indicator of how much the currently visible (= potentially filtered by search) budget is takes by this line.
• A search feature needs to enable the user to filter the data, i.e. keep only the matching lines (show a line if there's a substring match in any of the 7 rows of that line).
• All of this needs to be very fast - both initial loading time as well as search speed and speed when opening a category. It must be fun for the user to explore the budget.


Expectations:
• It's okay to vibe code this to a certain point, but at the end, we need maintainable and clean code.
• Expect a bit back and forth and communication with me, as features and UI elements might need to be added during development.
• The data is in German, so if you understand that, it makes testing a bit easier.
• I'm a developer myself, so expect to sometimes get very detailed and specific feedback/requirements.


For testing:
The original website where we took the data from (for quality checks - the data we show is basically the same, but with a faster and much cleaner UI):
https://primary.axians-ikvs.de/sj/Produkthaushalt.xhtml?jahr=2023&jfwid=29f80&dswid=8818&kid=18cg18jl185b195018xv185b185b185b185b185b185b185b185b185b185b18xn194q185b18jh18ce&typ=1abk1a4f1abi

NOTE / HINWEIS:

EN: Please refer to Fuchsjobs for the source of your application

DE: Bitte erwähne Fuchsjobs, als Quelle Deiner Bewerbung