Submitted 10 months ago

Responsive React Tip calculator

react, vite, vitest, react-testing-library

Daniil•610

@DaniilGurski

A solution to the Tip calculator app challenge

Preview Code

Solution retrospective

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

This was my first project with test writing which was one of the main learnings for me. I learned how to use vitest and testing library a little bit and I think it will be useful in future, more large-scale projects.

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

I found it a bit difficult to find resources and examples in terms of testing, so mostly used AI to answer some not-so-obvious questions.

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

I'd like to know how I can improve my tests. For this project I wrote one large unit test because it was difficult to figure out how to do it with the context provider involved.

Code

Please log in to post a comment

Community feedback

Daniil•610
@DaniilGurski
Posted 10 months ago
Thank you for your feedback! I really thought my app was responsive until you pointed this out. There must be something small that breaks the layout on mobile.
SaakarX•320
@saakarx
Posted 10 months ago
Hey Daniil, Congratulations on completing the challenge
- You should check for invalid inputs for the calculateTip function you have in your utils directory. When I tried to change the input to text and input letters it gave NaN error on the result section. Maybe add validation for the function arguments if they are not valid numbers, it should return 0 for both tip and total per person.
- Also, on mobile devices the website does not look like the design provided for the challenge.
Hope this helps, overall your solution looks great ✌️.

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