CIT-U Campus Navigator

Live Demo: https://campusnavigator.masurii.dev

Table of Contents

• Overview
• Features
• Technology Stack
• Architecture
• Prerequisites
• Installation
• Running the Application
• Future Enhancements
• Team
• Contact

Overview

The CIT-U Campus Navigator is a web application designed to simplify navigation across the Cebu Institute of Technology – University campus. It addresses common navigational challenges faced by students, visitors, and staff by providing an interactive map with real-time geolocation, building search, and informational markers.

Features

• Interactive Campus Map — Detailed map showcasing all campus buildings and key locations using Leaflet.
• Building Search — Quickly locate specific buildings by name with dynamic search results.
• Geolocation Support — Identify and display the user's current location on campus for easier orientation.
• Informative Markers — Visual markers that display relevant building and point-of-interest details on interaction.
• Responsive Design — Optimized for desktops, tablets, and mobile devices.

Technology Stack

Layer	Technology
Frontend	React 18, Leaflet, MUI
Backend	Spring Boot 3.x, Java 17
Database	MySQL
ORM	Hibernate
Deployment	Vercel (frontend), Render (backend)

Architecture

┌─────────────┐      ┌─────────────────┐      ┌──────────┐
│   Vercel    │──────▶   Render API    │──────▶  MySQL   │
│  (React)    │      │  (Spring Boot)  │      │  (Data)  │
└─────────────┘      └─────────────────┘      └──────────┘

• Frontend: https://campusnavigator.masurii.dev
• API: https://campusnavigator-api.onrender.com/api

Prerequisites

• Node.js v18.x or later
• npm or yarn
• JDK 17 or later
• Maven
• MySQL Server

Installation

1. Clone the repository:

   git clone https://github.com/MasuRii/CampusNavigator.git
   cd CampusNavigator

2. Configure the database:

   Create a MySQL database named campus_navigator and update the credentials in src/main/resources/application.properties:

   spring.datasource.url=jdbc:mysql://localhost:3306/campus_navigator
   spring.datasource.username=your_username
   spring.datasource.password=your_password
   spring.jpa.hibernate.ddl-auto=update

3. Install frontend dependencies:

   cd frontend/campusnavigator
   npm install
   cd ../..

4. Build the backend:

   mvn clean install

Running the Application

1. Start the backend:

   mvn spring-boot:run

   The API will be available at http://localhost:8080.

2. Start the frontend:

   cd frontend/campusnavigator
   npm start

   The application will open at http://localhost:3000.

Note

Update the frontend API endpoint configuration to point to http://localhost:8080 when running locally.

Future Enhancements

• Route planning between campus locations
• 3D mapping and visualization
• Offline map support
• Advanced search filters
• User authentication and personalized preferences

Team

• Math Lee L. Biacolo — BSIT 3
• Terence John N. Duterte — BSIT 3
• Christian Brent G. Alpez — BSIT 3
• Claive Justin J. Barrientos — BSIT 3
• Michael C. Gelera — BSIT 3

Contact

For questions or collaboration, contact the team leads:

• Math Lee L. Biacolo — math.biacolo@example.com
• Claive Justin J. Barrientos — claive.barrientos@example.com

---

Happy navigating!