// 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...