n-d-r-d-g / devcon-scheduler

Save sessions you're interested in attending at the MSCC Developers Conference.

DevCon Scheduler

Check out our website!

Motivation

The MSCC Developers Conference has an awesome agenda that showcases all of its sessions. One issue though is attendees can't save sessions they're interested in attending, which can be an inconvenience at the conference as they need to check the whole agenda just to find out details about the next session.

Contribute

Feel free to contribute!

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

devcon-scheduler's Issues

Repo deprecation after porting to official repo

Currently

This project was created as a solution to the official one not providing the add/remove event feature. It was developed quickly since we received this request last minute.

Ideally, we would have preferred to contribute to the official project directly but we were not aware that the repo was OSS at the time.

Expected

1. Once this question is answered, create a PR on the official repo with the add/remove event feature.
2. Deprecate this project by archiving this repo and mentioning on the website that it is deprecated as the feature has now been added to the official website.

Use focus-visible

Currently

The following components have an outline on focus instead of focus-visible:

• App title (header)
• GitHub link (header)
• Details (SessionCard)

When I click on the above elements, they get an outline.

Expected

The outline should appear only when keyboard navigating on these elements, not on click.

Add header

Currently

The GitHub link sits at the top of the page, alone, which looks weird.
The app does not support color schemes.

Expected

1. Create a header with a title (app's name) to the left
2. Switch the GitHub link to an icon button and move it inside the header to the right.
3. Configure next-themes.
4. Add a theme switcher component inside the header, next to the GitHub link.

Event card is not keyboard accessible

Currently

I cannot focus on the event cards via tabbing on the keyboard.

Expected

Event cards need to be able to receive focus when using the tab key on the keyboard.

Swap axes

Currently

On narrow phones, the rooms on the left take up a significant amount of space.

Expected

The option to swap axes on the agenda component is a premium feature. Either:

1. Swap the component with another one that supports this feature for free or
2. Reduce the font-size
3. Use abbreviations for room names and display a tooltip on hover or click to reveal the full name.
4. Options 2 & 3 (preferred option).

Content cut off in PDF

Currently

On some mobile devices, when exporting a PDF via the Save button, the content gets cut off if it reaches the end of the page and there is not enough space to fit the whole session card on the current page.

Expected

You can use the following in globals to fix this:

.a4-page {
  @apply bg-white;

  min-inline-size: 210mm;
  inline-size: 210mm;
  max-inline-size: 100%;
  min-block-size: 297mm;
  padding: 25.4mm;

  @media print {
    padding: 0;
  }
}

You will need to add the a4-page class to the root element in the PDFPreview component for it to work.

Agenda & event card background color contrast

Currently

The agenda component's background-color and the event card's background-color do not have enough contrast.

Expected

Either:

1. Update one of these 2 background colors to have enough contrast between them.
2. Add a border on the event card that will visually create separation with the agenda's background.

ThemeSwitch does not close on mobile

Currently

On mobile (even on using touch simulation on desktop), I can't close the ThemeSwitch by clicking on the Select's arrow.

Expected

I would like to be able to click anywhere on the Select to close it.

Refactor & optimize code

Currently

The code is not optimized. There is a lot of logic that can be simplified. As a result, the app does not feel as smooth after using it for a while, e.g. all events are always loaded, even for inactive days.

Expected

1. Refactor & optimize code wherever needed.
2. Replace scraping code with a JSON file. Don't forget to uninstall cheerio. Build the file in the format the app needs it to be. The original JSON files used in the official website can be found here.
3. Make the code type-safe.

Event card fixed height

Currently

The event card's height has been hard coded. This leads to the event's title not being able to wrap. As a result, if the text is too long, ellipsis is used.

Ellipsis means that part of the title is hidden. So the "View full title" button (with the eye icon) was added. However, this button is always displayed, even if there's enough space. We could solve that but we would be solving a symptom, not the actual root cause.

Expected:

My suggestion is to:

1. Find a way to set an auto height on the event card for it to be whatever height its child elements need it to be.
2. Remove the ellipsis and allow the title to wrap.
3. Remove the "View full title" button.

If there's no way for the agenda component to allow auto height on the event card, either:

1. find an alternative to the agenda component or
2. hide the "View full title" button whenever the whole title has enough space to be displayed on one line.