AlisQI uses the Hotwire approach, meaning most markup is rendered on the server using a templating engine, namely Twig.
We do use plenty of client-side Javascript to increase UX fidelity, usability and appeal. Most of that is written as Stimulus controllers.
When we talk about the front-end of the application, this usually includes the server-side rendered templates. Not only do they produce the HTML and reference CSS classes, they also contain the markup which declares which JS controllers to load, and what their configuration needs to be.
This repo contains a bare-bones app which renders a dozen log items of varying levels.
Your assignment is to enhance this page such that:
- users can filter one or multiple log levels (e.g., only display errors and warnings)
- the filter can be reset
- it looks nicer
You should only need to edit public/js/LogController.js and templates/index.html.twig, but feel free to explore the
public and templates folders. The rest is mostly boilerplate for the Symfony framework.
May the force be with you!
For bonus points, add counts to the buttons so users can see how many items of any given type exist in the log.
Feel free to come up with your own ideas on how to improve the log.
To get the stack up and running:
- Install Lando on macOS or Windows
- Install the Symfony plugin using
lando plugin-add @lando/symfony - Clone this repo
- Inside the repo, run
lando start
Lando will output four URLs. The most reliable one is the http://localhost (not https) with the random port.
Don't publish your code to a public repo and/or send a pull request. Your solution needs to remain private!
You can either send us the code over email or invite this repo's contributors to your cloned repo.