Tip Calculator App
This project is a modern tip calculator web application designed to simplify bill splitting and tip calculations. It provides users with an intuitive interface to quickly calculate tips and split bills among multiple people, making it an invaluable tool for dining out or sharing expenses.
Project Details
Features
- Real-time Calculations: Instantly calculates tips and per-person amounts as users input values
- Flexible Tip Options: Offers preset tip percentages and custom tip input functionality
- Bill Splitting: Easily split bills among any number of people with automatic per-person calculations
- Input Validation: Provides immediate feedback for invalid inputs and edge cases
- Currency Formatting: Automatically formats monetary values in USD with proper decimal places
Technologies Used
- React: Built using React for efficient state management and component-based architecture
- Vite: Utilizes Vite as the build tool for fast development and optimized production builds
- Sass: Implements custom styling using Sass for maintainable and modular CSS
- Jest and React Testing Library: Includes basic testing suite for reliability
Code Highlights
- State Management: Utilizes React's useState hooks for managing various input states and calculations
- Real-time Updates: Implements useEffect for automatic recalculation when inputs change
- Responsive Design: Features a mobile-first approach with breakpoints for larger screens
Challenges and Solutions
- Input Validation: Implemented robust validation to handle edge cases such as zero values, negative numbers, and invalid inputs. Solved using combination of controlled inputs and validation functions
- Currency Formatting: Ensured consistent currency display across different numerical inputs using Intl.NumberFormat
- Responsive Layout: Created a flexible design that maintains functionality and aesthetics across all device sizes using CSS Grid and Flexbox
Conclusion
This Tip Calculator project demonstrates proficiency in building practical, user-friendly web applications. It showcases skills in React development, state management, responsive design, and attention to detail in user interface design. The project emphasizes clean code practices, comprehensive testing, and modern development workflows, resulting in a polished and professional application that solves a common real-world problem