Web Projects

A responsive tip calculator app that helps users calculate the correct tip and total cost of the bill per person. Split your bill with TipTop!

Next.js
React
shadcn/ui
Tailwind
A dark green logo with the text "Tip Top"

Introduction

Tip Top is a user-friendly tip calculator app designed to simplify bill splitting and tip calculation. This project showcases responsive web design principles and interactive UI elements, providing a practical tool for users to quickly determine fair bill distribution in various dining scenarios.

Features

  • Bill Calculation: Accurately calculates the tip amount and total bill per person based on user input.
  • Responsive Design: Adapts seamlessly to different screen sizes, ensuring optimal layout and usability across devices.
  • Interactive Elements: Incorporates hover states for all interactive components, enhancing user experience and interface feedback.
  • User-Friendly Interface: Provides an intuitive and easy-to-use interface for quick and efficient calculations.

Future Features

  • Currency Selection: Add option for users to select different currencies.
  • Calculation History: Implement a feature to save and review past calculations.
  • Split Bill Unevenly: Add functionality to split the bill unevenly among participants.

Tech Stack

  • SvelteKit: A UI framework built on Svelte. It’s a love letter to web development.
  • Typescript: A statically typed superset of JavaScript that adds type safety and enhances code quality.
  • shadcn-ui: A UI component library designed to work seamlessly with modern JavaScript frameworks.
  • Tailwind: A utility-first CSS framework for rapidly building custom designs directly in your markup.