🎓 Connect Campus

A modern web application built with Next.js for connecting students and faculty on campus. This platform facilitates seamless communication, resource sharing, and community building within educational institutions.

---

Table of Contents

• 🎓 Connect Campus
  • Table of Contents
  • ✨ Features
  • 🛠️ Tech Stack
  • 🏗️ Project Structure
  • 🚀 Getting Started
    • Prerequisites
    • Installation
  • 🔑 Environment Variables
  • 🏃 Running Locally
  • 🧪 Mock Data System
    • Enabling Mock Data
    • What Mock Data Provides
    • Configuring Mock Images
    • Disabling Mock Data
    • Console Warnings
  • 🐳 Dockerization
    • Build and Run with Docker
  • 📦 Deployment
  • 🔒 SSL & HTTPS
  • 🤝 Contributing
  • 📜 License
  • 👥 Team
  • 🙏 Acknowledgments

---

✨ Features

• Modern, responsive UI built with Radix UI components
• Real-time communication capabilities
• Secure authentication and authorization
• Optimized image handling and compression
• Form validation with React Hook Form and Zod
• Smooth animations with Framer Motion
• Type-safe development with TypeScript

🛠️ Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI
• Form Handling: React Hook Form
• Validation: Zod
• HTTP Client: Axios
• Animation: Framer Motion
• Icons: Lucide React
• State Management: React Context + Custom Hooks

🏗️ Project Structure

src/
├── app/           # Next.js app router pages and layouts
├── components/    # Reusable UI components
├── context/       # React Context providers
├── hooks/         # Custom React hooks
├── lib/           # Library configurations
├── services/      # API and external service integrations
├── types/         # TypeScript type definitions
├── utils/         # Utility functions
└── constants/     # Application constants

🚀 Getting Started

Prerequisites

• Node.js (v19.0.0 or higher)
• npm, yarn, or pnpm
• Git

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/campus-connect.git
   cd campus-connect

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables:

   cp .env.example .env.local
   # Edit .env.local with your configuration

🔑 Environment Variables

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

# Required environment variables:
NEXT_PUBLIC_BASE_URL=https://your-app-domain.com
NEXT_PUBLIC_API_BASE_URL=https://your-api-domain.com
NEXT_PUBLIC_S3_BASE_URL=https://your-s3-bucket-url.com
NEXT_PUBLIC_API_REFRESH_URL=https://your-api-domain.com/refresh

# Optional: Enable mock data for frontend testing (see Mock Data System section)
# NEXT_PUBLIC_USE_MOCK_DATA=true

🏃 Running Locally

Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

Build and start for production:

npm run build
npm start

🧪 Mock Data System

The application includes a mock data system that allows you to test the frontend without requiring a backend connection. This is particularly useful during frontend development or when the backend API is unavailable.

Enabling Mock Data

To enable mock data, add the following environment variable to your .env.local file:

NEXT_PUBLIC_USE_MOCK_DATA=true

After adding this variable, restart your development server:

npm run dev

What Mock Data Provides

When enabled, the mock data system provides:

• 40 realistic lease listings with varied property types, prices, and locations
• Filtering and sorting - All filters (property type, price range, duration, semester) work with mock data
• Pagination - Test the "Load More" functionality with realistic data
• Image support - Uses images from /public/mockImages/ folder
• Consistent data - Same lease ID always returns the same data for reliable testing

Configuring Mock Images

Mock images are located in the /public/mockImages/ folder. The system automatically uses all images in this folder. To add or change images:

1. Add your images to /public/mockImages/
2. Update the MOCK_IMAGE_PATHS array in src/services/mockLeaseData.ts:

const MOCK_IMAGE_PATHS = [
  "/mockImages/image.png",
  "/mockImages/image copy.png",
  // Add your image paths here
];

Supported image path formats:

• Local public folder paths: /mockImages/your-image.png
• S3-style URLs: https://bucket.s3.amazonaws.com/image.jpg
• Any valid image URL

Disabling Mock Data

To disable mock data and use the real API:

1. Remove NEXT_PUBLIC_USE_MOCK_DATA from your .env.local file, or set it to false
2. Restart your development server

Console Warnings

When mock data is enabled, you'll see [MOCK] warnings in the browser console indicating which API calls are using mock data. This helps you distinguish between mock and real API calls during development.

🐳 Dockerization

You can run this app in a containerized environment. Here is a sample Dockerfile:

# Use official Node.js image
FROM node:20-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Production image
FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app .
ENV NODE_ENV=production
EXPOSE 3000
CMD ["npm", "start"]

Build and Run with Docker

docker build -t campus-connect .
docker run -p 3000:3000 --env-file .env.local campus-connect

Note: For custom domains and HTTPS, see SSL_README.md.

📦 Deployment

The application is optimized for deployment on Vercel. To deploy:

1. Push your code to GitHub
2. Import your repository to Vercel
3. Configure environment variables
4. Deploy!

For other platforms or self-hosting (e.g., Docker, NGINX), ensure you:

• Set up environment variables
• Serve the app behind a reverse proxy (NGINX recommended)
• Use HTTPS (see SSL_README.md)

🔒 SSL & HTTPS

For production deployments, it is highly recommended to use HTTPS. See SSL_README.md for a complete guide to automated SSL management with NGINX, acme.sh, and ZeroSSL.

🤝 Contributing

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

Please read CONTRIBUTING.md for details on our code of conduct and development process.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

Het Koradia and Ben Hardy

🙏 Acknowledgments

• Next.js team for the amazing framework
• Radix UI for the accessible components
• Tailwind CSS for the utility-first CSS framework
• All contributors and maintainers of the open-source libraries used in this project