A custom, 100% responsive Next.js management webapp for Lys, offering calendar management options (to add, edit, or delete events), smart event suggestions processing controls, and basic monitoring features (status cards and logs), both on desktop and on mobile.
The core feature of this app is to manage the calendar used by the lambdas and displayed on the public website. Events can be created, modified, deleted and duplicated. Using the country referential, they can even be pre-filled with data such as show name and watch links.
A helper feature designed to pre-fill event data when created from the calendar, as well as automate part of the event suggestion review process (by pre-selecting dates, among others).
A processing screen for suggestions generated by the event fetcher. The suggestions feature has evolved over the years and has become an as key part of Lys as the calendar itself, as it greatly reduces the time spent maintaining the calendar.
Relevant extracted dates are pre-selected, event stages get generated on the fly as dates are selected, and watch links are attached on the resulting events based on the referential data available for the country.
Status cards and full-width log screen, built on the parsing of AWS CloudWatch logs generated by the Lys lambdas and retrieved using the AWS Javascript SDK.
This app was designed to tailor-fit my use case, which is 99% of the time on my phone. Every screen didn't just have to "also work" on mobile, but rather be designed first and foremost for a mobile usage. The Tailwind breakpoint prefixes made this really easy, with some screens (such as the suggestions processing one) making heavy use of them.
A showcase of Tailwind's breakpoint prefixes in action on the suggestion processing screen: on 2xl and bigger viewports, the suggested dates are listed on 2 columns, but just one on xl viewports
When reaching lg viewports, the source card changes too, while the layout of the processing page switches to 2 equal size columns
The side list of suggestions remains on md viewports, while the suggestions details switch to a single column; the side list disappears when dropping to mobile viewports, and the Accept and Discard buttons move to the bottom to be more easily reachable