Add/change/delete surrounding delimiter pairs with ease. Written with :heart: in Lua.

nvim-surround

icpc-website

The home for ACM Cyber at UCLA! Website for the premier cybersecurity club at UCLA.

acmcyber.com

The official (award-winning) website for ACM at UCLA, the largest tech community on campus!

website

An archive of past challenges from LA CTF hosted by ACM Cyber at UCLA and Psi Beta Rho.

lactf-archive

📊 Website with UCLA grade distributions from 2021-2025

uclagrades.com

LA CTF hosted by ACM Cyber & Psi Beta Rho! Website for the largest annual cybersecurity competition at UCLA! Whether you are tackling your first exploit or have professional experience, there will be challenges just right for you!

lactf-website

Platform for LA CTF. Forked from redpwn/rctf.

lactf-platform

opensource

ACM Cyber's modular script for syncing unified event information across disparate platforms!

cyanea

Hardware/Firmware for LA Hacks 2022 2nd Place Overall, Best Hardware Hack, Life Hacks Track Winner: An IoT Communal Sharing System

lockr-hardware

A proof verification of "Optimal Implementation of Quantum Gates with Two Controls".

2ControlVerification

A next.js, typescript, react starter repository with built-in linting and github actions for ACM project development!

next-ts-starter-template

XHacks 2021 Startup Track Winner: Be Heard. Educate, Enact, Empower. No voice left behind. (backend)

be-heard-backend

Build a "Dashboard Summary" showcasing all the admin/officer functionalities in membership portal. It should replace the check-in and progress container in  admin/officer view

Feat: Admin/Officer Dashboard Summary

uclaacm/membership-portal-ui

Goal: Build the "Download/Copy" utility features shown in your sketch.

