This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Calculate the correct tip and total cost of the bill per person
- Reset fields to input new numbers
- See an error if input is zero
- React.js
- Redux, react-redux, Redux Toolkit
- SASS (scss) & CSS modules
I learned a bit about useCallback and useMemo hooks and how to deal with stale values from useRef (component reloads, but ref points to "former" value).
I strongly believe the current component structure is not ideal. Also, I resorted to redux to help with state management, although it could have been done better with context and a better structure.