New Events Page + New Events Schema Property

backend/controllers/eventController.js

@@ -55,6 +55,7 @@ export const eventList = asyncHandler(async (req, res) => {
         instagram_link,
         code,
         qrCode,
+        event_type,
       } = event;
       return {
         _id,
@@ -68,6 +69,7 @@ export const eventList = asyncHandler(async (req, res) => {
         instagram_link,
         code,
         qrCode,
+        event_type,
       };
     });
 
@@ -134,6 +136,11 @@ export const eventCreate = [
 
       throw new Error('Instagram link must be a valid URL.');
     }),
+  body('event_type')
+    .optional()
+    .customSanitizer((val) => val.trim())
+    .isIn(['General', 'Dev', 'Open Source', 'Innovate'])
+    .withMessage('Event type must be one of: General, Dev, Open Source, Innovate'),
 
   asyncHandler(async (req, res) => {
     // Extract the validation errors from a request.

backend/models/event.js

@@ -11,6 +11,12 @@ const eventSchema = new Schema({
   instagram_link: String,
   code: { type: String },
   qrCode: { type: String },
+  event_type: {
+    type: String,
+    enum: ["General", "Dev", "Open Source", "Innovate"],
+    required: true,
+    default: "General",
+  },
 });
 
 // Export model

frontend/src/App.tsx

@@ -6,7 +6,7 @@ import Home from './components/Home/Home';
 import NavBar from './components/NavBar/NavBar';
 import Footer from './components/Footer/Footer';
 import About from './components/About/About';
-import Events from './components/Events/Events';
+import Events from './components/NewEvents/Events';
 import Opportunities from './components/Opportunities/Opportunities';
 import Membership from './components/Membership/Membership';
 import Login from './components/Login/Login';

frontend/src/components/NewEvents/EventCard.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Typography, Box } from "@mui/material";
+
+type EventCardProps = {
+  title: string;
+  startDate: string;
+  endDate: string;
+  location: string;
+  calendar_link: string;
+  description: string;
+  instagram_link: string;
+  _id: string;
+};
+
+const EventCard = ({
+  title,
+  startDate,
+  endDate,
+  location,
+  calendar_link,
+  description,
+  instagram_link,
+  _id,
+}: EventCardProps) => {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  const formattedDate = start.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
+  const formattedTime = `${start.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  })} - ${end.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  })}`;
+
+  return (
+    <Box
+      sx={{
+        display: "inline-block",
+        borderRadius: 6,
+        p: "4px",
+        background: "linear-gradient(45deg, orange, cyan, purple, blue)",
+      }}
+    >
+      <Box
+        sx={{
+          minHeight: "20rem",
+          width: "16rem",
+          borderRadius: 6,
+          bgcolor: "white",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          boxShadow: 3,
+          p: 2,
+        }}
+      >
+        <Typography
+          variant="subtitle1"
+          fontWeight="bold"
+          fontSize={20}
+          align="center"
+          sx={{
+            mb: 1,
+            overflowWrap: "break-word",
+            wordBreak: "break-word",
+            fontSize: "25px"
+          }}
+        >
+          {title}
+        </Typography>
+        <Box sx={{ textAlign: "center" }}>
+          <Typography variant="body2" color="text.secondary" sx={{ fontSize: "18px" }}>
+            {formattedDate} | {formattedTime}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ fontSize: "18px" }}>
+            {location}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default EventCard;