(Backend): Create an endpoint to generate CSV/Excel files from the member list.
(Frontend): Implement the "Download" icon menu. Build the "Copy all emails" logic (this usually involves fetching the filtered list's emails and writing to the clipboard).
Ensure only Admin/Officers can see this "Members" tab.

Feat: Data Export & Action Menus

Goal: Implement the dropdown filtering logic seen in your "Drop down" sketches.
(Backend): Update the API to support query parameters for ?committee=, ?year=, and ?role=.
(Frontend): Build the reusable FilterDropdown components. Ensure they are "multi-select" ready as implied by your design.
Manage the "Global State" of filters (using URL params or React state) so that refreshing the page doesn't lose the user's filter settings.

Feat: Advanced Filtering

membership-portal-ui

This draft PR (in its current state):

* installs `create-react-app` via `react-scripts`
    * sneaky fixes include changing the source URL for module resolution, and the `homepage` field in `package.json`
* changes the `API_URL` to read from the `DEV` env var; defaults to `https://members.uclaacm.com/app` if we're not in dev, which currently causes a CORS issue if not deployed to it
* replaces `node-sass` with `sass`
* removes everything related to:
    * Jenkins
    * nginx
    * babel
    * husky
    * lint-staged
    * jest and enzyme
    * the fetch polyfill
    * webpack
* fixes newfound linter issues (unused imports, failed nan checks, etc.)
* switches the body font from `Lato` to `Open Sans` 

Locally, it builds and runs; we only run into problems once we hit the backend, as this introduces CORS issues.

To merge this, I think we need to:

* somehow resolve this CORS issue and/or figure out how to deploy this
    * if we keep the rest of our deploy setup, then we need to resolve CORS, the final dockerized bundle, API subdomains, etc.
    * idea: maybe make a staging backend on heroku!
* re-add the relevant linting tools (though I'm fine with just eslint, as that's not a regression)
* add a CI action to ensure that `yarn build` passes
* documents these changes somehow

draft: CRA migration, DX slim-down

Goal: Implementing the deleteCommittee server action for internship that deletes an existing internship committee, with authentication validation, admin-only access control, backend API communication, and standardized error reporting.

Under app/actions/internship:

Create the file deleteCommittee.ts

1. Import config and logger from lib
2. Import a suitable result type from lib/types/Internship
3. Accept committeeId: string as the parameter
4. Use cookie-based auth guard using token from next/headers
5. Return { success: false, error: "Not authenticated" } when missing token
6. Restrict access so only authenticated admins can delete committees
7. Call backend DELETE /api/v1/internship/committees/:id using Config.API_URL + Config.routes.internship.committees + "/" + committeeId
8. Send Authorization Bearer token header
9. Parse backend response and map server messages into the error field
10. Log failures with Logger.error("deleteCommittee failed: ...") before returning error
11. Return standardized result:

{ success: true } on success
{ success: false, error: "Failed to delete committee." } on failure
✅ Acceptance Criteria

- Type Definition: A result type exists in lib/types/Internship.ts for a single committee delete response.
- Auth Guard: The action must return { success: false, error: "Not authenticated" } if the user is not authenticated.
- Access Control: The action must deny access unless the authenticated user is an admin.
- API Call: The action must correctly call DELETE /app/api/v1/internship/committees/:id.
- Success Response: On success, the action returns { success: true }.
- Error Mapping: The function must correctly parse and return backend error messages to the UI when available.
- Exception Handling: Any uncaught errors (network, parsing) must be caught, logged with Logger.error(), and return { success: false, error: "Failed to delete committee."

Action: Delete Committee by ID

Goal: Implementing the updateCommittee server action for internship that updates an existing internship committee, with authentication validation, admin-only access control, backend API communication, and standardized error reporting.

Under app/actions/internship:

Create the file updateCommittee.ts

1. Import config and logger from lib
2. Import InternshipCommittee and a suitable result type from lib/types/Internship
3. Accept committeeId: string and payload parameters
4. Use cookie-based auth guard using token from next/headers
5. Return { success: false, error: "Not authenticated" } when missing token
6. Restrict access so only authenticated admins can update committees
7. Call backend PUT /api/v1/internship/committees/:id using Config.API_URL + Config.routes.internship.committees + "/" + committeeId
8. Send payload as JSON body with Authorization Bearer token header
9. Parse backend response and map server messages into the error field
10. Log failures with Logger.error("updateCommittee failed: ...") before returning error
11. Return standardized result:

{ success: true, data: committee } on success
{ success: false, error: "Failed to update committee." } on failure
✅ Acceptance Criteria

- Type Definition: A result type exists in lib/types/Internship.ts for a single committee update response.
- Auth Guard: The action must return { success: false, error: "Not authenticated" } if the user is not authenticated.
- Access Control: The action must deny access unless the authenticated user is an admin.
- API Call: The action must correctly call PUT /app/api/v1/internship/committees/:id.
- Success Response: On success, the action returns { success: true, data: InternshipCommittee }.
- Error Mapping: The function must correctly parse and return backend error messages to the UI when available.
- Exception Handling: Any uncaught errors (network, parsing) must be caught, logged with Logger.error(), and return { success: false, error: "Failed to update committee."

Action: Update Committee by ID

Goal: Implementing the createCommittee server action for internship that creates a new internship committee, with authentication validation, admin-only access control, backend API communication, and standardized error reporting.

Under app/actions/internship:

Create the file createCommittee.ts

1. Import config and logger from lib
2. Import InternshipCommittee and a suitable result type from lib/types/Internship
3. Accept committee payload as the parameter
4. Use cookie-based auth guard using token from next/headers
5. Return { success: false, error: "Not authenticated" } when missing token
6. Restrict access so only authenticated admins can create committees
7. Call backend POST /api/v1/internship/committees using Config.API_URL + Config.routes.internship.committees
8. Send payload as JSON body with Authorization Bearer token header
9. Parse backend response and map server messages into the error field
10. Log failures with Logger.error("createCommittee failed: ...") before returning error
11. Return standardized result:

{ success: true, data: committee } on success
{ success: false, error: "Failed to create committee." } on failure

✅ Acceptance Criteria

- Type Definition: A result type exists in lib/types/Internship.ts for a single committee create response.
- Auth Guard: The action must return { success: false, error: "Not authenticated" } if the user is not authenticated.
- Access Control: The action must deny access unless the authenticated user is an admin.
- API Call: The action must correctly call POST /app/api/v1/internship/committees.
- Success Response: On success, the action returns { success: true, data: InternshipCommittee }.
- Error Mapping: The function must correctly parse and return backend error messages to the UI when available.
- Exception Handling: Any uncaught errors (network, parsing) must be caught, logged with Logger.error(), and return { success: false, error: "Failed to create committee." }.




Action: Create Committee

Goal: Implementing the fetchCommitteeById server action for internship that retrieves a single internship committee by ID, with authentication validation, backend API communication, and standardized error reporting.

Under app/actions/internship:

1. Create the file fetchCommitteeById.ts
2. Import config and logger from lib
3. Import InternshipCommittee and a suitable result type from lib/types/Internship
4. Accept committeeId: string as the parameter
5. Use cookie-based auth guard using token from next/headers
6.. Return { success: false, error: "Not authenticated" } when missing token
8. Allow any authenticated user to access the action
9. Call backend GET /api/v1/internship/committees/:id using Config.API_URL + Config.routes.internship.committees + "/" + committeeId
10. Send Authorization Bearer token header
11. Parse backend response and map server messages into the error field
12. Log failures with Logger.error("fetchCommitteeById failed: ...") before returning error
13. Return standardized result:

{ success: true, data: committee } on success
{ success: false, error: "Failed to fetch committee." } on failure

✅ Acceptance Criteria
- Type Definition: A result type exists in lib/types/Internship.ts for a single committee fetch response.
- Auth Guard: The action must return { success: false, error: "Not authenticated" } if the user is not authenticated.
- Access Control: The action must allow any authenticated user to fetch a committee by ID.
- API Call: The action must correctly call GET /app/api/v1/internship/committees/:id.
- Success Response: On success, the action returns { success: true, data: InternshipCommittee }.
- Error Mapping: The function must correctly parse and return backend error messages to the UI when available.
- Exception Handling: Any uncaught errors (network, parsing) must be caught, logged with Logger.error(), and return { success: false, error: "Failed to fetch committee." }.

Action: Fetch Committee By ID

Goal: Implementing the fetchApplicationById server action for internship that retrieves a single internship application by ID, with authentication validation, officer-only access control, backend API communication, and standardized error reporting.

Under app/actions/internship:

1. Create the file fetchApplicationById.ts
3. Import config and logger from lib
4. Import token helpers from lib/token for role validation
5. Import InternshipApplication and a suitable result type from lib/types/Internship
6. Accept applicationId: string as the parameter
7. Use cookie-based auth guard using token from next/headers
8. Return { success: false, error: "Not authenticated" } when missing token
9. Restrict access so only authenticated officers can fetch an application by ID
10. Call backend GET /api/v1/internship/applications/:id using Config.API_URL + Config.routes.internship.applications + "/" + applicationId
11. Send Authorization Bearer token header
12. Parse backend response and map server messages into the error field
13. Log failures with Logger.error("fetchApplicationById failed: ...") before returning error
14. Return standardized result:

{ success: true, data: application } on success
{ success: false, error: "Failed to fetch application." } on failure

✅ Acceptance Criteria

- Type Definition: A result type exists in lib/types/Internship.ts for a single application fetch response.
- Auth Guard: The action must return { success: false, error: "Not authenticated" } if the user is not authenticated.
- Role Access: The action must deny access unless the authenticated user is an officer.
- API Call: The action must correctly call GET /app/api/v1/internship/applications/:id.
- Success Response: On success, the action returns { success: true, data: InternshipApplication }.
- Error Mapping: The function must correctly parse and return backend error messages to the UI when available.
- Exception Handling: Any uncaught errors (network, parsing) must be caught, logged with Logger.error(), and return { success: false, error: "Failed to fetch application." }.

Action: Fetch Application By ID

Move to a new Google Client ID and move all references to the Google Client ID to the .env file instead of in the docker compose and config.js. This also applies to backend and deployment repos.

needs triage

New Google Client ID

Goal: Implementing the fetchAllApplications server action for internship that handles authentication validation, API communication, and standardized error reporting for internship application updates.

1. Create the file fetchAllApplications.ts under app/actions/internship
2. Import config and logger from lib
3. Import token helpers from lib/token if role validation is needed
4. Import InternshipApplication and InternshipApplicationsResult types from lib/types/Internship
5. Use cookie-based auth via next/headers
6. Return { success: false, error: "Not authenticated" } when no token exists
7. Enforce access control so only authenticated officers or admins can fetch the list
8. Call backend GET /api/v1/internship/applications using Config.API_URL + Config.routes.internship.applications
9. Send the Authorization header as Bearer token
10. Parse backend JSON response and map server error messages into the error field
11. Log failures with Logger.error("fetchAllApplications failed: ...") before returning an error
12. Return standardized result:
 { success: true, data: applications } on success
 { success: false, error: "Failed to fetch applications." } on failure

✅ Acceptance Criteria

- Auth Guard: The action returns { success: false, error: "Not authenticated" } when no token is present.
- Role Access: Only authenticated officers or admins can access the action.
- API Call: The action performs a GET request to /app/api/v1/internship/applications.
- Success Response: On success, the action returns { success: true, data: InternshipApplication[] }
- Error Mapping: Backend error messages such as "Invalid committee" or "Missing required field" are returned to the UI when available.
- Exception Handling: Any network, parsing, or unexpected runtime error is caught, logged with Logger.error(), and returns { success: false, error: "Failed to fetch applications." }.
- Type Safety: The action uses InternshipApplication and InternshipApplicationsResult so the response shape stays consistent across the UI.

Action: Fetch All Applications

## Motivation
It would be useful to know which members attend your committee events the most. This information could be used for prizes, shoutouts, or recruiting interns/officers.

## To Do
- [ ] Create a reducer that calls the endpoint for committee-specific leaderboard data
- [ ] Add a leaderboard component to the "Event Analytics" section and populate it with data from the reducer you just created

Frontend: Create committee-specific leaderboard

## Motivation
This will help with allowing officers to get a list of people who attended an event. This is a feature that has been requested a lot and has been fulfilled by manually running sql queries, so this will automate that process.

## To Do
- [ ] Create a reducer to hit the `GET /app/api/v1/attendance/:uuid?` endpoint and store the data in the state
- [ ] Show the number of attendees on each event
Under the Event Analytics section, show the number of attendees on each event card
- [ ] Show a modal with a table that displays the attendees for each event
When you click on the number of attendees on the event card, a modal with all the attendees should appear. The table should include name, major, year, points.
- [ ] Look into how to perform join operations using the Sequelize ORM

new feature

Per-event attendance

This is a very late, "after-the-fact" issue. Going to provide as much context as possible so this issue makes sense!

Currently, the membership portal's frontend has a solid but outdated (and circumstantial to the resources of the dev team, overengineered) frontend stack. In particular, it:

* runs off of a Dockerized Nginix container in prod after building the final bundle
* uses Docker (as part of the larger membership portal deploy)
* runs (non-existent) CI and (relevant) CD through a self-hosted Jenkins runner
* has our own webpack config, uses custom babel transpiles, etc.
* has jest, even though there are no actual tests
* does not abide by its own linter rules (ESLint, Prettier; no Stylelint)
* nontrivially uses Redux

I would like to remove or abstract as much as we can. I have a couple of goals in mind:

1. There should be a way for developers to work on the frontend **without** running a copy of the backend locally. The workflow should be `yarn && yarn start`
    * I think this significantly reduces the barrier of development for frontend, and makes our codebase more accessible. It's also a healthy logical decouple.
    * I led a similar effort at Teach LA on the editor. We ended up creating a staging version of the backend, and by default hitting the staging version; the devs who do want to work on the backend can pass in a different URL via an env variable.
2. I would like to deploy the membership portal off of a static site generator like Netlify, instead of deploying on EC2 with Nginx.
    * this means that we no longer need to host or worry about Nginx
    * this also means that our final codebase is extremely portable
    * and, this means that we can run our CD through Netlify instead of Jenkins, removing a nontrivial cost from the dev team
    * and, this means that we can let Netlify handle our certs
    * **however, this introduces a complication**: the membership portal currently relies on being deployed in the same server as the backend; the backend does not have CORS setup up to allow for outbound requests, and the API is currently a subpath of `members.uclaacm.com`. We'd have to resolve both of these before fully switching over; the latter, I would like to put the API at `api.uclaacm.com`.
3. I would like to use create react app (or similar) to handle most of our React tooling.
    * we will no longer have to worry about a custom webpack bundle, 
    * this lets us switch to `sass` from the deprecated `node-sass`, which inadvertently fixes an issue other dev team members had with the dockerized build
    * we also will no longer have to worry about transpiling code, implementing or installing polyfills, etc.
    * this significantly helps the above goal
4. Until further notice, I'd like to strip out unused tooling and update relevant tools.
    * For now, this looks like just Jest, though I could be wrong.
    * Lint-staged will have to be updated to work properly.
    * We should reconfigure prettier, eslint, and (eventually add stylelint) so it fits ACM's broader code style.

Note that this doesn't explicitly note removing or interacting with Docker. Let me spill out a few of my thoughts on this:

1. There is something useful about having a fully-consistent environment running the frontend. However, if we can properly decouple the frontend and the backend, this is *less important* of a problem. Since I think DX and usability is the most important factor here (moreso than performance, correctness, etc.), if removing Docker helps us achieve this goal, then we should do it.
2. However, completely removing Docker currently could cause some troubles:
    * if we don't forward on the port from the backend docker container, it may be tough to test the frontend and backend in parallel
    * however, this can be resolved by copying over the result of CRA's `yarn build` into its own folder, deploying off of Nginx, etc. if we want to do that in stages
    * of course, we'd have to investigate if there are any problems with a full deploy without using Docker. That being said, we've done this frequently in other ACM and Teach LA projects, so this shouldn't be a problem.

Going to be frank, this is a huge undertaking. That being said, my previous work doing this for uclaacm/website and uclaacm/TeachLAFrontend indicates that this is worth it - the **largest problem** with long-term student org development is software maintenance and onboarding, and creating a simpler DX workflow would help us tremendously. 

#92 is the first step of this.

Significantly slim down dependency tree, simplify and improve DX

Google sign in fails on render when using private browsing

https://developers.googleblog.com/2021/08/gsi-jsweb-deprecation.html

should also resolve #99 

possibly helpful: https://www.dolthub.com/blog/2022-05-04-google-signin-migration/

use sign in with google instead of google sign-in lol

See the below screenshot. The long name is causing the profile picture in that row to be compressed horizontally:

![image](https://github.com/uclaacm/membership-portal-ui/assets/76643809/c58de6d7-c628-47f4-b499-686339efe9b9)


Compressed profile pic due to long name in Leaderboard table

https://github.com/uclaacm/membership-portal-ui/pull/41
https://github.com/uclaacm/membership-portal-ui/pull/71

Review, fix, and merge #41 and #71

The events page lists all the events correctly, but none of the event cards have event banners.

Membership Portal Events

(quality-of-life upgrade)
Order and display the events from Most Recent to Least Recent on the events tab

enhancement

ordering of events on the events tab

When I'm clicking "Sign in with Google" on the login page, it have to click the button twice for it to prompt me with the google auth popup. There doesn't seem to be any errors on the inspect panel after the first click.

Browser: Firefox 118.0.2 (64-bit)

Google sign-in doesn't work on first click

### Motivation
Many ACM events are on a weekly or bi-monthly schedule, so having the option to create and edit repeated events would help improve user experience.
### Proposed Features
* creating a repeated event
  * weekly, monthly, or custom (i.e. tuesdays and thursdays) repeat options
  * setting start and end dates for repeated events
  * auto-generating codes for repeated events (maybe with a base code?? i.e. `tla-dev-<random code>`
* editing/deleting all instances of a repeated event
* editing/deleting one instance of a repeated event

high priority

4_16_Sprint

Create repeated events

See the below image:
<img width="698" alt="image" src="https://github.com/uclaacm/membership-portal-ui/assets/76643809/4b3b2822-b915-475b-b187-5ccbb11bc090">


Admin "Add Event" button text disappears on small screen size

```
npm run lint

...

✖ 884 problems (881 errors, 3 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! membership-portal-ui@1.0.0 lint: `eslint --fix --color 'src/**/*.js*' 'tests/**/*.js*' && prettier --write 'src/**/*.js*' 'tests/**/*.js*' 'src/**/*.css' 'src/**/*.scss'`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the membership-portal-ui@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
```

ELIFECYCLE might be caused by another process using `package.json` (https://stackoverflow.com/questions/69954892/silly-lifecycle-error-when-building-next-js-project)

full error log:
```
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'lint' ]
2 info using npm@6.14.4
3 info using node@v13.12.0
4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
5 info lifecycle membership-portal-ui@1.0.0~prelint: membership-portal-ui@1.0.0
6 info lifecycle membership-portal-ui@1.0.0~lint: membership-portal-ui@1.0.0
7 verbose lifecycle membership-portal-ui@1.0.0~lint: unsafe-perm in lifecycle true
8 verbose lifecycle membership-portal-ui@1.0.0~lint: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/membership-portal-ui/node_modules/.bin:/usr/bin/python2:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle membership-portal-ui@1.0.0~lint: CWD: /var/www/membership-portal-ui
10 silly lifecycle membership-portal-ui@1.0.0~lint: Args: [
10 silly lifecycle   '-c',
10 silly lifecycle   "eslint --fix --color 'src/**/*.js*' 'tests/**/*.js*' && prettier --write 'src/**/*.js*' 'tests/**/*.js*' 'src/**/*.css' 'src/**/*.scss'"
10 silly lifecycle ]
11 silly lifecycle membership-portal-ui@1.0.0~lint: Returned: code: 1  signal: null
12 info lifecycle membership-portal-ui@1.0.0~lint: Failed to exec lint script
13 verbose stack Error: membership-portal-ui@1.0.0 lint: `eslint --fix --color 'src/**/*.js*' 'tests/**/*.js*' && prettier --write 'src/**/*.js*' 'tests/**/*.js*' 'src/**/*.css' 'src/**/*.scss'`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1026:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid membership-portal-ui@1.0.0
15 verbose cwd /var/www/membership-portal-ui
16 verbose Linux 5.15.49-linuxkit-pr
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lint"
18 verbose node v13.12.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error membership-portal-ui@1.0.0 lint: `eslint --fix --color 'src/**/*.js*' 'tests/**/*.js*' && prettier --write 'src/**/*.js*' 'tests/**/*.js*' 'src/**/*.css' 'src/**/*.scss'`
22 error Exit status 1
23 error Failed at the membership-portal-ui@1.0.0 lint script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
```

800+ linting errors in Docker container and local

Low Priority: Add Starred events to the frontend (and also the backend)

![Image](https://github.com/user-attachments/assets/ec4b6550-ed92-4138-9c0b-a55cc414551a)

low-priority

Portal Redesign

Starred Events

Credit the original membership portal builders (and us!!). I believe there is already some logic for it, a lot of the officer images area already in the pages/assets/images folder

open source at UCLA

Projects →

Learning →

Events →

Contribute →

featured project

opensource

what we've been doing recently...