Merge branch 'main' into snyk-upgrade-e557cd256c4515652fffde2dd0af3817

README.md

@@ -1,36 +1,34 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+King's Heath Clangers Website
 
-## Getting Started
+A web application designed to make scheduling games/training sessions and booking places at those sessions easier.
 
-First, run the development server:
+How To
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+The deployed site is live at https://kingsheathclangers.me/. All players should be directed here and should not be given access to this repository.
+If you are looking to use the development environment:
+Clone down this repo to your local machine.
+Use npm install.
+Create a .env file and input the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY which will have been provided if you have authorisation to use this repository.
+If you believe you should have access, but do not have these credentials, please contact the team at Syntax Squad to discuss.
+Use npm run dev to see your local changes.
+Any git pushes will reflect in the deployment environment through the Continuous Deployment phase of this project via Vercel.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Syntax Squad
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+Syntax Squad is a School of Code team who came together in the final four weeks of their bootcamp to plan, build and deploy a solution to a unique problem posed by their stakeholder, King's Heath Community Basketball Club.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+After learning that the current method of scheduling games/training was a low-tech groupchat polling system, a solution had to be found, and the idea for King's Heath Clangers' website was founded. It would be able to improve the booking process for players whilst simultaneously giving easy access to coaches/admin staff to schedule new games.
 
-## Learn More
 
-To learn more about Next.js, take a look at the following resources:
+This fantastic team was made up by the following developers:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Ayodimeji Akinbolude
+Kelsey Baker
+Jose Luis Quinones Castro
+Winnie Lau
+Jules Smith
+Albert Szupsynski
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+CRUD Functions
 
-## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/aboutpage/aboutpage.module.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
-
 /* Base styles for mobile devices */
 .aboutPage {
   margin: 90px 10px;
@@ -18,7 +16,6 @@
 .team,
 .support {
   width: 100%;
-  font-family: "Montserrat", sans-serif;
   color: white;
 }
 

components/bookingform/bookingform.jsx

@@ -35,6 +35,10 @@ function Booking() {
         if (error) {
           console.error("Error fetching game: ", "Unable to fetch game data");
         } else if (game) {
+          // Convert time from CET to UK time (-1 hour)
+          const eventTime = new Date(`1970-01-01T${game.time}Z`);
+          eventTime.setHours(eventTime.getHours() - 1);
+
           const event = {
             id: game.id,
             title: game.event_type,
@@ -44,21 +48,24 @@ function Booking() {
               month: "long",
               day: "2-digit",
             }),
-            time: new Date(`1970-01-01T${game.time}Z`).toLocaleTimeString(
-              "en-GB",
-              { hour: "2-digit", minute: "2-digit" },
-            ),
+            time: eventTime.toLocaleTimeString("en-GB", {
+              hour: "2-digit",
+              minute: "2-digit",
+            }),
             team: game.team,
             location: game.location,
             spots_available: game.spots_available,
             attendees: game.attendees,
           };
+
           setEvent(event);
+
           if (event.spots_available - (event.attendees?.length || 0) <= 0) {
             setErrorMessage("No available spaces for this event");
           }
         }
       };
+
       getGame();
     }
   }, [eventUUID]);

components/bookingform/bookingform.module.css

@@ -13,7 +13,6 @@
 }
 
 .formSection {
-  font-family: "Montserrat", sans-serif;
   font-size: 100%;
   background-color: #ffffff;
   padding: 15px 30px;

components/carouselHorizontal/carouselH.module.css

@@ -3,9 +3,9 @@
   box-shadow:
     0px 2px 6px rgba(0, 0, 0, 0.2),
     0px 2px 4px rgba(0, 0, 0, 0.3);
-  width: 450px; 
+  width: 450px;
   height: 250px;
-  object-fit: cover; 
+  object-fit: cover;
 }
 
 .rightButton,
