Spaces:

nagur-shareef-shaik
/

InsuCompass

Sleeping

App Files Files Community

nagur-shareef-shaik commited on Jul 14, 2025

Commit

f884d0d

1 Parent(s): b3fe2bc

Add Application code

Browse files

Files changed (12) hide show

.gitignore +54 -0
Dockerfile +27 -0
index.html +13 -0
package.json +28 -0
postcss.config.js +6 -0
src/App.tsx +500 -0
src/index.css +17 -0
src/main.tsx +10 -0
tailwind.config.js +11 -0
tsconfig.json +21 -0
tsconfig.node.json +10 -0
vite.config.ts +10 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,54 @@

+# Node.js
+node_modules/
+npm-debug.log
+yarn-error.log
+package-lock.json
+# Vite
+/dist
+/.vite
+vite.config.ts.timestamp*
+# TypeScript
+*.tsbuildinfo
+# Environment variables
+.env
+.env.local
+.env.*.local
+# Build output
+/build
+/dist
+/out
+# IDE and editor files
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.swp
+# OS generated files
+.DS_Store
+Thumbs.db
+# Logs
+logs/
+*.log
+*.log.*
+# Cache
+.eslintcache
+.stylelintcache
+.cache
+# Testing
+/coverage
+# Miscellaneous
+*.bak
+*.tmp
+*.temp

Dockerfile ADDED Viewed

	@@ -0,0 +1,27 @@

+# Use official Node.js LTS as base image
+FROM node:18-alpine
+# Set working directory
+WORKDIR /app
+# Copy package.json and package-lock.json (if exists)
+COPY package*.json ./
+# Install dependencies
+RUN npm install
+# Copy all project files
+COPY . .
+# Build the application
+RUN npm run build
+# Expose port 3000 (Hugging Face Spaces default)
+EXPOSE 3000
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=3000
+# Start the application with Vite preview
+CMD ["npm", "run", "preview"]

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>InsuCompass AI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "name": "insucompass",
+  "version": "1.0.0",
+  "main": "index.js",
+ "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "lucide-react": "^0.263.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "vite": "^4.5.14"
+  }
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx ADDED Viewed

	@@ -0,0 +1,500 @@

