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

Tip Calculator App - NextJs React Tailwind & Typescript

#next#react#tailwind-css#typescript
shalri 490

@shalri

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I had so much fun with this challenge. It was challenging but well worth it. I am pleased with how I implemented the logic for the app. This really helped me develop a deeper understanding of hooks.

What challenges did you encounter, and how did you overcome them?

I still need to practice coding forms and using Typescript. Hopefully, these challenges will help me improve my proficiency.

What specific areas of your project would you like help with?

I am good for now. Learning so much from these challenges!

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hello,

your solutions looks great and visually quite pleasing :) I like the smooth hover effects. One thing I'd like to suggest is, currently there seems to be a lot of useStates created. But since they are related states, they can be grouped together as an object. Something like this: const [state, setState] = useState({ bill: null, tipPercentage: 0, numberOfPeople: 0, customTip: "", tip: 0, total: 0, });

This will make the state management cleaner and reduce the number of state updates, which can improve performance. Also it will be easier to keep track of what to update and when, and most importantly, keep them synced. I recommend digging this source as well on this topic: https://react.dev/learn/choosing-the-state-structure

Hope this helps and keep up the great work! :)

Marked as helpful

1

shalri 490

@shalri

Posted

@visualdenniss Thank you so much for the heads up, sir. I'll definitely dig into it and tighten up my code.

0

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