A simple and interactive tip calculator application that helps you split bills among friends and colleagues with ease.

• Bill Amount: Enter the total bill amount.
• Number of Guests: Specify how many people are splitting the bill.
• Tip Percentage:
  • Choose from preset options: 15%, 18%, 20%.
  • Use the slider for a custom tip percentage (from 0% to 30%).
• Real-time Results:
  • Displays the calculated tip amount.
  • Shows the total bill including the tip.
  • Calculates and displays the amount each person should pay.

1. Enter the total bill amount in the "Total Bill Amount" field.
2. Enter the number of guests in the "Number of Guests" field.
3. Select a tip percentage by clicking one of the preset buttons (15%, 18%, 20%) or by using the slider to choose a custom percentage.
4. The results will automatically update at the bottom of the page, showing the tip amount, the total amount with the tip, and how much each person should pay.

• React: For building the user interface.
• React Router: For routing and navigation.
• Hono: For the server-side framework.
• Deno: As the JavaScript/TypeScript runtime.
• Server-Side Rendering (SSR): The application is rendered on the server for a fast initial load and then hydrated on the client for interactivity.

.
├── client.tsx
├── deno.json
├── README.md
├── routes.tsx
└── server.tsx

• server.tsx: Sets up the Hono server, handles server-side rendering of the React application, and serves the client-side JavaScript.
• client.tsx: Hydrates the server-rendered HTML on the client-side to make the application interactive.
• routes.tsx: Defines the application's routes and contains the main Home component with the tip calculator's logic and UI.
• deno.json: Configuration file for the Deno runtime.

This application is built using a modern web stack that leverages server-side rendering (SSR) for optimal performance.

1. Server-Side Rendering: When you first visit the application, the server.tsx file (which uses the Hono framework) renders the initial HTML on the server. This HTML is sent to your browser, allowing you to see the page content immediately.
2. Client-Side Hydration: The client.tsx file is then loaded by the browser. It "hydrates" the server-rendered HTML, which means it attaches the necessary JavaScript event listeners and makes the page interactive. This allows the tip calculator to respond to your input in real-time without needing to reload the page.
3. React Components: The user interface is built with React components defined in routes.tsx. The Home component manages the state of the bill amount, number of guests, and tip percentage, and it performs the calculations whenever these values change.