DEPARTMENT OF COMPUTER SCIENCE AND

ENGINEERING

Object Oriented Analysis and Design

SUBMITTED BY:

SITHARTH S 22TD0402

RAGUL S 22TD0390

LOKESH KRISHNA S 22TD0350

CLASS: III CSE - B

DATE: 07/05/2025

Project Title: SMART - HOME-

STIMULATION

Guided
By: Mrs. R. Indumathi,
M.Tech, [Assistant
Professor, MVIT
 INTRODUCTION:

The Smart Home Simulation is a web-based application designed to replicate the functionality of a connected
and automated home environment. It provides users with an interactive blueprint of a household layout, allowing them
to simulate movement between rooms and control various virtual home functions such as lighting, alarms, and smart
devices. With the rising adoption of IoT (Internet of Things) and home automation technologies, understanding how
smart systems function in a domestic setting has become increasingly relevant.

Built using modern web development technologies, the system features a blueprint-style interface where users can
navigate through rooms like the Living Room, Kitchen, Bedroom, Bathroom, Office, and Utility Room. Functional
controls such as directional movement, simulated voice commands (e.g., “Clap”), and emergency triggers like fire
alarms are included to emulate real-world smart home scenarios. This simulation serves as both an educational and
demonstrative platform, showcasing how automation and intelligent controls can enhance daily living.

The project incorporates object-oriented programming, interactive UI design, and logical control flows to simulate a
responsive smart home system. It aims to provide a scalable, user-friendly, and informative experience that reflects
the practical applications of home automation.

PROBLEM STATEMENT:
In today's rapidly evolving technological landscape, the concept of smart homes is gaining widespread
attention. However, many individuals still lack practical exposure to how these systems function. Existing smart home
solutions often require costly hardware and technical setups, making it difficult for users—especially students and
enthusiasts—to explore and understand home automation concepts effectively.
Moreover, there is a gap in accessible, interactive platforms that demonstrate smart home functionalities in a
controlled, risk-free environment. Users are unable to experiment with room-to-room navigation, automation
commands, or emergency protocols without specialized equipment. The Smart Home Simulation addresses this gap by
offering a web-based alternative that mimics key features of a smart home, allowing users to learn and interact
without physical installations or expenses.

OBJECTIVE:
The primary objective of this project is to design and develop an intelligent, secure, and user-friendly
Skincare The primary objective of this project is to design and develop an interactive, responsive, and educational
Smart Home Simulation that visually represents a connected household and allows users to explore smart
automation functionalities such as room navigation, device control, and command execution—all within a web
environment.

KEY OBJECTIVES:
 To build a web-based simulation that replicates a smart home layout, including multiple rooms and dynamic
controls.

 To use modern frontend technologies such as TypeScript, Tailwind CSS, and Vite to create a clean, modular, and
responsive interface.

 To implement interactive features such as room-to-room movement, smart actions (e.g., triggering alarms, clap-
based commands), and real-time status updates.

 To simulate smart automation behavior that reflects real-world IoT home systems using client-side logic and
intuitive UI components.

 To provide a lightweight and educational environment for users to learn about smart home functionality without
needing physical devices or hardware integration.
SYSTEM REQUIREMENTS:

Software Requirements:

 Node.js and npm (for package management and development server)

 TypeScript (for type-safe application logic)
 Vite (as a fast build tool and development server)
 Tailwind CSS (for responsive and utility-first styling)
 HTML5 and CSS3 (core web technologies)
 Web Browser: Google Chrome, Firefox, Edge, etc.
 Code Editor: VS Code / WebStorm / Any TypeScript-supported IDE

Hardware Requirements:

 Processor: Intel i3 or higher / AMD equivalent

 RAM: Minimum 4 GB
 Disk Space: Minimum 500 MB
 Operating System: Windows / Linux / macOS
 Display: Any modern display supporting minimum 1366x768 resolution
SYSTEM DESIGN:
USE CASE DIAGRAM:

The Use Case Diagram visually represents the interaction between users and the skincare
recommendation system. It highlights the functionalities that users and administrators can perform, focusing on
their roles and actions.

System Architecture Overview:

SOURCE CODE:
@startuml

' Define actors actor

User actor Admin

' Define system boundary

rectangle "Skincare Recommendation System" {

' User interactions with the system

User --> (Register) : "Sign up to system"

User --> (Input Skin Details) : "Provide skin type & concerns" User --> (Receive Recommendations) :
"Get skincare suggestions"
User --> (Rate Products) : "Give feedback on recommended products"

User --> (View Product Info) : "See details of recommended products"

' Admin actions

Admin --> (Update Product Data) : "Modify skincare product database"

@enduml
CLASS DIAGRAM:
The Class Diagram models key entities: User, Product, Recommendation Engine, Feedback, and
Admin. Users interact with Products via Feedback, while the Recommendation Engine processes data to suggest
products. The admin manages product updates.

System Architecture Overview:

SOURCE CODE:
@startuml
' Define User class with attributes class User {
+UserID : int
+SkinType : String
+Preferences : String
}

' Define Product class with attributes class Product {

+ProductID : int
+Name : String
+Ingredients : String
}

