Event Dashboard using MERN Stack

// In server/server.js, initialize the server and connect to MongoDB.

import express, { json } from 'express';
import cors from 'cors';
import { connect } from 'mongoose';
import eventRoute from './routes/eventRoute.js';

const app = express();
const port = 4000;

app.use(cors());

app.use(json());

// Connect to MongoDB
connect('mongodb://localhost/mydatabase', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
})
    .then(() => console.log('Connected to MongoDB'))
    .catch((error) =>
        console.error('Failed to connect to MongoDB', error));

// Define your routes here
app.use('/events', eventRoute);


app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

// server/routes/eventRoute.js

import { Router } from 'express';
import eventCon from '../controllers/eventCon.js';

const router = Router();

// Define your routes here
router.get('/', eventCon.getAllEvents);

router.get('/:id', eventCon.getEventById);

router.post('/', eventCon.createEvent);

router.put('/:id', eventCon.updateEvent);

router.delete('/:id', eventCon.deleteEvent);

export default router;

// server/models/eventSchema.js is the schema for the event model. It contains the title, description, date, and location of the event. 

import { Schema, model } from 'mongoose';

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

const Event = model('Event', eventSchema);

export default Event;

// server/controllers/eventCon.js

import Event from '../models/eventSchema.js';

const eventController = {
    // Create a new event
    createEvent: async (req, res) => {
        try {
            const { title, description, date, location } = req.body;
            const event = new Event({
                title,
                description,
                date,
                location
            });
            await event.save();
            res.status(201).json(event);
        } catch (error) {
            res.status(500).json({
                error: error.message
            });
        }
    },

    // Get all events
    getAllEvents: async (req, res) => {
        try {
            const events = await Event.find();
            res.json(events);
        } catch (error) {
            res.status(500).json({
                error: error.message
            });
        }
    },

    // Get a single event by ID
    getEventById: async (req, res) => {
        try {
            const { id } = req.params;
            const event = await Event.findById(id);
            if (!event) {
                return res.status(404).json({
                    message: 'Event not found'
                });
            }
            res.json(event);
        } catch (error) {
            res.status(500).json({
                error: error.message
            });
        }
    },

    // Update an event by ID
    updateEvent: async (req, res) => {
        try {
            const { id } = req.params;
            const { title, description, date, location } = req.body;
            const event = await Event.findByIdAndUpdate(id,
                {
                    title,
                    description,
                    date,
                    location
                },
                { new: true });
            if (!event) {
                return res.status(404).json({
                    message: 'Event not found'
                });
            }
            res.json(event);
        } catch (error) {
            res.status(500).json({
                error: error.message
            });
        }
    },

    // Delete an event by ID
    deleteEvent: async (req, res) => {
        try {
            const { id } = req.params;
            const event = await Event.findByIdAndDelete(id);
            if (!event) {
                return res.status(404).json({
                    message: 'Event not found'
                });
            }
            res.json({
                message: 'Event deleted successfully'
            });
        } catch (error) {
            res.status(500).json({
                error: error.message
            });
        }
    },
};

export default eventController;

// client/src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import App from './App.jsx'
import Home from './Home.jsx'
import Update from './Update.jsx'
import "./App.css"

ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter>
        <React.StrictMode>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/dashboard" element={<App />} />
                <Route path="/update/:id" element={<Update />} />
            </Routes>
        </React.StrictMode>
    </BrowserRouter>
)

// client/src/Home.jsx

