Tip calculator app with TypeScript, TailWind, and Vitest

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

Hi Folks 👋,

Thank you for reading this.

For this project, I wanted to do something more than just working with plain CSS and vanilla JavaScript.

This project uses:

• TypeScript - To be honest, there is not too much of it in the project - it's just a single-page app after all - but it was fun and I really enjoyed using it.
• Tailwind - I was waiting for the right first project on Frontend Mentor to use Tailwind. I decided this one was a good one :).
• Vitest - One of my objectives was to start adding unit tests to my Frontend Mentor projects. I have only one test case. I could have added functional tests, but I thought it was a bit overwhelming.
• GitHub Actions - The project is automatically deployed on GitHub with a build phase thanks to GitHub Actions. It's not perfect yet (I have to do a little tweaking for the index.html file).

I am going to take some time to understand more about Vite, especially Vite config for projects without a front-end framework.

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

Not too many: I wished I had more time to work on it, but these last few weeks have been quite busy.

Decoupling the different parts of the TypeScript/JavaScript was fun, and I had to think a bit before implementing it. I rewrote some parts of the code in order not to use DOM objects and only primitives.

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

Let me know if you find incorrect things in the code or bugs. I think having a bit a feedback on the TypeScript code would be great.

Have a nice day,

Tom.