@@ -30,10 +30,10 @@
 
 @media (min-width: 768px) {
   .images {
-    width: 100%; 
+    width: 100%;
     height: 600px;
   }
-  }
+}
 
 /* .carousel {
   position: relative;

components/carouselVertical/carouselV.module.css

@@ -33,7 +33,7 @@
     height: 610px;
     width: 100%;
   }
-  }
+}
 
 /* .carousel {
     position: relative;

components/contactconfirmationform/contactconfirmationform.module.css

@@ -1,7 +1,6 @@
 .container {
   width: 30%;
   height: 50%;
-  font-family: "Montserrat", sans-serif;
   padding: 15px 20px;
 
   color: black;

components/contactform/contactform.module.css

@@ -1,5 +1,4 @@
 .formContainer {
-  font-family: "Montserrat", sans-serif;
   display: flex;
   flex-direction: column;
   font-size: 120%;

components/editconfirmationform/editconfirmationform.module.css

@@ -1,6 +1,5 @@
 .container {
   width: 30%;
-  font-family: "Montserrat", sans-serif;
   padding: 15px 20px;
 
   color: black;

components/editform/editform.module.css

@@ -2,7 +2,6 @@
   width: 60%;
 }
 .contactForm {
-  font-family: "Montserrat", sans-serif;
   font-size: 100%;
   background-color: #ffffff;
   padding: 15px 30px;

components/header/header.module.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
-
 .header {
   background-color: #cdcfd0;
   position: fixed;
@@ -16,7 +14,6 @@
 
 .navlink {
   /*The individual links in the navigation bar*/
-  font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 500;
   font-size: 18px;

components/loginform/loginform.module.css

@@ -3,7 +3,6 @@
 }
 
 .loginContainer {
-  font-family: "Montserrat", sans-serif;
   width: 300px;
   padding: 20px;
   border: 1px solid #ccc;

components/scheduleform/scheduleform.module.css

@@ -2,7 +2,6 @@
   width: 60%;
 }
 .scheduleForm {
-  font-family: "Montserrat", sans-serif;
   font-size: 120%;
   background-color: #ffffff;
   padding: 15px 30px;

package.json

@@ -15,7 +15,7 @@
     "@emailjs/browser": "^4.3.3",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@fullcalendar/bootstrap5": "^6.1.11",
+    "@fullcalendar/bootstrap5": "^6.1.12",
     "@fullcalendar/core": "^6.1.11",
     "@fullcalendar/daygrid": "^6.1.11",
     "@fullcalendar/interaction": "^6.1.11",
@@ -35,7 +35,7 @@
     "react-dom": "^18",
     "react-router-dom": "^6.23.1",
     "styled-components": "^6.1.11",
-    "supabase": "^1.167.6",
+    "supabase": "^1.169.1",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {

src/app/globals.css

@@ -28,6 +28,10 @@ dd {
   margin-block-end: 0;
 }
 
+body {
+  overflow-x: hidden;
+}
+
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
 ul[role="list"],
 ol[role="list"] {

src/app/layout.js

@@ -1,10 +1,9 @@
-import { Inter } from "next/font/google";
+import { Montserrat } from "next/font/google";
 import "./globals.css";
-import styles from "./layout.module.css";
 import Header from "../../components/header/header.jsx";
 import Footer from "../../components/footer/footer.jsx";
 
-const inter = Inter({ subsets: ["latin"] });
+const montserrat = Montserrat({ subsets: ["latin"] });
 
 export const metadata = {
   title: "Kings Heath Clangers",
@@ -15,10 +14,10 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${styles.container} ${inter.className}`}>
-        <Header className={styles.header} />
+      <body className={montserrat.className}>
+        <Header />
         {children}
-        <Footer className={styles.footer} />
+        <Footer />
       </body>
     </html>
   );

src/app/page.js

@@ -18,8 +18,10 @@ export default async function Home() {
 
   return (
     <main className={styles.main}>
-      <h1 className={styles.title}>WELCOME TO THE HOME OF</h1>
-      <LargeLogo className={styles.largeLogo} />
+      <section className={styles.welcome}>
+        <h1 className={styles.title}>WELCOME TO THE HOME OF</h1>
+        <LargeLogo className={styles.largeLogo} />
+      </section>
 
       {/* <div
         className="flex-1 w-full flex flex-col gap-20 items-center"