import React, {
    useEffect,
    useState
} from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const Home = () => {
    const [events, setEvents] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:4000/events')
            .then(response => {
                setEvents(response.data);
                console.log(response.data);
            })
            .catch(error => {
                console.error('Error fetching events:',
                    error);
            });
    }, []);

    return (
        <div>
            <div className="container">
                <nav className="navbar navbar-expand-lg 
                                navbar-light bg-light">
                    <div className="container my-2">
                        <h4>GFG Event</h4>
                        <Link className="btn btn-primary ml-auto"
                            to="/dashboard">
                            Dashboard
                        </Link>
                    </div>
                </nav>
                <div className="row my-3">
                    {events.map(event => {
                        const date = new Date(event.date);
                        const day = date.getDate();
                        const month = date.toLocaleString('default',
                            { month: 'short' });
                        const year = date.getFullYear();
                        return (
                            <div className="col-lg-4" key={event.id}>
                                <div className="card card-margin">
                                    <div className="card-body pt-2">
                                        <div className="widget-49">
                                            <div className="widget-49-title-wrapper">
                                                <div className="widget-49-date-primary">
                                                    <span className="widget-49-date-day">
                                                        {day}
                                                    </span>
                                                    <span className="widget-49-date-month">
                                                        {month}
                                                    </span>
                                                </div>
                                                <div className="widget-49-meeting-info">
                                                    <span className="widget-49-pro-title">
                                                        <b>{event.title}</b>
                                                    </span>
                                                    <span className="widget-49-pro-title">
                                                        <b>{event.location}</b>
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="widget-49-meeting-points">
                                                <span>{event.description}</span>
                                            </div>
                                            <div className="widget-49-meeting-action">
                                                <a href="#"
                                                    className="btn btn-sm btn-flash-border-primary">
                                                    {`${day}-${month}-${year}`}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    );
};

export default Home;

// client/src/App.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css'
import { Link } from 'react-router-dom';

function App() {

    const [events, setEvents] = useState([]);
    const [isSuccess, setIsSuccess] = useState(false);



    useEffect(() => {
        axios.get('http://localhost:4000/events')
            .then(response => {
                setEvents(response.data);

            })
            .catch(error => {
                console.error('Error fetching events:', error);
            });
    }, [isSuccess]);

    const [formData, setFormData] = useState({
        title: '',
        description: '',
        location: '',
        date: ''
    });

    const handleInputChange = (e) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post('http://localhost:4000/events',
            formData)
            .then(response => {
                // handle success
                console.log('Event added successfully:', response.data);
                // Reset the form
                setFormData({
                    title: '',
                    description: '',
                    location: '',
                    date: ''
                });
                setIsSuccess(true);

            })
            .catch(error => {
                // handle error
                setIsSuccess(false);
                console.error('Error adding event:', error);
            });
    };


    const handleDelete = (id) => {
        axios.delete(`http://localhost:4000/events/${id}`)
            .then(response => {
                // handle success
                console.log('Event deleted successfully:', response.data);
                setIsSuccess(true);
            })
            .catch(error => {
                // handle error
                setIsSuccess(false);
                console.error('Error deleting event:', error);
            });
    };




    return (
        <div>
            <div class="">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container my-2">
                        <h4>GFG Event Dashboard</h4>
                        <div>
                            <button type="button"
                                class="btn btn-success mx-3" data-toggle="modal"
                                data-target="#exampleModal">
                                Add Event
                            </button>
                            <Link class="btn btn-primary ml-auto" to="/">
                                Home
                            </Link>
                        </div>
                    </div>
                </nav>
                <div class="container">
                    <h5 class="text-center my-2">List of Events</h5>
                    <table class="table table-striped border">

                        <thead>
                            <tr>
                                <th scope="col">Id</th>
                                <th scope="col">Title</th>
                                <th scope="col">Date</th>
                                <th scope="col">Update</th>
                                <th scope="col">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            {events?.map(event => (
                                <tr key={event._id}>
                                    <th>{event._id}</th>
                                    <th>{event.title}</th>
                                    <td>{event.date}</td>

                                    <td><Link class="btn btn-primary ml-auto"
                                        to={`/update/${event._id}`}>
                                        Update
                                    </Link></td>
                                    <td><button onClick={() => handleDelete(event._id)}
                                        className="btn btn-danger">Delete</button></td>
                                </tr>
                            ))}

                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal fade" id="exampleModal"
                tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">
                                Add New Event
                            </h5>
                            <button type="button" class="close"
                                data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form onSubmit={handleSubmit}>

                                <div class="form-group">
                                    <label for="inputAddress">Title</label>
                                    <input onChange={handleInputChange}
                                        value={formData.title} type="text"
                                        class="form-control" name="title"
                                        id="inputAddress" placeholder="Event Title" />
                                </div>

                                <div class="form-group mt-2">
                                    <label for="inputAddress2">Description</label>
                                    <input onChange={handleInputChange}
                                        value={formData.description} type="text"
                                        class="form-control" name="description"
                                        id="inputAddress2" placeholder="Enter Description" />
                                </div>

                                <div class="form-group mt-2">
                                    <label for="inputAddress2">Location</label>
                                    <input onChange={handleInputChange}
                                        value={formData.location} type="text"
                                        class="form-control" name="location"
                                        id="inputAddress2" placeholder="Enter Location" />
                                </div>

                                <div class="form-group mt-2">
                                    <label for="inputAddress2">Date</label>
                                    <input onChange={handleInputChange}
                                        value={formData.date} type="date"
                                        class="form-control" name="date"
                                        id="inputAddress2" placeholder="Enter Date" />
                                </div>

                                <button type="submit"
                                    class="btn btn-primary mt-3">
                                    Add Event
                                </button>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

// client/src/Update.jsx

import axios from 'axios';
import React, { useState, useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';

function Update() {
    const { id } = useParams();

    const [event, setEvent] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        axios
            .get(`http://localhost:4000/events/${id}`)
            .then(response => {
                setEvent(response.data);
                setIsLoading(false);
                console.log(response.data);

            })
            .catch(error => {
                // Handle error
                alert('Error fetching event:', error);
            });
    }, [id]);


    const [updatedTitle, setUpdatedTitle] = useState(event ? event.title : '');
    const [updatedDescription, setUpdatedDescription] = useState(event ? event.description : '');
    const [updatedLocation, setUpdatedLocation] = useState(event ? event.location : '');
    const [updatedDate, setUpdatedDate] = useState(event ? event.dat : '');

    const handleUpdate = e => {
        e.preventDefault();

        const updatedEvent = {
            title: updatedTitle,
            description: updatedDescription,
            location: updatedLocation,
            date: updatedDate
        };

        axios
            .put(`http://localhost:4000/events/${id}`, updatedEvent)
            .then(() => {
                // Handle successful update
                alert('Event updated successfully!');
            })
            .catch(error => {
                // Handle error
                alert('Error updating event:', error);
            });
    };

    return (
        <div className="container">
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <div className="container my-2">
                    <h4>GFG Event</h4>
                    <Link className="btn btn-primary ml-auto" to="/dashboard">
                        Dashboard
                    </Link>
                </div>
            </nav>
            <div className="row my-3">
                <div className="col-lg-4">
                    {isLoading ? (
                        <h3>Loading...</h3>
                    ) : (
                        <form onSubmit={handleUpdate}>
                            <div className="form-group">
                                <label htmlFor="inputAddress">Title</label>
                                <input
                                    type="text"
                                    className="form-control"
                                    name="title"
                                    id="inputAddress"
                                    placeholder="Event Title"
                                    defaultValue={event.title}
                                    onChange={e => setUpdatedTitle(e.target.value)}
                                />
                            </div>
                            <div className="form-group mt-2">
                                <label htmlFor="inputAddress2">Description</label>
                                <input
                                    type="text"
                                    className="form-control"
                                    name="description"
                                    id="inputAddress2"
                                    placeholder="Enter Description"
                                    defaultValue={event.description}
                                    onChange={e => setUpdatedDescription(e.target.value)}
                                />
                            </div>
                            <div className="form-group mt-2">
                                <label htmlFor="inputAddress2">Location</label>
                                <input
                                    type="text"
                                    className="form-control"
                                    name="location"
                                    id="inputAddress2"
                                    placeholder="Enter Location"
                                    defaultValue={event.location}
                                    onChange={e => setUpdatedLocation(e.target.value)}
                                />
                            </div>
                            <div className="form-group mt-2">
                                <label htmlFor="inputAddress2">Date</label>
                                <input
                                    type="date"
                                    className="form-control"
                                    name="date"
                                    id="inputAddress2"
                                    placeholder="Enter Date"
                                    defaultValue={event.date}
                                    onChange={e => setUpdatedDate(e.target.value)}
                                />
                            </div>
                            <button type="submit" className="btn btn-primary mt-3">
                                Update
                            </button>
                        </form>
                    )}
                </div>
            </div>
        </div>
    );
}

export default Update;