merge master and update readme

Author: derekxu04

README.md

@@ -7,20 +7,36 @@ This repository contains the code for a redesigned CSESoc website. The current w
 ### Running the frontend
 
 1. Navigate to the `frontend` directory with `cd frontend`.
+
+2. Create a `.env` file in the `frontend` directory with the following content:
+   ```
+   NEXT_PUBLIC_BACKEND_HOST=localhost
+   NEXT_PUBLIC_BACKEND_PORT=9000
+   ```
+   This is necessary for the frontend to communicate with the backend.
+
 2. Install dependencies with `npm install` if you haven't already.
+
 3. Run using `npm run dev`, changes will be reflected live.
 
 See `package.json` for further commands to lint, build, etc.
 
+
 ### Running the backend
 
 1. Navigate to the `backend` directory with `cd backend`.
+
 2. Install dependencies with `npm install` if you haven't already.
+
 3. Run using `npm run dev`, changes will be reflected live.
 
+
 ## How to run locally (with Docker, production mode)
 
 Make sure you have [Docker](https://docs.docker.com/get-docker/) installed.
 
-1. Run `docker-compose up` (or `docker-compose up -d` to run in the background) in the root directory, this will start the frontend and backend services. Note this may be a little slow the first time you run this command. This will build both the frontend and backend services in production mode, meaning live changes will not be reflected.
-2. Run `docker-compose down` to stop the services.
+1. Run `docker compose build` in the root directory, this will build the frontend and backend services in production mode, meaning live changes will not be reflected. In the future, you will only need to run either `docker compose build frontend` or `docker compose build backend` if you have only made changes to the frontend or backend respectively.
+
+2. Run `docker compose up` (or `docker compose up -d` to run in the background) in the root directory, this will start the frontend and backend services.
+
+3. Run `docker compose down` to stop the services.

frontend/package-lock.json

@@ -19,6 +19,8 @@
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
     "axios": "^1.7.2",
+    "eslint-config-next": "13.4.19",
+    "framer-motion": "^11.1.2",
     "next": "13.4.19",
     "postcss": "8.4.29",
     "react": "18.2.0",

frontend/package.json

@@ -0,0 +1,56 @@
+import React from 'react';
+import { AnimatePresence, motion, useCycle } from 'framer-motion';
+import Link from 'next/link';
+
+export default function Hamburger() {
+  const [isOpen, toggleOpen] = useCycle(false, true);
+
+  return (
+    <button
+      onClick={() => {
+        toggleOpen();
+      }}
+    >
+      <svg
+        className="w-10 h-10"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 6h16M4 12h16m-7 6h7"
+        />
+      </svg>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            className="absolute top-16 right-0 bg-[#3977F9] p-4 shadow-lg w-40 rounded-2xl"
+          >
+            <ul>
+              <li className="py-2 text-lg">
+                <Link href={'./about'}>About Us</Link>
+              </li>
+              <li className="py-2 text-lg">
+                <Link href={'./events'}>Events</Link>
+              </li>
+              <li className="py-2 text-lg">
+                <Link href={'./resources'}>Resources</Link>
+              </li>
+              <li className="py-2 text-lg">
+                <Link href={'./sponsors'}>Sponsors</Link>
+              </li>
+            </ul>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </button>
+  );
+}

frontend/src/components/Hamburger.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import Hamburger from './Hamburger';
 
 const Navbar = () => {
   const [path, setPath] = useState<string>('');
@@ -41,6 +42,9 @@ const Navbar = () => {
             <div>{'//'} sponsors</div>
           </Link>
         </div>
+        <div className="md:hidden xl:hidden lg:hidden text-right font-bold block">
+          <Hamburger />
+        </div>
       </div>
     </nav>
   );

frontend/src/components/Navbar.tsx

@@ -9,7 +9,10 @@ const Sponsors = () => {
     'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36';
 
   return (
-    <section className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20">
+    <section
+      className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20"
+      id="sponsors"
+    >
       <div className="text-center">
         <p className="text-[#3977F8] font-game text-xl">04</p>
         <h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>