[{"_1":2,"_132":-5,"_133":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_130":-5,"_126":-5,"_131":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":57,"_58":57,"_59":60,"_61":57,"_62":57,"_63":57,"_64":57,"_65":57,"_66":57,"_67":17,"_68":17,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_92":-5,"_93":17,"_94":95,"_126":30,"_127":128,"_129":17},"id","e8299820ae89559d0019","isMyApp",false,"name","chargewise","description","Your Tesla's new best friend that predicts exactly when chargers will be free, routes you through the most scenic charging stops, and turns every charging session into a mini social hub where you can chat with fellow Tesla owners nearby. Watch your battery fill up with satisfying animations while discovering hidden gems around each charging location!","brief","Tesla charging made magical with predictions, scenic routes, and instant driver connections!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/e8299820ae89559d0019/88943_81fa835d.webp","cdnUrl","https://cdn.dev.fun/app/e8299820ae89559d0019/88943","createdAt",["D",1752907021924],"updatedAt",["D",1752912228000],"lastCommitId",["B","88943"],"tier",1,"credits",-4,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"f476b3ed-80d4-4838-95dc-4085cfe54e5f","uniqueId","HaiXpwNsg2x9ikQ26KDEyuU3C6duv9ZSoxMG3w6PDmkm","username","solanaWallet","displayName","Hai...mkm","bio","avatar","/avatar.svg","commitCount",4,"forkCount",0,"likeCount","runsCount",6,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","J47j3ucZrCqnn1bJmyecaxpRRvZ1ZWvwvg8XEeq1Hdev","code","import { useState, useEffect } from 'react';\nimport { Battery, MapPin, Users, Route, Star, Clock, Zap, MessageCircle, Navigation, Coffee, Camera, TreePine, Car, Bot, Pause } from 'lucide-react';\nimport { io } from 'socket.io-client';\nconst socket = io('wss://ws.dev.fun/app-e8299820ae89559d0019');\nexport default function App() {\n const [batteryLevel, setBatteryLevel] = useState(65);\n const [isCharging, setIsCharging] = useState(false);\n const [selectedStation, setSelectedStation] = useState(null);\n const [userCount, setUserCount] = useState(0);\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n const [currentLocation] = useState('Palo Alto, CA');\n const [, setChargingAnimation] = useState(0);\n const [autonomousFleetActive, setAutonomousFleetActive] = useState(true);\n const [autonomousCars, setAutonomousCars] = useState([{\n id: 'AUTO-001',\n name: 'Model S Plaid',\n batteryLevel: 23,\n status: 'driving',\n destination: 'Tesla Supercharger - Scenic Valley',\n estimatedArrival: '8 min',\n distanceToCharger: '3.2 miles',\n chargingProgress: 0\n }, {\n id: 'AUTO-002',\n name: 'Model 3 Performance',\n batteryLevel: 89,\n status: 'charging',\n destination: 'Tesla Supercharger - Mountain View',\n estimatedArrival: 'Arrived',\n distanceToCharger: '0 miles',\n chargingProgress: 89\n }, {\n id: 'AUTO-003',\n name: 'Model Y Long Range',\n batteryLevel: 45,\n status: 'routing',\n destination: 'Finding optimal charger...',\n estimatedArrival: 'Calculating...',\n distanceToCharger: '--',\n chargingProgress: 0\n }, {\n id: 'AUTO-004',\n name: 'Cybertruck',\n batteryLevel: 67,\n status: 'idle',\n destination: 'Standby',\n estimatedArrival: '--',\n distanceToCharger: '--',\n chargingProgress: 0\n }]);\n const chargingStations = [{\n id: 1,\n name: 'Tesla Supercharger - Scenic Valley',\n location: 'Big Sur, CA',\n distance: '2.3 miles',\n availableStalls: 8,\n totalStalls: 12,\n predictedWaitTime: '5 min',\n scenicRating: 5,\n amenities: ['Restaurant', 'Restroom', 'Shopping'],\n hiddenGems: ['Bixby Creek Bridge View', 'Local Artisan Coffee', 'Hiking Trail']\n }, {\n id: 2,\n name: 'Tesla Supercharger - Mountain View',\n location: 'Mountain View, CA',\n distance: '5.7 miles',\n availableStalls: 15,\n totalStalls: 20,\n predictedWaitTime: '0 min',\n scenicRating: 4,\n amenities: ['Shopping', 'Food Court'],\n hiddenGems: ['Tech Museum', 'Sculpture Garden', 'Local Brewery']\n }, {\n id: 3,\n name: 'Tesla Supercharger - Coastal Route',\n location: 'Half Moon Bay, CA',\n distance: '12.1 miles',\n availableStalls: 6,\n totalStalls: 10,\n predictedWaitTime: '15 min',\n scenicRating: 5,\n amenities: ['Beach Access', 'Restaurant'],\n hiddenGems: ['Pumpkin Patches', 'Harbor Views', 'Seal Watching']\n }];\n useEffect(() => {\n socket.on('devfun:user_count', count => {\n setUserCount(count);\n });\n socket.on('charging_chat', message => {\n setMessages(prev => [...prev, message]);\n });\n return () => {\n socket.off('devfun:user_count');\n socket.off('charging_chat');\n };\n }, []);\n useEffect(() => {\n let interval;\n if (isCharging) {\n interval = setInterval(() => {\n setChargingAnimation(prev => (prev + 1) % 100);\n setBatteryLevel(prev => Math.min(100, prev + 0.5));\n }, 200);\n }\n return () => clearInterval(interval);\n }, [isCharging]);\n useEffect(() => {\n if (!autonomousFleetActive) return;\n const interval = setInterval(() => {\n setAutonomousCars(prevCars => prevCars.map(car => {\n if (car.status === 'driving') {\n const newBattery = Math.max(1, car.batteryLevel - 0.1);\n if (Math.random() < 0.1) {\n return {\n ...car,\n status: 'charging',\n batteryLevel: newBattery,\n estimatedArrival: 'Arrived',\n distanceToCharger: '0 miles',\n chargingProgress: newBattery\n };\n }\n return {\n ...car,\n batteryLevel: newBattery,\n estimatedArrival: `${Math.max(1, parseInt(car.estimatedArrival) - 1)} min`\n };\n } else if (car.status === 'charging') {\n const newBattery = Math.min(100, car.batteryLevel + 0.8);\n if (newBattery >= 100) {\n return {\n ...car,\n status: 'idle',\n batteryLevel: 100,\n destination: 'Fully Charged',\n chargingProgress: 100\n };\n }\n return {\n ...car,\n batteryLevel: newBattery,\n chargingProgress: newBattery\n };\n } else if (car.status === 'routing') {\n if (Math.random() < 0.2) {\n const destinations = ['Tesla Supercharger - Scenic Valley', 'Tesla Supercharger - Mountain View', 'Tesla Supercharger - Coastal Route'];\n return {\n ...car,\n status: 'driving',\n destination: destinations[Math.floor(Math.random() * destinations.length)],\n estimatedArrival: `${Math.floor(Math.random() * 15) + 5} min`,\n distanceToCharger: `${(Math.random() * 10 + 1).toFixed(1)} miles`\n };\n }\n return car;\n } else if (car.status === 'idle' && car.batteryLevel < 30) {\n return {\n ...car,\n status: 'routing',\n destination: 'Finding optimal charger...',\n estimatedArrival: 'Calculating...'\n };\n }\n return car;\n }));\n }, 2000);\n return () => clearInterval(interval);\n }, [autonomousFleetActive]);\n const sendMessage = () => {\n if (newMessage.trim()) {\n const message = {\n id: Date.now(),\n user: 'You',\n text: newMessage,\n timestamp: new Date().toLocaleTimeString()\n };\n socket.emit('charging_chat', message);\n setNewMessage('');\n }\n };\n const toggleCharging = () => {\n setIsCharging(!isCharging);\n };\n const getBatteryColor = (level = batteryLevel) => {\n if (level > 80) return 'from-green-400 to-green-600';\n if (level > 50) return 'from-yellow-400 to-yellow-600';\n if (level > 20) return 'from-orange-400 to-orange-600';\n return 'from-red-400 to-red-600';\n };\n const getStallStatus = (available, total) => {\n const percentage = available / total * 100;\n if (percentage > 60) return 'text-green-500';\n if (percentage > 30) return 'text-yellow-500';\n return 'text-red-500';\n };\n const getStatusColor = status => {\n switch (status) {\n case 'driving':\n return 'text-blue-400';\n case 'charging':\n return 'text-green-400';\n case 'routing':\n return 'text-yellow-400';\n case 'idle':\n return 'text-gray-400';\n default:\n return 'text-gray-400';\n }\n };\n const getStatusIcon = status => {\n switch (status) {\n case 'driving':\n return ;\n case 'charging':\n return ;\n case 'routing':\n return ;\n case 'idle':\n return ;\n default:\n return ;\n }\n };\n return

\n {}\n

\n \n

\n Chargewise\n

Your Tesla's Smart Companion

\n \n {userCount} Tesla owners nearby\n

\n \n {currentLocation}\n

\n\n

\n {}\n

\n \n Battery Status\n

\n \n {}\n

\n {isCharging &&

}\n {isCharging &&

\n \n

}\n

\n {Math.round(batteryLevel)}%\n {isCharging &&

\n \n Charging...\n

}\n

\n\n \n

\n\n {}\n

\n \n Autonomous Fleet\n

\n \n

\n {autonomousCars.map(car =>

{car.name}

{car.id}

\n {getStatusIcon(car.status)}\n {car.status}\n

\n \n {}\n

\n {Math.round(car.batteryLevel)}%\n {car.status === 'charging' && \n \n Charging\n }\n

\n \n

\n Destination:\n {car.destination}\n

\n {car.estimatedArrival !== '--' &&

\n ETA:\n {car.estimatedArrival}\n

}\n

)}\n

\n\n {}\n

\n \n Tesla Owners Chat\n

\n \n

\n {messages.length === 0 &&

\n \n Start chatting with fellow Tesla owners!\n

}\n {messages.map(msg =>

\n {msg.user}\n {msg.timestamp}\n

{msg.text}

)}\n

\n\n

\n setNewMessage(e.target.value)} onKeyPress={e => e.key === 'Enter' && sendMessage()} placeholder=\"Share your charging experience...\" className=\"flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n \n

\n\n {}\n

\n \n Scenic Charging Routes\n

\n \n

\n\n

\n {chargingStations.map(station =>

setSelectedStation(station)}>\n

{station.name}

\n \n {station.location} • {station.distance}\n

\n {[...Array(station.scenicRating)].map((_, i) => )}\n

\n\n

\n \n \n {station.availableStalls}/{station.totalStalls} available\n \n

\n \n {station.predictedWaitTime} wait\n

\n\n

\n {station.amenities.map(amenity => \n {amenity}\n )}\n

\n\n

\n \n Hidden Gems Nearby:\n

\n {station.hiddenGems.map(gem => \n {gem}\n )}\n

)}\n