+import React, { useState, useEffect, useRef } from 'react';
+import { Send, MapPin, User, Users, DollarSign, Briefcase, CheckCircle, MessageCircle, Bot } from 'lucide-react';
+// Types
+interface UserProfile {
+  zip_code?: string;
+  city?: string;
+  state?: string;
+  county?: string;
+  age?: number;
+  gender?: string;
+  household_size?: number;
+  income?: number;
+  employment_status?: string;
+  citizenship?: string;
+  medical_history?: string;
+  medications?: string;
+  special_cases?: string;
+}
+interface ChatMessage {
+  role: 'user' | 'agent';
+  content: string;
+  timestamp: number;
+}
+interface ApiResponse {
+  updated_profile: UserProfile;
+  updated_history: string[];
+  is_profile_complete: boolean;
+}
+// Constants
+const BACKEND_URL = "https://nagur-shareef-shaik-insucompass-api.hf.space/api";
+const InsuCompassApp: React.FC = () => {
+  const [threadId] = useState(() => crypto.randomUUID());
+  const [userProfile, setUserProfile] = useState<UserProfile>({});
+  const [chatHistory, setChatHistory] = useState<ChatMessage[]>([]);
+  const [isProfileComplete, setIsProfileComplete] = useState(false);
+  const [phase, setPhase] = useState<'profiling' | 'chat'>('profiling');
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentMessage, setCurrentMessage] = useState('');
+  const [isValidatingZip, setIsValidatingZip] = useState(false);
+  const [zipError, setZipError] = useState('');
+  const chatEndRef = useRef<HTMLDivElement>(null);
+  // Form state
+  const [formData, setFormData] = useState({
+    zip_code: '',
+    age: '',
+    gender: '',
+    household_size: '',
+    income: '',
+    employment_status: '',
+    citizenship: ''
+  });
+  // Auto-scroll to bottom of chat
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatHistory]);
+  // API Functions
+  const getGeodata = async (zipCode: string) => {
+    setIsValidatingZip(true);
+    setZipError('');
+    try {
+      const response = await fetch(`${BACKEND_URL}/geodata/${zipCode}`);
+      if (!response.ok) throw new Error('Invalid ZIP code');
+      const data = await response.json();
+      setUserProfile(prev => ({ ...prev, ...data }));
+      setFormData(prev => ({ ...prev, zip_code: zipCode }));
+      return data;
+    } catch (error) {
+      setZipError('Invalid ZIP code or could not retrieve location data');
+      return null;
+    } finally {
+      setIsValidatingZip(false);
+    }
+  };
+  const sendChatMessage = async (message: string) => {
+    setIsLoading(true);
+    try {
+      const payload = {
+        thread_id: threadId,
+        user_profile: userProfile,
+        message,
+        is_profile_complete: isProfileComplete,
+        conversation_history: chatHistory.map(msg => `${msg.role}: ${msg.content}`)
+      };
+      const response = await fetch(`${BACKEND_URL}/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) throw new Error('Failed to send message');
+      const data: ApiResponse = await response.json();
+      // Update state from backend response
+      setUserProfile(data.updated_profile);
+      setIsProfileComplete(data.is_profile_complete);
+      // Convert backend history format to our chat format
+      const newHistory: ChatMessage[] = data.updated_history.map(msg => {
+        const [role, ...contentParts] = msg.split(':');
+        return {
+          role: role.toLowerCase() as 'user' | 'agent',
+          content: contentParts.join(':').trim(),
+          timestamp: Date.now()
+        };
+      });
+      setChatHistory(newHistory);
+    } catch (error) {
+      console.error('Error sending message:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  // Handle ZIP code input
+  const handleZipChange = async (value: string) => {
+    const numericValue = value.replace(/\D/g, '').slice(0, 5);
+    setFormData(prev => ({ ...prev, zip_code: numericValue }));
+    if (numericValue.length === 5) {
+      await getGeodata(numericValue);
+    }
+  };
+  // Handle form submission
+  const handleSubmit = async () => {
+    // Validate all fields
+    const requiredFields = ['age', 'gender', 'household_size', 'income', 'employment_status', 'citizenship'];
+    const missingFields = requiredFields.filter(field => !formData[field as keyof typeof formData]);
+    if (missingFields.length > 0) {
+      alert('Please fill out all fields to continue.');
+      return;
+    }
+    // Update user profile
+    const updatedProfile = {
+      ...userProfile,
+      age: parseInt(formData.age),
+      gender: formData.gender,
+      household_size: parseInt(formData.household_size),
+      income: parseInt(formData.income),
+      employment_status: formData.employment_status,
+      citizenship: formData.citizenship
+    };
+    setUserProfile(updatedProfile);
+    setPhase('chat');
+    // Start profile building conversation
+    await sendChatMessage('START_PROFILE_BUILDING');
+  };
+  // Handle chat message send
+  const handleSendMessage = async () => {
+    if (!currentMessage.trim()) return;
+    // Add user message to chat immediately
+    const userMessage: ChatMessage = {
+      role: 'user',
+      content: currentMessage,
+      timestamp: Date.now()
+    };
+    setChatHistory(prev => [...prev, userMessage]);
+    const messageToSend = currentMessage;
+    setCurrentMessage('');
+    await sendChatMessage(messageToSend);
+  };
+  // Render profile form
+  const renderProfileForm = () => (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b">
+        <div className="max-w-4xl mx-auto px-6 py-4">
+          <div className="flex items-center space-x-3">
+            <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
+              <span className="text-white font-bold text-xl">🧭</span>
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
+              <p className="text-sm text-gray-600">Your AI guide to U.S. Health Insurance</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Main Content */}
+      <div className="max-w-2xl mx-auto px-6 py-12">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 mb-4">Let's Get Started</h2>
+          <p className="text-lg text-gray-600">Tell us about yourself to receive personalized insurance guidance</p>
+        </div>
+        <div className="space-y-6">
+          {/* ZIP Code Section */}
+          <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+            <div className="flex items-center space-x-3 mb-4">
+              <MapPin className="w-5 h-5 text-blue-500" />
+              <h3 className="text-lg font-semibold text-gray-900">Location</h3>
+            </div>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  ZIP Code
+                </label>
+                <input
+                  type="text"
+                  value={formData.zip_code}
+                  onChange={(e) => handleZipChange(e.target.value)}
+                  placeholder="Enter your 5-digit ZIP code"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                  maxLength={5}
+                />
+                {isValidatingZip && (
+                  <p className="text-sm text-blue-600 mt-1">Validating ZIP code...</p>
+                )}
+                {zipError && (
+                  <p className="text-sm text-red-600 mt-1">{zipError}</p>
+                )}
+              </div>
+              {userProfile.city && (
+                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+                  <div className="flex items-center space-x-2">
+                    <CheckCircle className="w-5 h-5 text-green-500" />
+                    <span className="font-medium text-green-800">Location Verified</span>
+                  </div>
+                  <p className="text-sm text-green-700 mt-1">
+                    {userProfile.county} County, {userProfile.city}, {userProfile.state}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+          {/* Personal Information */}
+          {userProfile.city && (
+            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+              <div className="flex items-center space-x-3 mb-4">
+                <User className="w-5 h-5 text-blue-500" />
+                <h3 className="text-lg font-semibold text-gray-900">Personal Information</h3>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Age</label>
+                  <input
+                    type="number"
+                    value={formData.age}
+                    onChange={(e) => setFormData(prev => ({ ...prev, age: e.target.value }))}
+                    placeholder="Enter your age"
+                    min="1"
+                    max="120"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Gender</label>
+                  <select
+                    value={formData.gender}
+                    onChange={(e) => setFormData(prev => ({ ...prev, gender: e.target.value }))}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                  >
+                    <option value="">Select an option</option>
+                    <option value="Male">Male</option>
+                    <option value="Female">Female</option>
+                    <option value="Non-binary">Non-binary</option>
+                    <option value="Prefer not to say">Prefer not to say</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          )}
+          {/* Household Information */}
+          {userProfile.city && (
+            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+              <div className="flex items-center space-x-3 mb-4">
+                <Users className="w-5 h-5 text-blue-500" />
+                <h3 className="text-lg font-semibold text-gray-900">Household Information</h3>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Household Size</label>
+                  <input
+                    type="number"
+                    value={formData.household_size}
+                    onChange={(e) => setFormData(prev => ({ ...prev, household_size: e.target.value }))}
+                    placeholder="Including yourself"
+                    min="1"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Annual Income</label>
+                  <div className="relative">
+                    <DollarSign className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
+                    <input
+                      type="number"
+                      value={formData.income}
+                      onChange={(e) => setFormData(prev => ({ ...prev, income: e.target.value }))}
+                      placeholder="55000"
+                      min="0"
+                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {/* Employment & Citizenship */}
+          {userProfile.city && (
+            <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
+              <div className="flex items-center space-x-3 mb-4">
+                <Briefcase className="w-5 h-5 text-blue-500" />
+                <h3 className="text-lg font-semibold text-gray-900">Employment & Status</h3>
+              </div>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Employment Status</label>
+                  <select
+                    value={formData.employment_status}
+                    onChange={(e) => setFormData(prev => ({ ...prev, employment_status: e.target.value }))}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                  >
+                    <option value="">Select an option</option>
+                    <option value="Employed with employer coverage">Employed with employer coverage</option>
+                    <option value="Employed without coverage">Employed without coverage</option>
+                    <option value="Unemployed">Unemployed</option>
+                    <option value="Retired">Retired</option>
+                    <option value="Student">Student</option>
+                    <option value="Self-employed">Self-employed</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Citizenship Status</label>
+                  <select
+                    value={formData.citizenship}
+                    onChange={(e) => setFormData(prev => ({ ...prev, citizenship: e.target.value }))}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                  >
+                    <option value="">Select an option</option>
+                    <option value="US Citizen">US Citizen</option>
+                    <option value="Lawful Permanent Resident">Lawful Permanent Resident</option>
+                    <option value="Other legal resident">Other legal resident</option>
+                    <option value="Non-resident">Non-resident</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          )}
+          {/* Submit Button */}
+          {userProfile.city && (
+            <button
+              onClick={handleSubmit}
+              disabled={isLoading}
+              className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-8 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? 'Starting Session...' : 'Start My Personalized Session'}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+  // Render chat interface
+  const renderChatInterface = () => (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex flex-col">
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b">
+        <div className="max-w-4xl mx-auto px-6 py-4">
+          <div className="flex items-center space-x-3">
+            <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
+              <span className="text-white font-bold text-xl">🧭</span>
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
+              <p className="text-sm text-gray-600">Chat with your AI insurance advisor</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Chat Messages */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-4xl mx-auto px-6 py-8">
+          <div className="space-y-6">
+            {chatHistory.map((message, index) => (
+              <div
+                key={index}
+                className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+              >
+                <div className={`flex items-start space-x-3 max-w-3xl ${message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''}`}>
+                  {/* Avatar */}
+                  <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                    message.role === 'user'
+                      ? 'bg-blue-500 text-white'
+                      : 'bg-gradient-to-r from-purple-500 to-pink-500 text-white'
+                  }`}>
+                    {message.role === 'user' ? (
+                      <User className="w-5 h-5" />
+                    ) : (
+                      <Bot className="w-5 h-5" />
+                    )}
+                  </div>
+                  {/* Message Bubble */}
+                  <div className={`px-6 py-4 rounded-2xl shadow-sm ${
+                    message.role === 'user'
+                      ? 'bg-blue-500 text-white rounded-tr-sm'
+                      : 'bg-white text-gray-900 rounded-tl-sm border border-gray-200'
+                  }`}>
+                    <div className="text-sm font-medium mb-1 opacity-75">
+                      {message.role === 'user' ? 'You' : 'InsuCompass AI'}
+                    </div>
+                    <div className="whitespace-pre-wrap">{message.content}</div>
+                  </div>
+                </div>
+              </div>
+            ))}
+            {/* Loading indicator */}
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="flex items-start space-x-3">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center">
+                    <Bot className="w-5 h-5" />
+                  </div>
+                  <div className="bg-white px-6 py-4 rounded-2xl rounded-tl-sm border border-gray-200">
+                    <div className="flex space-x-2">
+                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                      <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div ref={chatEndRef} />
+          </div>
+        </div>
+      </div>
+      {/* Message Input */}
+      <div className="bg-white border-t border-gray-200 p-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="flex items-center space-x-4">
+            <div className="flex-1 relative">
+              <input
+                type="text"
+                value={currentMessage}
+                onChange={(e) => setCurrentMessage(e.target.value)}
+                onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+                placeholder="Type your message..."
+                className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                disabled={isLoading}
+              />
+              <button
+                onClick={handleSendMessage}
+                disabled={isLoading || !currentMessage.trim()}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                <Send className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+  return phase === 'profiling' ? renderProfileForm() : renderChatInterface();
+};
+export default InsuCompassApp;

src/index.css ADDED Viewed

	@@ -0,0 +1,17 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,11 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true
+  }
+})