[LFX Mentorship Term 1 2026] OpenCost UI Revamp

[ameijer]

PROSPECTIVE LFX MENTEES:

- APPLY TO THIS VIA THE LFX MENTEE PORTAL, AND SUBMIT THE REQUIRED CODING CHALLENGE THROUGH THAT PORTAL. DO NOT SEND SLACK MESSAGES OR EMAILS DECLARING YOUR INTEREST TO #OPENCOST OR TO MAINTAINERS - THIS WILL NOT HELP YOUR APPLICATION

- SEE BOTTOM OF ISSUE FOR CODING CHALLENGE FOR MENTORSHIP APPLICATION

Is your feature request related to a problem? Please describe.
OpenCost has helped a lot of people save a lot of money on their infrastructure. We like to think that this has contributed to things like engineering headcounts not getting reduced, small businesses and startups surviving longer, and so on. The OpenCost UI is a key part of this - it lets people visualize their spend, find inefficiencies, and so on. It's time to uplevel the OpenCost UI to enable the next generation of savings!

Describe the solution you'd like
We would like a revamp of the OpenCost UI based on the Carbon design system(https://github.com/carbon-design-system/carbon). We will ask for a number of new pages to be built, and the existing pages to be revamped.

Describe alternatives you've considered
N/A

LFX Mentorship Coding Challenge

We are looking for folks with good UI/UX instincts here. The coding challenge for this mentorship is to implement 'assets' page support in the OpenCost UI using the carbon design system. Here's the issue: #28. This will demonstrate your ability to implement UIs for APIs which will be the foundation of this project. Put up a PR with your changes against this opencost-UI repo, and link to the PR in your cover letter. Also in the cover letter, we are looking for a write up on why you chose the UX you did, any challenges encountered during this coding challenge, and any new skills learned during this coding challenge.

A few hints here:

1. You're going to need to figure out how the assets API works first
2. You can visualize the information any way you want. It helps to think here about what is in the assets API, and put yourself in the user's shoes. Yes, you can implement the page to be a carbon copy of the other pages, but the chance to stand out here is by building an experience here around outside the box thinking.
3. Don't message the opencost slack channel or send emails if you have questions or comments. Ask them in this issue so that others can benefit as well from the answer.
4. Follow the instructions closely! Good communication skills going in both ways (receiving instructions and providing updates, etc) are critical for an engineering engagement like this. Many otherwise good submissions have been disqualified in the past for simply not following the instructions outlined here.

Thank you!

[adity1raut]

HI @ameijer

Just to confirm one thing before I proceed:

For the mentorship task, should we:

1. create a completely new “Assets” page, or
2. implement assets functionality within the existing pages/views of the OpenCost UI?

I want to make sure I’m following the expected approach correctly.

Thanks!

[adytx]

Hi @ameijer to me the issue description is clear,
But I would like to make a suggestion. The PRs are public and prone to plagiarism. Should we switch to Gist? Or to mention opening the PR on the last day of proposal submission, to keep it fair?

Please let me know your thoughts.

[ameijer]

@adity1raut I'm going to leave those answers up to the implementer :). There isn't any 'right' or 'wrong' approach here. Creating a new page is fine, or if you want to try and integrate into existing experience, you are welcome to try that.

@ADITYATIWARI342005 you are welcome to open a PR on the last day if you don't want your work to be potentially copied. we do need to use the PR mechanism though so that netlify renders a preview and we can quickly evaluate the submissions!

[adytx]

@ADITYATIWARI342005 you are welcome to open a PR on the last day if you don't want your work to be potentially copied. we do need to use the PR mechanism though so that netlify renders a preview and we can quickly evaluate the submissions!

Thanks for the reply. That is relatable; previews are really helpful and optimal for evaluation and testing!

[ameijer]

We will not review any submissions until the submission deadline has passed, and will not review anything submitted after the deadline so feel free to time it as close to deadline as you feel comfortable doing

[hxrshxz]

Hi @ameijer
I am working on the coding challenge for the Assets page implementation and also learning about carbon design system and am excited to apply for this mentorship!

While analyzing the opencost-ui-repo structure to plan my implementation, I noticed a few
things to align the UI project with the standards of the main
repository. I wanted to ask your preference on including these in my submission:

1. Testing: The main repository has a robust testing via justfile commands. Since the UI repo
   currently lacks a test runner, I would like to propose set up Jest and React Testing Library and add a
   test command to the justfile to mirror the main project's workflow or We can maybe include E2E tests similar to Backstage

2. TypeScript: To match the backend’s strong typing in Go, I believe the UI would benefit from
   TypeScript. Mentee's can propose an incremental migration starting with the new Assets page. Doing this now
   is best ? because writing the new Carbon components in JavaScript would create "technical debt"
   from day one implemeting TS along with the revamp avoids refactoring/migraiton later on

My Question:
Would you be open to me including this infrastructure setup (Testing + TypeScript support) as part of the project or in Optional section after the project if it's not possible to include all this in the current one?
I believe it will ensure the revamp is built on a stable, maintainable
foundation that matches the quality of the core project. Or would you prefer I stick strictly to
JavaScript for now?

Thank you

[lakxy]

Hi @hxrshxz
Instead of just prompting AI to do your work, you should look at the actual code, and all your questions will be answered.

I hope you "DO NOT USE AI" for the submission too, seems you rely on it too much.

[lakxy]

Hi @ameijer
I am working on the coding challenge for the Assets page implementation and also learning about carbon design system and am excited to apply for this mentorship!

While analyzing the opencost-ui-repo structure to plan my implementation, I noticed a few
things to align the UI project with the standards of the main
repository. I wanted to ask your preference on including these in my submission:

Testing: The main repository has a robust testing via justfile commands. Since the UI repo
currently lacks a test runner, I would like to propose set up Jest and React Testing Library and add a
test command to the justfile to mirror the main project's workflow or We can maybe include E2E tests similar to Backstage

TypeScript: To match the backend’s strong typing in Go, I believe the UI would benefit from
TypeScript. Mentee's can propose an incremental migration starting with the new Assets page. Doing this now
is best ? because writing the new Carbon components in JavaScript would create "technical debt"
from day one implemeting TS along with the revamp avoids refactoring/migraiton later on

My Question:
Would you be open to me including this infrastructure setup (Testing + TypeScript support) as part of the project or in Optional section after the project if it's not possible to include all this in the current one?
I believe it will ensure the revamp is built on a stable, maintainable
foundation that matches the quality of the core project. Or would you prefer I stick strictly to
JavaScript for now?

Thank you

and I know you will try to deny it, but the line length in your message is not complete, something that happens when text is copy pasted,

I hope the submission PR is not a copy-paste!

[lakxy]

The mentorship involves pure IQ decisions that require experience and knowledge please do not degrade the very foundations of open-source by just prompting AI to give me a reply to fancy the mentors. while knowing nothing about what you actually wrote.

@ameijer Please take note of these practices that @hxrshxz follows, I hope the evaluation will be fair.

[hxrshxz]

Hey @codeEvolveZenith345, @ADITYATIWARI342005's Friend this is a professional space, so please maintain that.

During my Google Summer of Code at the OWASP Foundation, I worked on a similar project where I migrated four repositories to TypeScript, added unit and end-to-end tests, and integrated ESLint. That’s where this experience comes from.

Thank you.
Gsoc 2025 OWASP Foundation project report

[lakxy]

Hey @codeEvolveZenith345, @ADITYATIWARI342005's Friend this is a professional space, so please maintain that.

During my Google Summer of Code at the OWASP Foundation, I worked on a similar project where I migrated four repositories to TypeScript, added unit and end-to-end tests, and integrated ESLint. That’s where this experience comes from.

Thank you. Gsoc 2025 OWASP Foundation project report

Now this is a hand written message!