Skip to content
Submitted 3 months ago

NextJs - Tailwind CSS

next, tailwind-css
Grecco Oliva, Franco•310
@GreccoOliva-Franco
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • Faster resolution
  • Usage of tailwind theme and design-tokens
  • Usage of useReducers as a pseudo-global-state management for the app

Improvements:

  • Forms: use libraries (react-hook-forms)
  • Validations: use libraries (zod)
What challenges did you encounter, and how did you overcome them?
  • Hook useReducer and forgetting to spread the default values
  • Default rendering of the browser makes my "inputs" have double border (mine and chromes default). I don't know how to override it. No overcome
What specific areas of your project would you like help with?
  • Override the browser default rendering (I think tailwind already does it but it is not working)
Code

Please log in to post a comment

Log in

Community feedback

  • Fikerte Tesfaye•360
    @Fikerte-T

    Hi @GreccoOliva-Franco,

    Congratulations you have done a really good job.Your app works perfectly its intended job. There are a couple of things I think could be added and improve your app.

    1. In terms of responsiveness, its better to use min-height = 100vh instead of height = 100vh to prevent the content from overflowing the viewport 2 In terms of user experience, working on hovering and active states on the inputs greatly improves user experience. Also adding input validations and error handling significantly adds to your app.

    Good job, and happy coding

    Marked as helpful

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