// server.
js
Const express = require(‘express’);
Const bodyParser = require(‘body-parser’);
Const mongoose = require(‘mongoose’);
Const eventRoutes = require(‘./routes/eventRoutes’);
Const userRoutes = require(‘./routes/userRoutes’);
Const app = express();
// Connect to MongoDB
Mongoose.connect(‘mongodb://localhost/event_management_system’, { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => console.log(‘Connected to MongoDB’))
.catch(err => console.error(‘Error connecting to MongoDB:’, err));
App.use(bodyParser.json());
// Routes
App.use(‘/events’, eventRoutes);
App.use(‘/users’, userRoutes);
// Start server
Const PORT = process.env.PORT || 3000;
App.listen(PORT, () => console.log(`Server running on port ${PORT}`));
// eventRoutes.js
Const express = require(‘express’);
Const router = express.Router();
Const Event = require(‘../models/Event’);
// Create Event
Router.post(‘/’, async (req, res) => {
Try {
Const event = await Event.create(req.body);
Res.status(201).json(event);
} catch (err) {
Res.status(400).json({ message: err.message });
});
// Get All Events
Router.get(‘/’, async (req, res) => {
Try {
Const events = await Event.find();
Res.json(events);
} catch (err) {
Res.status(500).json({ message: err.message });
});
Module.exports = router;
// userRoutes.js
Const express = require(‘express’);
Const router = express.Router();
Const User = require(‘../models/User’);
// Register User
Router.post(‘/register’, async (req, res) => {
Try {
Const user = await User.create(req.body);
Res.status(201).json(user);
} catch (err) {
Res.status(400).json({ message: err.message });
});
// Login User
Router.post(‘/login’, async (req, res) => {
// Implement login logic using JWT
});
Module.exports = router;
// models/Event.js
Const mongoose = require(‘mongoose’);
Const eventSchema = new mongoose.Schema({
Title: { type: String, required: true },
Description: String,
Date: { type: Date, required: true },
Time: { type: String, required: true },
Venue: { type: String, required: true },
ticketPricing: [{
type: { type: String, required: true },
price: { type: Number, required: true },
availability: { type: Number, required: true }
}]
});
Module.exports = mongoose.model(‘Event’, eventSchema);
// models/User.js
Const mongoose = require(‘mongoose’);
Const userSchema = new mongoose.Schema({
Name: { type: String, required: true },
Email: { type: String, required: true },
Password: { type: String, required: true }
});
Module.exports = mongoose.model(‘User’, userSchema);
Front-end
// App.js
Import React, { useState, useEffect } from ‘react’;
Import axios from ‘axios’;
Import EventList from ‘./EventList’;
Import EventForm from ‘./EventForm’;
Function App() {
Const [events, setEvents] = useState([]);
useEffect(() => {
// Fetch events from backend when component mounts
Axios.get(‘/events’)
.then(res => {
setEvents(res.data);
})
.catch(err => console.error(‘Error fetching events:’, err));
}, []);
Const addEvent = (newEvent) => {
setEvents([...events, newEvent]);
};
Return (
<div className=”App”>
<h1>Event Management System</h1>
<EventForm addEvent={addEvent} />
<EventList events={events} />
</div>
);
}
Export default App;
// EventList.js
Import React from ‘react’;
Function EventList({ events }) {
Return (
<div>
<h2>Events</h2>
<ul>
{events.map(event => (
<li key={event._id}>
<h3>{event.title}</h3>
<p>Date: {event.date}</p>
<p>Time: {event.time}</p>
<p>Venue: {event.venue}</p>
{/* Add more event details here */}
</li>
))}
</ul>
</div>
);
Export default EventList;
// EventForm.js
Import React, { useState } from ‘react’;
Import axios from ‘axios’;
Function EventForm({ addEvent }) {
Const [formData, setFormData] = useState({
Title: ‘’,
Description: ‘’,
Date: ‘’,
Time: ‘’,
Venue: ‘’,
ticketPricing: []
});
Const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
Const handleSubmit = (e) => {
e.preventDefault();
axios.post(‘/events’, formData)
.then(res => {
addEvent(res.data);
setFormData({
title: ‘’,
description: ‘’,
date: ‘’,
time: ‘’,
venue: ‘’,
ticketPricing: []
});
})
.catch(err => console.error(‘Error creating event:’, err));
};
Return (
<div>
<h2>Create Event</h2>
<form onSubmit={handleSubmit}>
<input type=”text” name=”title” placeholder=”Title” value={formData.title}
onChange={handleChange} />
{/* Add more input fields for other event details */}
<button type=”submit”>Create</button>
</form>
</div>
);
Export default EventForm;
Css code for styling components:
/* styles.css */
/* App Styles */
.App {
Text-align: center;
}
/* Event List Styles */
.EventList {
Margin-top: 20px;
.EventList ul {
List-style-type: none;
Padding: 0;
.EventList li {
Border: 1px solid #ccc;
Border-radius: 5px;
Margin-bottom: 10px;
Padding: 10px;
.EventList li h3 {
Margin-top: 0;
/* Event Form Styles */
.EventForm {
Margin-top: 20px;
.EventForm input[type=”text”] {
Width: 100%;
Margin-bottom: 10px;
Padding: 8px;
Border: 1px solid #ccc;
Border-radius: 5px;
.EventForm button {
Padding: 8px 20px;
Background-color: #007bff;
Color: #fff;
Border: none;
Border-radius: 5px;
Cursor: pointer;
.EventForm button:hover {
Background-color: #0056b3;
Import this CSS file into your React components:
// App.js
Import React, { useState, useEffect } from ‘react’;
Import axios from ‘axios’;
Import EventList from ‘./EventList’;
Import EventForm from ‘./EventForm’;
Import ‘./styles.css’; // Import CSS file
Function App() {
// Component code...
}
// EventList.js
Import React from ‘react’;
Import ‘./styles.css’; // Import CSS file
Function EventList({ events }) {
// Component code...
// EventForm.js
Import React, { useState } from ‘react’;
Import axios from ‘axios’;
Import ‘./styles.css’; // Import CSS file
Function EventForm({ addEvent }) {
// Component code...