' Define RecommendationEngine class with attributes class RecommendationEngine {

+AlgorithmType : String
+SuggestedProducts : List<Product>
}

' Relationships between classes

User "1" -- "*" Product: selects ' User selects multiple
products RecommendationEngine "1" -- "*" Product:
suggests '
Recommendation engine suggests products @enduml
IMPLEMENTATION DETAILS:
The Smart Home Simulation was implemented using modern web development technologies, with a clear
separation of concerns across frontend, logic controls, and interactivity. The project adopts a modular, component-
based approach that ensures scalability, maintainability, and a smooth user experience. Below is a detailed breakdown
of the system's architecture and implementation:

1. Frontend (User Interface):

1) Built using TypeScript, HTML5, and Tailwind CSS for a clean, responsive, and utility-first design.

2) Vite was used as the build tool for fast development and module bundling.

3) Interactive UI includes a blueprint layout with clearly marked sections for each room (Living Room, Kitchen,
Bedroom, Bathroom, Office, Utility Room).

4) Directional controls (↑ ← ↓ →) and action buttons like Clap, Trigger Fire Alarm, and Execute Command are
available for user interaction.

5) Real-time status updates show the current room location and executed actions.

2. Component Logic and Interactivity:

1) The system is modularly designed using TypeScript, allowing typed logic and better development experience.

2) A central state management mechanism tracks the user’s current location, handles movement commands, and
responds to action inputs.

3) Room transitions are visually updated to reflect movement, simulating navigation within a smart home.

4) The system also includes logic for triggering virtual smart actions like lighting, fire alarm simulation, and command
execution.

3. Project Structure and Tooling

1) Project dependencies and scripts are managed via package.json, ensuring clean setup and ease of maintenance.

2) Tailwind CSS was configured using PostCSS and integrated through vite.config.ts for a streamlined
development pipeline.

3) The application is optimized for performance using Vite’s hot module replacement and fast refresh features.
4)Core Logic Module

Located in the main application file (e.g., main.ts, App.tsx, or relevant component structure depending
on the framework used).

Handles all user interactions such as directional navigation (↑ ← ↓ →), triggering room-based events
(e.g., Trigger Fire Alarm), and interpreting command-based actions (e.g., Clap).

Room names and movement logic are managed using a 2D array or object-based mapping to simulate
a physical house blueprint.

Action commands update the status bar dynamically to reflect the current location and most recent
action.

Designed using TypeScript for strong type safety and predictable behavior.

5)State Management and Local Storage

State variables (e.g., currentRoom, actionLog) are managed within the frontend using native React
hooks or a custom store if applicable.

