Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

Calculator App in NodeJS & Material-UI

next, material-ui
Catalin-Marius Untea•290
@unteacatalin
A solution to the Calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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!
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Catalin-Marius Untea's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License