fix: resolve JSON.parse error in frontend API calls

- Add error handling for JSON encoding in all backend handlers
- Add CORS support to backend server
- Add proxy configuration for frontend development server
- Improve error handling in frontend API calls
- Build frontend to create static files for backend serving
- Add comprehensive error messages and user feedback

Fixes issue where frontend received malformed JSON responses from backend API.

frontend/src/App.tsx

@@ -23,10 +23,14 @@ const App: React.FC = () => {
   const fetchFiles = async () => {
     try {
       const response = await fetch('/api/files');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
       const data = await response.json();
       setFiles(data.files || []);
     } catch (error) {
       console.error('Error fetching files:', error);
+      // Optionally show an error message to the user
     }
   };
 
@@ -45,19 +49,27 @@ const App: React.FC = () => {
         }),
       });
 
-      if (response.ok) {
-        setNewFilename('');
-        setNewContent('');
-        fetchFiles();
+      if (!response.ok) {
+        const errorData = await response.json();
+        alert(`Error creating file: ${errorData.error || 'Unknown error'}`);
+        return;
       }
+
+      setNewFilename('');
+      setNewContent('');
+      fetchFiles();
     } catch (error) {
       console.error('Error creating file:', error);
+      alert('Error creating file. Please check console for details.');
     }
   };
 
   const handleOpenFile = async (filename: string) => {
     try {
       const response = await fetch(`/api/files/${filename}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
       const data = await response.json();
       setCurrentFile({
         filename,
@@ -83,11 +95,16 @@ const App: React.FC = () => {
         }),
       });
 
-      if (response.ok) {
-        alert('File saved successfully!');
+      if (!response.ok) {
+        const errorData = await response.json();
+        alert(`Error saving file: ${errorData.error || 'Unknown error'}`);
+        return;
       }
+
+      alert('File saved successfully!');
     } catch (error) {
       console.error('Error saving file:', error);
+      alert('Error saving file. Please check console for details.');
     }
   };
 
@@ -99,14 +116,19 @@ const App: React.FC = () => {
         method: 'DELETE',
       });
 
-      if (response.ok) {
-        fetchFiles();
-        if (currentFile?.filename === filename) {
-          setCurrentFile(null);
-        }
+      if (!response.ok) {
+        const errorData = await response.json();
+        alert(`Error deleting file: ${errorData.error || 'Unknown error'}`);
+        return;
+      }
+
+      fetchFiles();
+      if (currentFile?.filename === filename) {
+        setCurrentFile(null);
       }
     } catch (error) {
       console.error('Error deleting file:', error);
+      alert('Error deleting file. Please check console for details.');
     }
   };
 

frontend/src/setupProxy.js

@@ -0,0 +1,11 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: 'http://localhost:8080',
+      changeOrigin: true,
+    })
+  );
+};