User interactions are tracked in real time to simulate stateful behavior within the house (e.g., fire alarm
stays triggered until reset).

Local storage is used to persist user session data such as the last visited room or last executed
command, enabling session recovery across browser reloads.

Optional expansion includes adding temporary user preferences or saved command history using
localStorage or sessionStorage.

6)Testing

Manual testing was conducted to ensure consistent and logical behavior across all UI elements and
controls.

Test scenarios included:

Valid directional input and correct room transition

Edge cases like moving beyond allowed blueprint boundaries

Action handling for commands like Clap or Fire Alarm in different room contexts

UI responsiveness and layout behavior across device sizes

User interaction testing ensured all buttons are functional and status updates occur as expected.

 Additional logic debugging included console trace of room state transitions and UI feedback for
invalid actions.
Output Screenshots:

 User movement monitor:

 In the Status box we can monitor the person movement and where the person / track the person
real-time

 Automatic fan and light:

 When the user enters the room , it automatically turn on the light and the fan at the room
 Remote access of the devices :

 When the user can access the devices at anywhere at anytime, remote access of the device
The dialog box of the process will show as the suggestion in the website

 Chick the button execute after selecting the process to be done in the remote access of the devices
 Clap to turn on the devices :

 When the user claps the hand the device will turn on in the room, every room as the specific

device, It will turn on while clap at the room

 Emergency Fire Alarm Activate system :

 When the room gets fire , It automatically indicates to the Fire department and ambulance
 CONCLUSION:
The Skincare Recommendation System successfully demonstrates how machine learning, secure
authentication, and web technologies can be integrated to solve a real-world problem in the health and wellness
domain. The system provides personalized skincare product recommendations based on user inputs such as skin
type and concerns (e.g., acne, pigmentation), using the K-Nearest Neighbors algorithm.

The implementation of user registration and login using secure password hashing ensures privacy and data
protection. The use of Flask as a lightweight web framework, combined with a clean and responsive UI powered
by Bootstrap, makes the application both accessible and user-friendly.

This project not only applies object-oriented design principles and machine learning concepts but also offers
a practical solution that can be expanded into a commercial or clinical product. With future improvements like
user feedback, product rating, and image-based recommendations, the system has the potential to evolve into a
full- featured skincare assistant platform.

APPENDIX:
Source Code:
App.tsx:
import React, { useState, useEffect } from 'react';
import { DoorOpen as Door, LightbulbOff, Lightbulb as LightbulbOn, Fan, User2, Bell, Siren, Tv, ShowerHead,
Hand, Search,Droplets,RotateCcw,Monitor,Snowflake,Computer, WashingMachine, Laptop } from 'lucide-react';
import { Toaster, toast } from 'react-hot-toast';

