Barishal University Career Club (BUCC) — Official Platform & CMS | Mahfuj Abdullah

Overview

The Barishal University Career Club (BUCC) (bucareerclub.com) is the premier student-led career development organization at the University of Barishal, Bangladesh. The platform bridges the gap between undergraduate academics and professional industries by providing real-time event registrations, career workshops, executive panels, and university-wide circulars.

The system is architected as a decoupled full-stack platform:

Student & Public Web Portal (Frontend-bucc): An ultra-fast, responsive web interface built with React 19, Vite 7, Tailwind CSS v4, and TanStack Query, offering instant page transitions and interactive event catalogs.
Central Cloud REST API (bucc-api): A typed Express 5 backend written in TypeScript with MongoDB, orchestrating authentication, Google OAuth 2.0, Cloudinary media uploads, and document distribution.
Internal Administration CMS: An administrative management suite allowing club executives and faculty advisors to publish notices, manage workshops, review member profiles, and upload assets without manual database intervention.

flowchart TD
    subgraph ClientLayer["🌐 Student & Public Portal (bucareerclub.com)"]
        UI["React 19 + Vite 7 Client"]
        ROUTER["React Router 7 (Code-Split Routes)"]
        QUERY["TanStack Query (Cache & Hydration)"]
        MOTION["Framer Motion + Tailwind CSS v4"]
        UI --> ROUTER
        ROUTER --> QUERY
        QUERY --> MOTION
    end

    subgraph Security["🔐 Identity & Authorization"]
        AUTH["Google OAuth 2.0 (Passport.js)"]
        JWT["Stateless JWT Session Verification"]
        AUTH --> JWT
    end

    subgraph BackendAPI["⚡ Central Cloud Backend (bucc-api)"]
        EXPRESS["Express 5 + TypeScript Engine"]
        MIDDLEWARE["CORS · Logger · Multer Busboy"]
        ROUTERS["Notice · Events · Blog · Committee Routers"]
        EXPRESS --> MIDDLEWARE
        MIDDLEWARE --> ROUTERS
    end

    subgraph StorageLayer["📦 Data & Media Services"]
        MONGO[("MongoDB Native Cluster\n(Pooled Connection)")]
        CLOUDINARY["Cloudinary Media CDN\n(Image Transformations)"]
        GDRIVE["Google Drive API v3\n(Document Distribution)"]
    end

    ClientLayer <-->|REST API / JSON| EXPRESS
    Security <--> EXPRESS
    ROUTERS <--> MONGO
    ROUTERS <--> CLOUDINARY
    ROUTERS <--> GDRIVE

💻 1. Responsive Web Portal (React 19 & Vite 7)

The public storefront delivers a modern, accessible interface tailored for thousands of undergraduate and postgraduate students exploring professional opportunities.

BUCC Desktop Web Portal Walkthrough Fig 1: Live walkthrough of bucareerclub.com showing animated statistics, executive wings, upcoming workshop announcements, and footer links.

Key Frontend Capabilities:

React 19 & Vite 7 Build Pipeline: Sub-second hot module reloading in development and ultra-compact static bundles deployed with automated cache headers.
Tailwind CSS v4 Engine: Modern utility styling utilizing zero-configuration CSS variables, fluid responsive typography, and dark/light adaptive color tones.
TanStack Query State Sync: Automatic background refetching, client cache invalidation, and optimistic updates for notices and event registrations.
Framer Motion Micro-Interactions: Smooth page reveals, carousel transitions, and interactive milestone counters tracking student reach and career sessions.
Campus Map Integration (react-leaflet): Embedded interactive geographic map pinning the University of Barishal campus location and club room headquarters.

📱 2. Mobile-First Student Experience

Recognizing that over 80% of students access university circulars from their smartphones, the interface was engineered mobile-first:

BUCC Mobile-First Student Walkthrough Fig 2: Mobile viewport experience showcasing touch-optimized navigation, event cards, and readable typography.

Touch-Optimized Drawers & Navigation: Fast modal sheets and drawer overlays for seamless navigation across Notice Boards, Blogs, Committee Directories, and About sections.
Fluid Aspect Ratios: Clean card layouts and responsive media embeds that eliminate horizontal scrolling on small phone viewports.

⚡ 3. Express 5 & TypeScript REST Architecture (`bucc-api`)

The backend API is structured with Express 5 and TypeScript, enforcing strict modular boundaries across domain modules:

src/
├── config/         # MongoDB pooling, Passport Google OAuth
├── middlewares/    # Logger, Auth guards, Multer upload filters
├── modules/
│   ├── auth/       # Google OAuth 2.0 & JWT token exchange
│   ├── blog/       # Career tips & scholarship articles
│   ├── comittee/   # Advisory board & executive wing directories
│   ├── doc/        # Google Drive document integration
│   ├── events/     # Workshop calendars & participant tracking
│   ├── notice/     # Official circulars & priority news
│   ├── upload/     # Cloudinary media transformation stream
│   └── user/       # Role-Based Access Control (Admin / Member)
├── app.ts          # Express 5 initialization & global routes
└── server.ts       # Application listener & database connection

Backend Engineering Highlights:

MongoDB Driver Connection Pooling: Uses native MongoDB client connection caching (connectDB) to prevent cold-start latency and avoid connection leaks under concurrent traffic spikes.
Stateless JWT & Google OAuth: Integrated with Passport.js and Google OAuth 2.0, enabling university students and administrators to authenticate securely with their institutional Google accounts.
Cloudinary Media Pipeline: Uploads stream directly through Multer and Cloudinary SDK, auto-compressing event banners and member headshots on the fly.
Document & Notice Distribution: Direct Google Drive API integration allowing advisors to attach PDF circulars and scholarship applications to notice posts.

🛡️ 4. Executive Directory & Secure Admin CMS

To protect student data and announcement authenticity, the platform includes a secure internal CMS (/233ggxxQQwww-admin):

Executive Committee Hierarchy: Categorizes and updates club leadership across Wings (Content, PR, IT, Research, Event Operations) and Advisory panels with LinkedIn and GitHub links.
Event Dispatch Engine: Empowers club organizers to create workshop listings with registration links, dates, venues, and live countdown timers.
Notice Board Publisher: Publishes urgent notices with priority pinning and automated categorization.

📊 Technical Stack & Architectural Specifications

Component	Technology	Role in Ecosystem
Frontend Framework	React 19 (`^19.2.0`)	High-performance interactive UI components
Build Tool	Vite 7 (`^7.2.4`)	High-speed bundle compilation & dev server
Styling	Tailwind CSS v4 (`^4.1.18`)	Fluid responsive utilities & CSS tokens
Server State	TanStack Query v5	Data fetching, cache pooling, and query sync
Animation	Framer Motion & CountUp	Smooth UI transitions and animated statistics
Backend API	Express 5 (`^5.2.1`)	High-throughput REST API with middleware pipeline
Language	TypeScript 5.9	Full end-to-end type safety on backend modules
Database	MongoDB Native Driver	Flexible document persistence with connection pool
Authentication	Passport Google OAuth 2.0 + JWT	Secure single sign-on & token verification
Media & Storage	Cloudinary & Google Drive API	Automated asset optimization and document distribution
Deployment	Vercel & Production Server	Global edge CDN distribution with automated SSL