Initial commit: RSVP Manager with React frontend and Express backend

frontend/src/App.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Container } from '@mui/material';
+import EventList from './components/EventList';
+import EventForm from './components/EventForm';
+
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#90caf9',
+    },
+    secondary: {
+      main: '#f48fb1',
+    },
+    background: {
+      default: '#121212',
+      paper: '#1e1e1e',
+    },
+  },
+});
+
+function App() {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <Router>
+        <Container maxWidth="md" sx={{ mt: 4 }}>
+          <Routes>
+            <Route path="/" element={<EventList />} />
+            <Route path="/create" element={<EventForm />} />
+          </Routes>
+        </Container>
+      </Router>
+    </ThemeProvider>
+  );
+}
+
+export default App; 

frontend/src/components/EventForm.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  TextField,
+  Typography,
+  Container,
+} from '@mui/material';
+import axios from 'axios';
+
+const EventForm: React.FC = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    date: '',
+    location: '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await axios.post('/api/events', formData);
+      navigate('/');
+    } catch (error) {
+      console.error('Error creating event:', error);
+    }
+  };
+
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ mt: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Create New Event
+        </Typography>
+        <form onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            label="Title"
+            name="title"
+            value={formData.title}
+            onChange={handleChange}
+            margin="normal"
+            required
+          />
+          <TextField
+            fullWidth
+            label="Description"
+            name="description"
+            value={formData.description}
+            onChange={handleChange}
+            margin="normal"
+            multiline
+            rows={4}
+          />
+          <TextField
+            fullWidth
+            label="Date and Time"
+            name="date"
+            type="datetime-local"
+            value={formData.date}
+            onChange={handleChange}
+            margin="normal"
+            required
+            InputLabelProps={{
+              shrink: true,
+            }}
+          />
+          <TextField
+            fullWidth
+            label="Location"
+            name="location"
+            value={formData.location}
+            onChange={handleChange}
+            margin="normal"
+            required
+          />
+          <Box sx={{ mt: 3, display: 'flex', gap: 2 }}>
+            <Button
+              variant="contained"
+              color="primary"
+              type="submit"
+            >
+              Create Event
+            </Button>
+            <Button
+              variant="outlined"
+              onClick={() => navigate('/')}
+            >
+              Cancel
+            </Button>
+          </Box>
+        </form>
+      </Box>
+    </Container>
+  );
+};
+
+export default EventForm; 

frontend/src/components/EventList.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Typography,
+  Grid,
+} from '@mui/material';
+import axios from 'axios';
+
+interface Event {
+  id: number;
+  title: string;
+  description: string;
+  date: string;
+  location: string;
+}
+
+const EventList: React.FC = () => {
+  const [events, setEvents] = useState<Event[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  const fetchEvents = async () => {
+    try {
+      const response = await axios.get('/api/events');
+      setEvents(response.data);
+    } catch (error) {
+      console.error('Error fetching events:', error);
+    }
+  };
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}>
+        <Typography variant="h4" component="h1">
+          Events
+        </Typography>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => navigate('/create')}
+        >
+          Create Event
+        </Button>
+      </Box>
+
+      <Grid container spacing={3}>
+        {events.map((event) => (
+          <Grid item xs={12} key={event.id}>
+            <Card>
+              <CardContent>
+                <Typography variant="h5" component="h2">
+                  {event.title}
+                </Typography>
+                <Typography color="textSecondary" gutterBottom>
+                  {new Date(event.date).toLocaleDateString()} at {event.location}
+                </Typography>
+                <Typography variant="body2" component="p">
+                  {event.description}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default EventList; 

frontend/src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);