Building a Simple Event Management App with MERN Stack

mkdir event-manager && cd event-manager
npm init -y
npm install express mongoose
mkdir models routes

{
  "scripts": {
    "start": "node server.js",
    "dev": "node --watch --env-file=.env server.js"
  }
}

MONGODB_URI=mongodb+srv://USER:[email protected]/events
PORT=5000

const { Schema, model } = require('mongoose');

const eventSchema = new Schema(
  {
    title: { type: String, required: true, trim: true, maxlength: 120 },
    description: { type: String, trim: true, maxlength: 2000 },
    date: { type: Date, required: true },
    location: { type: String, required: true, trim: true },
  },
  { timestamps: true }
);

module.exports = model('Event', eventSchema);

const express = require('express');
const Event = require('../models/Event');

const router = express.Router();
const pick = ({ title, description, date, location }) => ({ title, description, date, location });

router.get('/', async (req, res) => {
  res.json(await Event.find().sort({ date: 1 }));
});

router.get('/:id', async (req, res) => {
  const event = await Event.findById(req.params.id);
  if (!event) return res.status(404).json({ error: 'Event not found' });
  res.json(event);
});

router.post('/', async (req, res) => {
  const event = await Event.create(pick(req.body));
  res.status(201).json(event);
});

router.put('/:id', async (req, res) => {
  const event = await Event.findByIdAndUpdate(req.params.id, pick(req.body), {
    new: true,
    runValidators: true,
  });
  if (!event) return res.status(404).json({ error: 'Event not found' });
  res.json(event);
});

router.delete('/:id', async (req, res) => {
  const event = await Event.findByIdAndDelete(req.params.id);
  if (!event) return res.status(404).json({ error: 'Event not found' });
  res.status(204).end();
});

module.exports = router;

const path = require('path');
const express = require('express');
const mongoose = require('mongoose');
const eventRoutes = require('./routes/events');

const app = express();
app.use(express.json());
app.use('/api/events', eventRoutes);

// Serve the built React app
const clientDist = path.join(__dirname, 'client', 'dist');
app.use(express.static(clientDist));
app.use((req, res, next) => {
  if (req.method !== 'GET' || req.path.startsWith('/api')) return next();
  res.sendFile(path.join(clientDist, 'index.html'));
});

// Bad input gives 400; anything else gives 500 without leaking details
app.use((err, req, res, next) => {
  const badInput = err.name === 'ValidationError' || err.name === 'CastError';
  if (!badInput) console.error(err);
  res.status(badInput ? 400 : 500).json({ error: badInput ? err.message : 'Server error' });
});

const port = process.env.PORT || 5000;

mongoose
  .connect(process.env.MONGODB_URI)
  .then(() => app.listen(port, '0.0.0.0', () => console.log(`Listening on port ${port}`)))
  .catch((err) => {
    console.error('MongoDB connection failed:', err.message);
    process.exit(1);
  });

curl -X POST http://localhost:5000/api/events \
  -H "Content-Type: application/json" \
  -d '{"title":"Annual meetup","date":"2026-12-05","location":"Community Hall"}'

curl http://localhost:5000/api/events

npm create vite@latest client -- --template react
cd client
npm install

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { proxy: { '/api': 'http://localhost:5000' } },
});

import { useEffect, useState } from 'react';

const empty = { title: '', description: '', date: '', location: '' };

export default function App() {
  const [events, setEvents] = useState([]);
  const [form, setForm] = useState(empty);
  const [error, setError] = useState('');

  async function load() {
    const res = await fetch('/api/events');
    setEvents(await res.json());
  }

  useEffect(() => { load(); }, []);

  async function handleSubmit(e) {
    e.preventDefault();
    setError('');
    const res = await fetch('/api/events', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    });
    if (!res.ok) return setError((await res.json()).error);
    setForm(empty);
    load();
  }

  async function remove(id) {
    await fetch(`/api/events/${id}`, { method: 'DELETE' });
    load();
  }

  const field = (name) => (e) => setForm({ ...form, [name]: e.target.value });

  return (
    <main>
      <h1>Events</h1>
      <form onSubmit={handleSubmit}>
        <input placeholder="Title" value={form.title} onChange={field('title')} required />
        <input type="date" value={form.date} onChange={field('date')} required />
        <input placeholder="Location" value={form.location} onChange={field('location')} required />
        <textarea placeholder="Description" value={form.description} onChange={field('description')} />
        <button type="submit">Add event</button>
      </form>
      {error && <p role="alert">{error}</p>}
      <ul>
        {events.map((ev) => (
          <li key={ev._id}>
            <strong>{ev.title}</strong>, {new Date(ev.date).toLocaleDateString('en-IN')}, {ev.location}
            <button onClick={() => remove(ev._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </main>
  );
}

npm run build --prefix event-manager/client
tar czf app.tar.gz --exclude=node_modules --exclude=.git --exclude=.env -C event-manager .