Frontend Mentor - Tip calculator app solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with

Overview

Getting started

Run the development server

npm run dev
# or
yarn dev

Open http://localhost:5173/ with your browser to see the result.

To learn more about Vite go to Vite Official Documentation.

The challenge

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

Screenshot

Links

• Solution URL: FrontendMentor.io
• Live Site URL: https://revuwem-tip-calculator-app.netlify.app/

My process

Built with

• Vite - build tool
• React - components
• Typescript - types
• TailwindCSS - styles
• Formik - form management
• SVGR - SVG transformer
• Semantic HTML5 markup
• Desktop-first workflow

Author

• Website - My website
• Frontend Mentor - @revuwem