club-finder

UCLA Club Finder

Monorepo with a Node/Express API (server) and a React app powered by Vite (client).

Prerequisites

• Node 20+
• A MongoDB URI (Atlas or local)

1) Backend (server)

1. Create env from example and fill values

cd server
cp env.example .env
# set:
# PORT=4000
# MONGO_URI=your-mongodb-uri

1. Install and run

npm install
npm run dev

1. Expected log: connected to db and listening on port 4000.

Quick test

curl http://localhost:4000/api/clubs

Troubleshooting

• EADDRINUSE: change PORT in server/.env (e.g., 5000) or free the port with lsof -i :4000.
• Mongo auth/network: verify Atlas database user/password and IP access list.

2) Frontend (client)

1. Install and run dev server

cd ../client
npm install
npm run dev

1. App runs at http://localhost:5173.

Notes

• We migrated from CRA to Vite. Entry is client/src/main.jsx; HTML is client/index.html.
• MUI v5 is in use. Prefer imports from @mui/material and @mui/icons-material.

3) Environment and security

• Secrets live in server/.env (ignored by git). Never commit real credentials.
• If a secret was ever pushed, rotate it and scrub repo history.

Email Verification Sender Setup (Club Email)

Verification emails are sent using SMTP creds (do not commit secrets).

Required env vars

EMAIL_USER= EMAIL_PASS=

Gmail example

Step 1 — Log into the Gmail Step 2 — Turn on 2-Step Verification (required) Step 3 — Manage Google Account Step 4 — Search “App Password” Step 5 - Name “UCLA Club Finder App” Step 6 - Type Password in EMAIL_PASS Step 7 - Type Email in EMAIL_USER

After setting env vars

Restart/redeploy the backend so the new variables take effect.

4) Project scripts

Server

cd server
npm run dev           # start API with nodemon

Client

cd client
npm run dev           # start Vite dev server
npm run build         # production build
npm run preview       # preview production build

5) Current data sources

• Home cards are currently rendered from static arrays in client/src/components/CardGrid.jsx.
• Saved Clubs page uses placeholder slides; no real data is fetched yet.