Beyond Campus

Premium Alumni Homecoming Platform for reconnecting, networking, and celebrating the legacy of LPU alumni.

---

Overview

Beyond Campus is a full-stack web application designed to facilitate alumni engagement, event management, and community building for Lovely Professional University (LPU) graduates. The platform provides a modern, responsive interface for alumni to connect with fellow graduates, explore career opportunities, and participate in exclusive homecoming events.

Built with Next.js 15 and React 19, the application leverages server-side rendering for optimal performance and SEO. The backend is powered by MongoDB with Mongoose for flexible data modeling, while JWT authentication ensures secure access to protected routes.

---

Features

Core Functionality

• Alumni Directory — Searchable and filterable database of alumni profiles with advanced search capabilities
• Event Management — Comprehensive event listings with registration, capacity tracking, and RSVP functionality
• Media Gallery — Visual showcase of past homecoming events and campus memories
• User Authentication — Secure registration and login with email/password and alumni ID verification
• User Dashboard — Personalized dashboard for managing profile, registered events, and connections

User Interface

• Responsive Design — Fully optimized for desktop, tablet, and mobile devices
• Dark/Light Theme — System-aware theme switching with smooth transitions
• Micro-interactions — Polished animations using Framer Motion
• Particle Effects — Immersive visual effects on the landing page

Technical Highlights

• Server-side rendering with Next.js 15 App Router
• API routes for backend functionality
• Form validation with React Hook Form and Zod
• Component library built on Radix UI primitives
• CSS-in-JS patterns with Tailwind CSS

---

Tech Stack

Category	Technology
Framework	Next.js 15.1.0
Language	TypeScript 5.x
UI Library	React 19
Styling	Tailwind CSS 3.4.17
Component Library	shadcn/ui (Radix UI)
Animations	Framer Motion
Database	MongoDB 6.15 / Mongoose 8.13
Authentication	JWT / bcryptjs
Form Handling	React Hook Form + Zod
Icons	Lucide React
Package Manager	Bun / npm

---

Project Structure

beyond-campus/
├── app/                        # Next.js App Router
│   ├── api/                    # API route handlers
│   │   ├── login/             # Authentication endpoints
│   │   ├── logout/
│   │   ├── register/
│   │   └── user/
│   ├── dashboard/             # User dashboard
│   ├── directory/            # Alumni directory
│   ├── events/                # Events listing
│   ├── gallery/               # Photo gallery
│   ├── login/                 # Login page
│   ├── register/             # Registration page
│   ├── globals.css           # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx              # Homepage
├── components/                # React components
│   ├── ui/                   # shadcn/ui components
│   ├── alumni-spotlight.tsx  # Featured alumni
│   ├── countdown-timer.tsx   # Event countdown
│   ├── footer.tsx            # Site footer
│   ├── magnetic-button.tsx   # Custom button
│   ├── navbar.tsx            # Navigation
│   ├── particle-background.tsx
│   ├── spotlight-effect.tsx  # Visual effect
│   └── text-reveal.tsx       # Animation component
├── hooks/                     # Custom React hooks
│   ├── use-mobile.tsx
│   └── use-toast.ts
├── lib/                       # Utilities
│   ├── auth.ts               # Auth context provider
│   ├── mongodb.ts            # MongoDB connection
│   └── utils.ts              # Utility functions
├── public/                    # Static assets
├── styles/                    # Additional styles
├── middleware.ts              # Route protection
├── tailwind.config.ts         # Tailwind configuration
├── next.config.mjs            # Next.js configuration
├── tsconfig.json              # TypeScript configuration
└── package.json               # Dependencies

---

Getting Started

Prerequisites

• Node.js 18.x or higher
• MongoDB instance (local or Atlas)
• npm, yarn, or bun package manager

Installation

1. Clone the repository:

git clone https://github.com/your-repo/beyond-campus.git
cd beyond-campus

2. Install dependencies:

npm install
# or
bun install

3. Configure environment variables:

Create a .env.local file in the root directory:

# MongoDB Connection
MONGODB_URI=mongodb://localhost:27017/alumniDB
# or for MongoDB Atlas
MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/alumniDB

# JWT Configuration
JWT_SECRET=your-super-secret-jwt-key-change-in-production

# Application URL
NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm start

---

API Routes

Method	Endpoint	Description
POST	/api/register	Register a new alumni account
POST	/api/login	Authenticate user
POST	/api/logout	End user session
GET	/api/user	Get current user data

Registration Payload

{
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  graduationYear: string;
  degree: string;
  studentId?: string;
  agreeTerms: boolean;
}

Login Payload

{
  loginType: 'email' | 'alumniId';
  email?: string;
  alumniId?: string;
  password: string;
  remember?: boolean;
}

---

Design System

Brand Colors

Token	Value	Usage
primary	#FF6B00	Primary actions, highlights
primary-light	#FFA800	Gradients, accents
dark	#000000	Dark mode backgrounds
light	#FFFFFF	Light mode backgrounds

Gradients

/* Primary gradient */
gradient-primary: linear-gradient(135deg, #FF6B00 0%, #FFA800 100%)

/* Hero gradient */
gradient-hero: linear-gradient(135deg, #FF6B00 20%, #000 80%)

Typography

Element	Font	Weight
Headings	Space Grotesk	700
Body	Inter	400
Code	JetBrains Mono	400

Component Patterns

• Glass morphism — Translucent cards with backdrop blur
• Spotlight effects — Radial gradient highlights
• Particle background — Animated canvas particles

---

Environment Variables Reference

Variable	Required	Description
MONGODB_URI	Yes	MongoDB connection string
JWT_SECRET	Yes	Secret key for JWT signing
NEXT_PUBLIC_APP_URL	No	Production app URL

---

Contributing

Contributions are welcome. Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Standards

• Use TypeScript for all new code
• Follow existing code style and conventions
• Run linting before committing (npm run lint)
• Ensure type safety throughout

---

Acknowledgments

• LPU (Lovely Professional University) for the alumni community
• shadcn/ui for the component library
• Next.js for the framework
• Framer Motion for animations

---

Built with Next.js 15 · Deployed on Vercel