dockerized the frontend and made a compose file

README.md

@@ -0,0 +1,30 @@
+# ReadMei
+
+ReadMei is a membership and registration assistance system still in development (development started last year by the previous team). The system currently works on a base of React and Bootstrap CSS, and MongoDB(?) . This will primarily be an effort to streamline event registration, and will require additional coordination with the UBCAni Treasurer for integration with Square sales and membership details. The intention is for this system to eventually integrate with the UBCAni website to offer members information about their attendance, participation, and other involvement with the club! 
+
+<!-- ## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license) -->
+
+## Usage
+
+Examples of how to use the project.
+
+```bash
+# run this in the root folder
+docker compose up -d
+```
+
+## Contributing
+
+Guidelines for contributing to the project.
+
+1. Fork the repository(or clone if you are a contributor).
+2. Create a new branch (`git checkout -b feature-branch`).
+3. Make your changes.
+4. Commit your changes (`git commit -m 'Add some feature'`).
+5. Push to the branch (`git push origin feature-branch`).
+6. Open a pull request.

compose.yaml

@@ -0,0 +1,14 @@
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./frontend:/app   # Mounts your project folder without node_modules
+      - /app/node_modules  # Ensures node_modules in container is used
+    environment:
+      - NODE_ENV=development
+      - VITE_HOST=0.0.0.0  # Add this line to allow access from outside the container
+    command: npm run dev

frontend/Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Node.js runtime as a parent image
+FROM node:18-alpine
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies in the container (without copying local node_modules)
+RUN npm install
+
+# Copy the rest of the frontend code into the container
+COPY . .
+
+# Expose Vite's default port
+EXPOSE 5173
+
+# Command to run the Vite development server
+CMD ["npm", "run", "dev"]

frontend/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host --port 5173",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

frontend/src/get-member/components/index/api.ts

@@ -38,7 +38,8 @@ export const getMemberApiCall = async (membership_num: string): Promise<GetMembe
         const response2 = await axios.get(`http://localhost:5000/halloween?MEMBERSHIP_NUMBER=${membership_num}`)
         //console.log(response2)
         const response = await axios.get(`http://localhost:5000/members?MEMBERSHIP_NUMBER=${membership_num}`)
-        const { _id, DATE, MEMBERSHIP_NUMBER, NAME, EMAIL, STUDENT_NUMBER, MEMBER_ID } = response.data[0]
+        // the line below was const { _id, DATE, MEMBERSHIP_NUMBER, NAME, EMAIL, STUDENT_NUMBER, MEMBER_ID } = response.data[0]
+        const { MEMBERSHIP_NUMBER, NAME, EMAIL, STUDENT_NUMBER, MEMBER_ID } = response.data[0]
         const PAYMENT_MATCHES = response2.data
         const result: GetMemberResponse = {
             membership_num: MEMBERSHIP_NUMBER,

frontend/src/get-member/components/index/container.tsx

@@ -12,9 +12,11 @@ const GetMemberContainer = (props:GetMemberContainerProps): ReactElement => {
     const [response, setResponse] = useState<GetMemberResponse | null>(null)
     const [error, setError] = useState<GetMemberError | null>(null)
 
-    const handleMembershipNum = (membershipNum: string) => {
-        setMembershipNum(membershipNum)
-    }
+    // seem like this is not needed
+    // const handleMembershipNum = (membershipNum: string) => {
+    //     setMembershipNum(membershipNum)
+    // }
+
     const handleResponse = (response: GetMemberResponse) => {
         setResponse(response)
         setError(null)