Awokeprincewill/Computer-Scienc-E-Learning-App

1import React, { useEffect, useState } from 'react';
2import ReactDOM from 'react-dom/client';
3
4function App() {
5  const [status, setStatus] = useState("Connecting to backend...");
6
7  useEffect(() => {
8    // Replace this with your actual Hugging Face Space URL + /
9    fetch('https://awokeprincewill-computer-scienc-e-learning-app.hf.space/')
10      .then(res => res.json())
11      .then(data => setStatus(data.status))
12      .catch(err => setStatus("Backend not reaching. Check CORS settings!"));
13  }, []);
14
15  return (
16    <div style={{ textAlign: 'center', marginTop: '50px', fontFamily: 'sans-serif' }}>
17      <h1>🎓 Computer Science E-Learning</h1>
18      <div style={{ padding: '20px', border: '1px solid #ccc', display: 'inline-block' }}>
19        <strong>Backend Status:</strong> 
20        <span style={{ color: status.includes('Running') ? 'green' : 'red' }}> {status}</span>
21      </div>
22    </div>
23  );
24}
25
26ReactDOM.createRoot(document.getElementById('root')).render(<App />);