ClubZOne (College Club Management)

Overview

ClubZOne is a full-stack web application to manage college clubs. It provides:

• User authentication (signup/login/logout) using JWT (stored in an HTTP-only cookie)
• Club browsing and club details view
• Club posts and events (view-only for users)
• Club admin/superadmin features to update club profile, create events/posts, and manage members
• Image uploads via Cloudinary

This README is optimized for college placement submissions: easy setup + clear run instructions.

---

Tech Stack

Backend

• Node.js + Express
• MongoDB + Mongoose
• JWT authentication (cookie based)
• Cloudinary image upload (multer-storage-cloudinary)

Frontend

• React (Vite)
• Axios for API calls
• React Router

---

Folder Structure

• backend/ — Express API server
• Frontend/ — React + Vite frontend

---

Requirements

• Node.js (v16+ recommended)
• MongoDB (local or Atlas)
• Cloudinary account (for image uploads)

---

Environment Variables

Backend (backend/.env)

Create a file named .env inside backend/ with:

PORT=8000
MONGODB_URL=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Optional - AI assistant. Without it the assistant degrades gracefully.
ANTHROPIC_API_KEY=your_anthropic_key
ANTHROPIC_MODEL=claude-opus-5

A ready-to-copy template lives at backend/.env.example. The real .env is gitignored and never committed - copy it across machines by hand.

Setting up on a new machine? If MONGODB_URL points at MongoDB Atlas, add that machine's IP under Atlas > Network Access, or the connection will time out.

Frontend (Frontend/.env) (optional)

If frontend and backend run on different ports/domains, you can set:

VITE_API_BASE_URL=http://localhost:8000/api

If you don’t set it, the app uses /api.

---

Setup & Run

1) Backend

cd backend
npm install
npm run dev

Backend runs on http://localhost:8000 by default.

---

2) Frontend

cd Frontend
npm install
npm run dev

Frontend runs on the Vite default port (usually http://localhost:5173).

---

API Endpoints

Base paths:

• Auth: /api/auth
• Clubs: /api/club
• Club Admin: /api/clubadmin
• Health: /api/ping

Health Check

• GET /api/ping

Auth

• POST /api/auth/signup
  • Body: { fullName, email, password, role }
• POST /api/auth/login
  • Body: { email, password }
• POST /api/auth/logout

Clubs (Public / Read-only)

• GET /api/club/clubs
• GET /api/club/:clubId
• GET /api/club/:clubId/posts
• GET /api/club/:clubId/members
• GET /api/club/:clubId/events

Club Admin (Protected — uses JWT cookie)

All routes require protectRoute and verifyClubEditAccess.

• PUT /api/clubadmin/:clubId/profile

  • Updates: image, description, aboutUs

• POST /api/clubadmin/:clubId/events

  • Creates event
  • Supports image array upload: images (max 3)

• DELETE /api/clubadmin/:clubId/events/:eventId

• POST /api/clubadmin/:clubId/posts

  • Creates post
  • Supports image array upload: images (max 3)

• DELETE /api/clubadmin/:clubId/posts/:postId

• DELETE /api/clubadmin/:clubId/members/:userId

• PATCH /api/clubadmin/:clubId/members/:userId/role

  • Body: { role, canEdit }

---

Authentication Notes (Important)

• Backend stores JWT in a cookie named jwt (HTTP-only).
• Frontend sends credentials automatically via Axios (credentials: true behavior is handled by browser/CORS config).
• Unauthorized users are redirected to /login by the Axios interceptor.

---

Cloudinary Upload

• Backend uses multer with Cloudinary storage.
• Events/Posts accept images (array).

---

How to Test (Quick)

1. Start backend
2. Start frontend
3. Signup/login from frontend
4. Browse clubs
5. If logged in as club admin, try updating profile and creating events/posts

---

Placement Submission Notes

• Separation of concerns: backend controllers/routes/middlewares and frontend pages/components.
• Secure auth approach: JWT in cookie + protected routes.
• Real-world upload pipeline: multer + Cloudinary.

---

Author

ClubZOne Team