basic html

package.json

@@ -14,7 +14,7 @@
     "react-scripts": "3.4.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -33,5 +33,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.8.8",
+    "postcss": "^7.0.39",
+    "tailwindcss": "^2.2.19"
   }
 }

src/App.js

@@ -1,43 +1,23 @@
-import React, { Component } from "react";
-import { Switch, Route, Link } from "react-router-dom";
-import "bootstrap/dist/css/bootstrap.min.css";
-import "./App.css";
+import React from 'react';
+import Sidebar from './components/Sidebar';
+import Rooms from './components/Rooms';
+import EnergyStats from './components/EnergyStats';
+import Devices from './components/Devices';
+import History from './components/History';
+import './App.css';
 
-import AddTutorial from "./components/add-tutorial.component";
-import TutorialsList from "./components/tutorials-list.component";
-
-class App extends Component {
-  render() {
-    return (
-      <div>
-        <nav className="navbar navbar-expand navbar-dark bg-dark">
-          <a href="/tutorials" className="navbar-brand">
-            bezKoder
-          </a>
-          <div className="navbar-nav mr-auto">
-            <li className="nav-item">
-              <Link to={"/tutorials"} className="nav-link">
-                Tutorials
-              </Link>
-            </li>
-            <li className="nav-item">
-              <Link to={"/add"} className="nav-link">
-                Add
-              </Link>
-            </li>
-          </div>
-        </nav>
-
-        <div className="container mt-3">
-          <h2>React Firebase Database CRUD</h2>
-          <Switch>
-            <Route exact path={["/", "/tutorials"]} component={TutorialsList} />
-            <Route exact path="/add" component={AddTutorial} />
-          </Switch>
-        </div>
-      </div>
-    );
-  }
+function App() {
+  return (
+    <div className="flex min-h-screen bg-gray-100 text-gray-800">
+      <Sidebar />
+      <main className="flex-1 p-6 overflow-y-auto">
+        <Rooms />
+        <EnergyStats />
+        <Devices />
+        <History />
+      </main>
+    </div>
+  );
 }
 
 export default App;

src/components/Devices.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Devices = () => {
+  const devices = [
+    { name: 'Air Conditioner', on: false },
+    { name: 'Smart TV', on: true },
+    { name: 'Coffee Machine', on: false },
+    { name: 'Refrigerator', on: true }
+  ];
+
+  return (
+    <section className="mb-6">
+      <h2 className="text-xl font-semibold mb-4">Devices</h2>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {devices.map(device => (
+          <div key={device.name} className="bg-white rounded-xl shadow p-4 text-center">
+            <p className="mb-2">{device.name}</p>
+            <span className={`inline-block px-3 py-1 rounded-full text-white text-sm ${device.on ? 'bg-green-500' : 'bg-gray-400'}`}>
+              {device.on ? 'On' : 'Off'}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Devices;

src/components/EnergyStats.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const EnergyStats = () => {
+  return (
+    <section className="mb-6">
+      <h2 className="text-xl font-semibold mb-4">Kitchen Energy</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="bg-white rounded-xl shadow p-4 text-center">
+          <p className="text-sm text-gray-500">Today</p>
+          <p className="text-2xl font-bold">20.6 kWh</p>
+        </div>
+        <div className="bg-white rounded-xl shadow p-4">
+          <p className="text-sm text-gray-500 mb-2">Total Energy This Week</p>
+          <div className="flex justify-between text-sm text-gray-600">
+            {['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(day => (
+              <span key={day}>{day}</span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default EnergyStats;

src/components/History.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const History = () => {
+  const logs = [
+    { device: 'Air Conditioner', action: 'Turned on', time: '03:20 PM' },
+    { device: 'Refrigerator', action: 'Turned on', time: '01:48 PM' },
+    { device: 'Air Conditioner', action: 'Turned off', time: '11:36 AM' },
+    { device: 'Coffee Machine', action: 'Turned off', time: '09:15 AM' }
+  ];
+
+  return (
+    <section>
+      <h2 className="text-xl font-semibold mb-4">History</h2>
+      <div className="bg-white rounded-xl shadow p-4">
+        {logs.map((log, idx) => (
+          <div key={idx} className="flex justify-between border-b py-2 text-sm text-gray-700">
+            <span>{log.device}</span>
+            <span>{log.action}</span>
+            <span>{log.time}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default History;

src/components/Rooms.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Rooms = () => {
+  const rooms = ['Living Room', 'Bedroom', 'Bathroom', 'Kitchen'];
+
+  return (
+    <section className="mb-6">
+      <h2 className="text-xl font-semibold mb-4">Rooms</h2>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {rooms.map(room => (
+          <div key={room} className="bg-white rounded-xl shadow p-4 text-center">
+            {room}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Rooms;

src/components/Sidebar.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Sidebar = () => {
+  return (
+    <nav className="w-64 bg-white border-r p-6 hidden md:block">
+      <h1 className="text-2xl font-bold mb-10">Menu</h1>
+      <ul className="space-y-6 font-medium">
+        {['Home', 'Insights', 'Recommends', 'Messages', 'Settings', 'Profile', 'Logout'].map(item => (
+          <li key={item}>
+            <a href="#" className="hover:text-blue-600 block">{item}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default Sidebar;

src/firebase.js

@@ -1,16 +1,23 @@
 import * as firebase from "firebase";
 import "firebase/database";
 
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+
 let config = {
-  apiKey: "xxx",
-  authDomain: "bezkoder-firebase.firebaseapp.com",
-  databaseURL: "https://bezkoder-firebase.firebaseio.com",
-  projectId: "bezkoder-firebase",
-  storageBucket: "bezkoder-firebase.appspot.com",
-  messagingSenderId: "xxx",
-  appId: "xxx",
+  apiKey: "AIzaSyCA8c1dWH2vkCdH68Sm8kqgvG_87MEXJ2A",
+  authDomain: "smart-energy-firebase-18cbf.firebaseapp.com",
+  databaseURL: "https://smart-energy-firebase-18cbf-default-rtdb.firebaseio.com",
+  projectId: "smart-energy-firebase-18cbf",
+  storageBucket: "smart-energy-firebase-18cbf.firebasestorage.app",
+  messagingSenderId: "193973073460",
+  appId: "1:193973073460:web:13f73fad7ef07bc9fafc61",
+  measurementId: "G-5NV0FHH646"
 };
 
 firebase.initializeApp(config);
+// Initialize Firebase
+//const analytics = getAnalytics(app);
 
 export default firebase.database();
+

src/index.css

@@ -11,3 +11,6 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;