RyderTech/rsvp-manager
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Initial commit: RSVP Manager with React frontend and Express backend

Browse Source
This commit is contained in:
Joshua Ryder
2025-04-29 13:08:01 -04:00
commit b80879f46b
17 changed files with 697 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
.gitignore vendored Normal file
View File

@@ -0,0 +1,33 @@
# Dependencies
node_modules/
/.pnp
.pnp.js
# Testing
/coverage
# Production
/build
/dist
# Misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# IDE
.idea/
.vscode/
*.swp
*.swo
# Docker
.docker/

23
Dockerfile Normal file
View File

@@ -0,0 +1,23 @@
FROM node:18-alpine
WORKDIR /app
# Copy package files
COPY package*.json ./
COPY frontend/package*.json ./frontend/
# Install dependencies
RUN npm install
RUN cd frontend && npm install
# Copy source files
COPY . .
# Build frontend
RUN cd frontend && npm run build
# Expose port
EXPOSE 3000
# Start the application
CMD ["npm", "start"]

62
README.md Normal file
View File

@@ -0,0 +1,62 @@
# RSVP Manager
A modern event RSVP management system with a dark theme interface.
## Features
- User-friendly RSVP interface
- Event management
- Guest tracking
- Dark theme UI
- Containerized deployment
## Tech Stack
- Frontend: React with TypeScript
- Backend: Node.js/Express with TypeScript
- Database: MySQL
- Containerization: Docker
## Getting Started
### Prerequisites
- Docker
- Docker Compose
- Node.js (for local development)
### Installation
1. Clone the repository
2. Run `docker-compose up` to start the application
3. Access the application at `http://localhost:3000`
## Development
### Local Development Setup
1. Install dependencies:
```bash
# Install backend dependencies
cd backend
npm install
# Install frontend dependencies
cd ../frontend
npm install
```
2. Start the development servers:
```bash
# Start backend server
cd backend
npm run dev
# Start frontend server
cd ../frontend
npm start
```
## License
MIT

13
backend/Dockerfile Normal file
View File

@@ -0,0 +1,13 @@
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD ["npm", "run", "dev"]

26
backend/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "rsvp-manager-backend",
"version": "1.0.0",
"description": "Backend for RSVP Manager",
"main": "dist/index.js",
"scripts": {
"start": "node dist/index.js",
"dev": "nodemon src/index.ts",
"build": "tsc",
"test": "jest"
},
"dependencies": {
"express": "^4.18.2",
"mysql2": "^3.6.0",
"cors": "^2.8.5",
"dotenv": "^16.3.1"
},
"devDependencies": {
"@types/express": "^4.17.17",
"@types/node": "^20.4.5",
"@types/cors": "^2.8.13",
"typescript": "^5.1.6",
"nodemon": "^3.0.1",
"ts-node": "^10.9.1"
}
}

74
backend/src/index.ts Normal file
View File

@@ -0,0 +1,74 @@
import express from 'express';
import cors from 'cors';
import mysql from 'mysql2/promise';
import dotenv from 'dotenv';
dotenv.config();
const app = express();
const port = process.env.PORT || 5000;
// Middleware
app.use(cors());
app.use(express.json());
// Database connection
const pool = mysql.createPool({
host: process.env.DB_HOST || 'mysql',
user: process.env.DB_USER || 'root',
password: process.env.DB_PASSWORD || 'password',
database: process.env.DB_NAME || 'rsvp_db',
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0
});
// Routes
app.get('/api/events', async (req, res) => {
try {
const [rows] = await pool.query('SELECT * FROM events');
res.json(rows);
} catch (error) {
console.error('Error fetching events:', error);
res.status(500).json({ error: 'Internal server error' });
}
});
app.post('/api/events', async (req, res) => {
try {
const { title, description, date, location } = req.body;
const [result] = await pool.query(
'INSERT INTO events (title, description, date, location) VALUES (?, ?, ?, ?)',
[title, description, date, location]
);
res.status(201).json(result);
} catch (error) {
console.error('Error creating event:', error);
res.status(500).json({ error: 'Internal server error' });
}
});
// Initialize database tables
async function initializeDatabase() {
try {
await pool.query(`
CREATE TABLE IF NOT EXISTS events (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
date DATETIME NOT NULL,
location VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)
`);
console.log('Database initialized successfully');
} catch (error) {
console.error('Error initializing database:', error);
}
}
// Start server
app.listen(port, () => {
console.log(`Server running on port ${port}`);
initializeDatabase();
});

