Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Calculator App in NodeJS & Material-UI

@unteacatalin

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, I developed this app using NextJS and Material-UI. I used themes and JSS/TSS for CSS. I got stuck on some issues when developing this. For the first two I found solutions. The last one is unsolved.

  1. When implementing JSS/TSS I stumbled on this error: In order to get SSR working with tss-react you need to explicitly provide an Emotion cache. MUI users be aware: This is not an error strictly related to tss-react, with or without tss-react, MUI needs an Emotion cache to be provided for SSR to work. Here is the MUI documentation related to SSR setup: https://mui.com/material-ui/guides/server-rendering/ TSS provides helper that makes the process of setting up SSR easier: https://docs.tss-react.dev/ssr
  2. When I serialized some synchronous methods on a string (e.g. split, join) and then applying an asynchronous filter on the resulted array, I was getting this error: Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
  3. I don’t know how to override some default behavior in MaterialUI theme classes (i.e. when clicking the div element, it blinks light blue. It should blink with a lighter palette color from the theme). Thank you!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord