Initial commit: RSVP Manager with React frontend and Express backend

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;