14
backend/tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}

33
docker-compose.yml Normal file
View File

@@ -0,0 +1,33 @@
version: '3.8'
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- .:/app
- /app/node_modules
environment:
- NODE_ENV=development
- DB_HOST=mysql
- DB_USER=root
- DB_PASSWORD=password
- DB_NAME=rsvp_db
depends_on:
- mysql
mysql:
image: mysql:8.0
ports:
- "3306:3306"
environment:
- MYSQL_ROOT_PASSWORD=password
- MYSQL_DATABASE=rsvp_db
volumes:
- mysql_data:/var/lib/mysql
volumes:
mysql_data:

13
frontend/Dockerfile Normal file
View File

@@ -0,0 +1,13 @@
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

39
frontend/package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "rsvp-manager-frontend",
"version": "1.0.0",
"description": "Frontend for RSVP Manager",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"axios": "^1.4.0",
"@mui/material": "^5.14.2",
"@mui/icons-material": "^5.14.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"typescript": "^5.1.6",
"react-scripts": "5.0.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

41
frontend/src/App.tsx Normal file
View File

@@ -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;

108
frontend/src/components/EventForm.tsx Normal file
View File

@@ -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;

76
frontend/src/components/EventList.tsx Normal file
View File

@@ -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;

13
frontend/src/index.tsx Normal file
View File

@@ -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>
);

20
frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}

26
package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "rsvp-manager",
"version": "1.0.0",
"description": "RSVP Manager - Combined Frontend and Backend",
"main": "src/index.ts",
"scripts": {
"start": "node dist/index.js",
"dev": "nodemon src/index.ts",
"build": "tsc && cd frontend && npm run build",
"test": "jest"
},
"dependencies": {
"express": "^4.18.2",
"mysql2": "^3.6.0",
"cors": "^2.8.5",
"dotenv": "^16.3.1"
},
"devDependencies": {
"@types/express": "^4.17.17",
"@types/node": "^20.4.5",
"@types/cors": "^2.8.13",
"typescript": "^5.1.6",
"nodemon": "^3.0.1",
"ts-node": "^10.9.1"
}
}

83
src/index.ts Normal file
View File

@@ -0,0 +1,83 @@
import express from 'express';
import cors from 'cors';
import mysql from 'mysql2/promise';
import dotenv from 'dotenv';
import path from 'path';
dotenv.config();
const app = express();
const port = process.env.PORT || 3000;
// Middleware
app.use(cors());
app.use(express.json());
// Database connection
const pool = mysql.createPool({
host: process.env.DB_HOST || 'mysql',
user: process.env.DB_USER || 'root',
password: process.env.DB_PASSWORD || 'password',
database: process.env.DB_NAME || 'rsvp_db',
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0
});
// Serve static files from the frontend build directory
app.use(express.static(path.join(__dirname, '../frontend/build')));
// API Routes
app.get('/api/events', async (req, res) => {
try {
const [rows] = await pool.query('SELECT * FROM events');
res.json(rows);
} catch (error) {
console.error('Error fetching events:', error);
res.status(500).json({ error: 'Internal server error' });
}
});
app.post('/api/events', async (req, res) => {
try {
const { title, description, date, location } = req.body;
const [result] = await pool.query(
'INSERT INTO events (title, description, date, location) VALUES (?, ?, ?, ?)',
[title, description, date, location]
);
res.status(201).json(result);
} catch (error) {
console.error('Error creating event:', error);
res.status(500).json({ error: 'Internal server error' });
}
});
// Serve the React app for all other routes
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../frontend/build/index.html'));
});
// Initialize database tables
async function initializeDatabase() {
try {
await pool.query(`
CREATE TABLE IF NOT EXISTS events (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
date DATETIME NOT NULL,
location VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)
`);
console.log('Database initialized successfully');
} catch (error) {
console.error('Error initializing database:', error);
}
}
// Start server
app.listen(port, () => {
console.log(`Server running on port ${port}`);
initializeDatabase();
});