function App() {
const [position, setPosition] = useState({ x: 100, y: 100 });
const [currentRoom, setCurrentRoom] = useState('outside');
const [fireAlarm, setFireAlarm] = useState(false);
const [selectedCommand, setSelectedCommand] = useState('');
const [roomStates, setRoomStates] = useState({
livingRoom: { light: false, fan: false, tv: false },
kitchen: { light: false, fan: false, dishwasher: false },
bedroom: { light: false, fan: false, ac: false },
bathroom: { light: false, fan: false, shower: false },
office: { light: false, fan: false, computer: false },
utilityRoom: { light: false, fan: false, washer: false }
});

const commands = [
{ value: 'living-room-light', label: (state) => `Turn ${state.livingRoom.light ? 'off' : 'on'} living room light` },
{ value: 'living-room-tv', label: (state) => `Turn ${state.livingRoom.tv ? 'off' : 'on'} TV` },
{ value: 'bathroom-light', label: (state) => `Turn ${state.bathroom.light ? 'off' : 'on'} bathroom light` },
{ value: 'bathroom-shower', label: (state) => `Turn ${state.bathroom.shower ? 'off' : 'on'} showe` },
{ value: 'kitchen-light', label: (state) => `Turn ${state.kitchen.light ? 'off' : 'on'} kitchen light` },
{ value: 'kitchen-dishwasher', label: (state) => `Turn ${state.kitchen.dishwasher ? 'off' : 'on'} dishwasher` },
{ value: 'bedroom-light', label: (state) => `Turn ${state.bedroom.light ? 'off' : 'on'} bedroom light` },
{ value: 'bedroom-ac', label: (state) => `Turn ${state.bedroom.ac ? 'off' : 'on'} AC` },
{ value: 'office-light', label: (state) => `Turn ${state.office.light ? 'off' : 'on'} office light` },
{ value: 'office-computer', label: (state) => `Turn ${state.office.computer ? 'off' : 'on'} computer` },
{ value: 'utility-room-light', label: (state) => `Turn ${state.utilityRoom.light ? 'off' : 'on'} utility room light` },
{ value: 'utility-room-washer', label: (state) => `Turn ${state.utilityRoom.washer ? 'off' : 'on'} washer` }
];

const executeCommand = () => {

if (!selectedCommand) return;
 setRoomStates(prev => {
const newState = { ...prev };

switch (selectedCommand) {
case 'living-room-light':
newState.livingRoom.light = !newState.livingRoom.light;
toast.success(`Living room light ${newState.livingRoom.light ? 'turned on' : 'turned off'}`);
break;
case 'living-room-tv':
newState.livingRoom.tv = !newState.livingRoom.tv;
toast.success(`TV ${newState.livingRoom.tv ? 'turned on' : 'turned off'}`);
break;
case 'bathroom-light':
newState.bathroom.light = !newState.bathroom.light;
toast.success(`Bathroom light ${newState.bathroom.light ? 'turned on' : 'turned off'}`);
break;
case 'bathroom-shower':
newState.bathroom.shower = !newState.bathroom.shower;
toast.success(`Shower ${newState.bathroom.shower ? 'turned on' : 'turned off'}`);
break;
case 'kitchen-light':
newState.kitchen.light = !newState.kitchen.light;
toast.success(`Kitchen light ${newState.kitchen.light ? 'turned on' : 'turned off'}`);

break;
case 'kitchen-dishwasher':
newState.kitchen.dishwasher = !newState.kitchen.dishwasher;
toast.success(`Dishwasher ${newState.kitchen.dishwasher ? 'turned on' : 'turned off'}`);
break;
case 'bedroom-light':
newState.bedroom.light = !newState.bedroom.light;
toast.success(`Bedroom light ${newState.bedroom.light ? 'turned on' : 'turned off'}`);
break;
case 'bedroom-ac':
newState.bedroom.ac = !newState.bedroom.ac;
toast.success(`AC ${newState.bedroom.ac ? 'turned on' : 'turned off'}`);
break;
case 'office-light':
newState.office.light = !newState.office.light;
toast.success(`Office light ${newState.office.light ? 'turned on' : 'turned off'}`);
break;
case 'office-computer':
newState.office.computer = !newState.office.computer;
toast.success(`Computer ${newState.office.computer ? 'turned on' : 'turned off'}`);
break;
case 'utility-room-light':
newState.utilityRoom.light = !newState.utilityRoom.light;
toast.success(`Utility room light ${newState.utilityRoom.light ? 'turned on' : 'turned off'}`);
break;
case 'utility-room-washer':
newState.utilityRoom.washer = !newState.utilityRoom.washer;
toast.success(`Washer ${newState.utilityRoom.washer ? 'turned on' : 'turned off'}`);
break;
}

return newState;
});

setSelectedCommand('');
};

const rooms = {
livingRoom: { x: [50, 300], y: [50, 200], name: 'Living Room' },
kitchen: { x: [350, 600], y: [50, 200], name: 'Kitchen' },
 bedroom: { x: [50, 300], y: [250, 400], name: 'Bedroom' },
bathroom: { x: [350, 600], y: [250, 400], name: 'Bathroom' },
office: { x: [350, 600], y: [450, 550], name: 'Office' },
utilityRoom: { x: [50, 300], y: [450, 550], name: 'Utility Room' }
};

const doors = {
livingRoom: [{ x: 300, y: 125 }],
kitchen: [{ x: 350, y: 125 }],
bedroom: [{ x: 300, y: 325 }],
bathroom: [{ x: 350, y: 325 }],
office: [{ x: 350, y: 500 }],
utilityRoom: [{ x: 300, y: 500 }]
};

const handleClap = () => {

if (currentRoom === 'outside') return;

setRoomStates(prev => {
const newState = { ...prev };
switch (currentRoom) {
case 'livingRoom':
newState.livingRoom.tv = !newState.livingRoom.tv;
toast.success(

`TV ${newState.livingRoom.tv ? 'Started Playing' : 'Turned Off'}`,

{ icon: '📺' }
);
break;
case 'bathroom':
newState.bathroom.shower = !newState.bathroom.shower;
toast.success(
`Shower ${newState.bathroom.shower ? 'Started' : 'Stopped'}`,
{ icon: '🚿' }
);
break;
case 'kitchen':
newState.kitchen.dishwasher = !newState.kitchen.dishwasher;
toast.success(
`Dishwasher ${newState.kitchen.dishwasher ? 'Started' : 'Stopped'}`,
{ icon: '' }
);
break;
case 'bedroom':
newState.bedroom.ac = !newState.bedroom.ac;
toast.success(
`AC ${newState.bedroom.ac ? 'Turned On' : 'Turned Off'}`,
{ icon: '' }
);
break;
case 'office':
newState.office.computer = !newState.office.computer;
toast.success(
`Computer ${newState.office.computer ? 'Started' : 'Shut Down'}`,
{ icon: '💻' }
);
break;
case 'utilityRoom':
newState.utilityRoom.washer = !newState.utilityRoom.washer;
toast.success(
`Washing Machine ${newState.utilityRoom.washer ? 'Started' : 'Stopped'}`,
{ icon: '🧺' }
);
break;
 }
return newState;
});
};

const isNearDoor = (x: number, y: number) => {

const doorProximity = 30;
return Object.entries(doors).some(([_, doorList]) =>
doorList.some(door =>
Math.abs(x - door.x) < doorProximity &&
Math.abs(y - door.y) < doorProximity
)
);
};

const moveCharacter = (direction) => {

const step = 20;
const newPosition = { ...position };

switch (direction) {
case 'up':
newPosition.y -= step;

break;
case 'down':
newPosition.y += step;
break;

case 'left':
newPosition.x -= step
break;
case 'right':
newPosition.x += step;
break;
}

if (newPosition.x >= 0 && newPosition.x <= 650 &&

newPosition.y >= 0 && newPosition.y <= 600) {

let currentRoomKey = 'outside';

let newRoomKey = 'outside';

Object.entries(rooms).forEach(([key, room]) => {

if (position.x >= room.x[0] && position.x <= room.x[1] &&
position.y >= room.y[0] && position.y <= room.y[1]) {
currentRoomKey = key;
}
if (newPosition.x >= room.x[0] && newPosition.x <= room.x[1] &&
newPosition.y >= room.y[0] && newPosition.y <= room.y[1]) {
newRoomKey = key;
}
});

if (currentRoomKey === newRoomKey ||

(isNearDoor(position.x, position.y) && (currentRoomKey === 'outside' || newRoomKey === 'outside'))) {
setPosition(newPosition);
}
}
};

const triggerFireAlarm = () => {

setFireAlarm(true);
 toast.error(
<div className="flex items-center gap-2">
<Siren className="w-6 h-6 text-red-500" />
<div>
<p className="font-bold">Fire Alarm Activated!</p>
<p className="text-sm">Fire Department has been notified</p>
</div>
</div>,
{
duration: 5000,
position: 'top-center',
}
);
setTimeout(() => {
setFireAlarm(false);
}, 5000);
};

useEffect(() => {
let newRoom = 'outside';
Object.entries(rooms).forEach(([roomKey, room]) => {
if (position.x >= room.x[0] && position.x <= room.x[1] &&

position.y >= room.y[0] && position.y <= room.y[1]) {

newRoom = roomKey;
}
});

if (newRoom !== currentRoom) {

if (currentRoom !== 'outside') {
setRoomStates(prev => ({

...prev,
[currentRoom]: { ...prev[currentRoom], light: false, fan: false }
}));
}

if (newRoom !== 'outside') {

setRoomStates(prev => ({
...prev,
[newRoom]: { ...prev[newRoom], light: true, fan: true }
}));
}

setCurrentRoom(newRoom);
}
}, [position]);

useEffect(() => {
const handleKeyPress = (event: KeyboardEvent) => {
switch (event.key.toLowerCase()) {
case 'w':
moveCharacter('up');
break;
case 's':
moveCharacter('down');
break;
case 'a':
moveCharacter('left');
break;
case 'd':
moveCharacter('right');
break;
 }
};

window.addEventListener('keydown', handleKeyPress);

return () => {
window.removeEventListener('keydown', handleKeyPress);
};
}, [position]);

return (
<div className="min-h-screen bg-[#1a365d] p-8">
<Toaster />
<div className="max-w-7xl mx-auto">
<h1 className="text-3xl font-bold mb-6 text-white">Blueprint House Layout</h1>

<div className="flex gap-8">

<div className="flex-1">
<div className="mb-6 flex gap-4">
<select
value={selectedCommand}
onChange={(e) => setSelectedCommand(e.target.value)}

className="flex-1 bg-[#0f2847] text-white border border-white/20 rounded-lg px-4 py-2 focus:outline-none

focus:ring-2 focus:ring-white/30"
>
<option value="">Select a command...</option>
{commands.map(command => (
<option key={command.value} value={command.value}>
{command.label(roomStates)}
</option>
))}
</select>
<button
onClick={executeCommand}

disabled={!selectedCommand}
className="bg-indigo-600/80 text-white px-6 py-2 rounded-lg hover:bg-indigo-700/80 disabled:opacity-50
disabled:cursor-not-allowed flex items-center gap-2"
>
<Search className="w-5 h-5" />
Execute
</button>
</div>

<div
className="relative rounded-lg p-4"
style={{
height: '600px',
background: '#0f2847',
backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg,
rgba(255, 255, 255, 0.1) 1px, transparent 1px)',
backgroundSize: '20px 20px'
}}
>
{Object.entries(rooms).map(([key, room]) => (
<div
key={key}
className="absolute border-2 border-white/30 rounded-lg p-4 transition-colors duration-300"
style={{
left: room.x[0],
top: room.y[0],
width: room.x[1] - room.x[0],
 height: room.y[1] - room.y[0],
backgroundColor: roomStates[key].light ? 'rgba(255, 255, 255, 0.1)' : 'transparent'
}}
>
<div className="flex justify-between items-start">
<span className="font-semibold text-white/90">{room.name}</span>
<div className="flex gap-2">
{roomStates[key].light ?
<LightbulbOn className="w-5 h-5 text-yellow-300" /> :
<LightbulbOff className="w-5 h-5 text-white/50" />
}
{roomStates[key].fan &&
<Fan className="w-5 h-5 text-blue-300 animate-spin" />
}
{key === 'livingRoom' && roomStates[key].tv &&
<Tv className="w-5 h-5 text-green-300" />
}
{key === 'bathroom' && roomStates[key].shower &&
<ShowerHead className="w-5 h-5 text-blue-300" />
}
{key === 'kitchen' && roomStates[key].dishwasher &&

<Droplets className="w-5 h-5 text-blue-300" />

}
{key === 'bedroom' && roomStates[key].ac &&
<Snowflake className="w-5 h-5 text-blue-300" />
}
{key === 'utilityRoom' && roomStates[key].washer &&
<WashingMachine className="w-5 h-5 text-blue-300" />
}
{key === 'office' && roomStates[key].computer &&
<Laptop className="w-5 h-5 text-blue-300" />
}

</div>
</div>
</div>
))}

{Object.entries(doors).map(([key, doorList]) =>

doorList.map((door, index) => (
<Door
key={`${key}-${index}`}
className="absolute text-white/70 w-8 h-8 transform -translate-x-1/2 -translate-y-1/2"
style={{ left: door.x, top: door.y }}
/>
))
)}

<User2
className="absolute transition-all duration-200 text-yellow-300 w-8 h-8 transform -translate-x-1/2 -
translate-y-1/2 z-10"
style={{ left: position.x, top: position.y }}
/>

{fireAlarm && (
<div className="absolute inset-0 bg-red-500/20 animate-pulse rounded-lg" />
)}
</div>
</div>
 <div className="w-64 space-y-4">
<div className="bg-[#0f2847] rounded-lg shadow-lg p-6 border border-white/20">
<h2 className="text-xl font-semibold mb-4 text-white">Controls</h2>
<div className="grid grid-cols-3 gap-2 w-48 mx-auto">
<div></div>
<button
onClick={() => moveCharacter('up')}
className="bg-white/10 text-white p-3 rounded hover:bg-white/20 flex items-center justify-center"
>
↑
</button>
<div></div>

<button
onClick={() => moveCharacter('left')}
className="bg-white/10 text-white p-3 rounded hover:bg-white/20 flex items-center justify-center"
>
←
</button>
<button
onClick={() => moveCharacter('down')}
className="bg-white/10 text-white p-3 rounded hover:bg-white/20 flex items-center justify-center"

>
↓
</button>
<button
onClick={() => moveCharacter('right')}
className="bg-white/10 text-white p-3 rounded hover:bg-white/20 flex items-center justify-center"
>
→
</button>
</div>
</div>

<div className="bg-[#0f2847] rounded-lg shadow-lg p-6 border border-white/20">

<h2 className="text-xl font-semibold mb-4 text-white">Actions</h2>
<button
onClick={handleClap}
className="w-full bg-indigo-600/80 text-white p-4 rounded-lg hover:bg-indigo-700/80 flex items-center
justify-center gap-2 mb-4"
>

<Hand className="w-5 h-5" />

Clap
</button>
<button
onClick={triggerFireAlarm}
className="w-full bg-red-600/80 text-white p-4 rounded-lg hover:bg-red-700/80 flex items-center justify-
center gap-2"
>
<Bell className="w-5 h-5" />
Trigger Fire Alarm
</button>
</div>

<div className="bg-[#0f2847] rounded-lg shadow-lg p-6 border border-white/20">

<h2 className="text-xl font-semibold mb-2 text-white">Status</h2>
<p className="text-white/80">Current Location: {currentRoom === 'outside' ? 'Outside' :
rooms[currentRoom].name}</p>
</div>
</div>
</div>
 </div>
</div>
);
}

export default App

Main.tsx:

import { StrictMode } from 'react';

import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';

const rootElement = document.getElementById('root');

if (!rootElement) throw new Error('Failed to find the root element');

createRoot(rootElement).render(
<App />
);

Index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
}

body {
margin: 0;
min-width: 320px;
min-height: 100vh;
}

Package.json:

{
"name": "vite-react-typescript-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hot-toast": "^2.4.1"
},
"devDependencies": {
"@eslint/js": "^9.9.1",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.18",
}
}