\n\n {}\n

\n \n

Scenic Routes

\n \n

Local Gems

\n \n

{userCount}

Owners Online

\n \n

{autonomousCars.filter(car => car.status === 'driving' || car.status === 'charging').length}

Auto Cars

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"socket.io-client\":\"4.7.1\"}}","appFunctions",[],"token",{"_18":79,"_80":81,"_82":57,"_83":84,"_85":86,"_87":88,"_89":-5,"_90":40,"_91":40,"_69":70},"TCHARGER","symbol","TCHARG","price","marketcap",4943.39948483,"image","https://pump.mypinata.cloud/ipfs/QmexwWNjDNia8DiRSP77HHSMecVHwD1syCbRWaay2XH5Qp?img-width=256&img-dpr=2","website","https://dev.fun/p/e8299820ae89559d0019","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[96,100,102,104,106,108,110,112,114,116,118,120,122,124],{"_97":98,"_99":57},"day","2025-07-06","runCount",{"_97":101,"_99":57},"2025-07-07",{"_97":103,"_99":57},"2025-07-08",{"_97":105,"_99":57},"2025-07-09",{"_97":107,"_99":57},"2025-07-10",{"_97":109,"_99":57},"2025-07-11",{"_97":111,"_99":57},"2025-07-12",{"_97":113,"_99":57},"2025-07-13",{"_97":115,"_99":57},"2025-07-14",{"_97":117,"_99":57},"2025-07-15",{"_97":119,"_99":57},"2025-07-16",{"_97":121,"_99":57},"2025-07-17",{"_97":123,"_99":57},"2025-07-18",{"_97":125,"_99":60},"2025-07-19","snapshot","ogImage","https://cdn.dev.fun/og/image/e8299820ae89559d0019/6165260d.webp","isDevbase","commitDetail","livestream","actionData","errors"]