Skip to content

feat: mii edit UX, a11y fixes, and frontend unit tests#50

Open
ChauHPham wants to merge 2 commits into
trafficlunar:mainfrom
ChauHPham:main
Open

feat: mii edit UX, a11y fixes, and frontend unit tests#50
ChauHPham wants to merge 2 commits into
trafficlunar:mainfrom
ChauHPham:main

Conversation

@ChauHPham

Copy link
Copy Markdown

The current website does not have a notification when I edit my miis. I have implemented a notification feature and added some unit testing to ensure it works on the frontend. I don't have access to the backend, so I can't test it manually. Let me know if you have questions :)

- API: return success message on mii edit
- FE: flash banner + helpers, submit response helper, Vitest
- A11y: labels, alt text, banner close; css checkerboard class
- DX: root tsconfig refs, strict/tsconfig, next dev --webpack

Made-with: Cursor
Comment thread backend/package.json
"packageManager": "pnpm@10.33.0",
"scripts": {
"dev": "next dev",
"dev": "next dev --webpack",

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why move back to webpack?

@trafficlunar

Copy link
Copy Markdown
Owner

This is confusing, I understand the accessibility changes but

  • Why do we need notifications?
  • Why did you remove .cursor from the gitignore?
  • I don't see a point in adding tests but I'm open to having my mind changed

@ChauHPham

Copy link
Copy Markdown
Author

Why move back to webpack?
next dev was failing with Turbopack in my workspace on dev, build is untouched. next dev --webpack is a workaround documented to avoid Turbopack during dev. You can remove it, and I'll just track the upstream fix.
https://nextjs.org/docs/app/api-reference/turbopack

Why do we need notifications?
The website silently redirects a successful edit without providing any feedback, which makes it easy for the user to think nothing happened.
The user must then manually check the mii profile to confirm whether the change worked. This can get frustrating if someone wants to make multiple edits in a row. The notification will indicate whether the user successfully or failed to edit a mii without having to navigate away from the page.
My added change returns a clear { success: true, message } from the API and shows a one-time green banner on the Mii page

Why did you remove .cursor from the gitignore?
I removed it because I was using Cursor as my editor, and the .cursor folder was part of my local setup. I initially included it by accident and then realized I didn't need it for the project.

I don't see a point in adding tests but I'm open to having my mind changed
Since I don't have backend access, I can't log into the local site to manually add or edit a mii to verify my changes end-to-end. The tests let me confirm the logic behaves correctly without needing that access.
Furthermore, adding tests is a good coding practice to find bugs and edge cases automatically after new pushes.

@trafficlunar trafficlunar force-pushed the main branch 3 times, most recently from d2beab3 to 7506a78 Compare June 19, 2026 17:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants