Bayero University Kano Campus App

An interactive campus navigation app for Bayero University Kano (BUK) that helps students, staff, and visitors find their way around the campus.

Features

  • πŸ—ΊοΈ Interactive campus map with faculty locations
  • πŸ“ Real-time location markers for all faculties
  • 🧭 Turn-by-turn directions between locations
  • πŸ“± Mobile-responsive design
  • πŸ” Search functionality for quick faculty lookup
  • ℹ️ Detailed information about each faculty

Faculties Included

  • Faculty of Engineering
  • Faculty of Medicine
  • Faculty of Science
  • Faculty of Arts and Social Sciences
  • Faculty of Education
  • Faculty of Law
  • Faculty of Agriculture
  • Faculty of Management Sciences
  • Faculty of Computing and Mathematical Sciences
  • Faculty of Earth and Environmental Sciences

Project Structure

β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ index.ts           # Main API server
β”‚   └── data/
β”‚       └── faculties.ts   # Faculty data and coordinates
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ index.html         # Main HTML template
β”‚   β”œβ”€β”€ index.tsx          # React app entry point
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ App.tsx        # Main app component
β”‚   β”‚   β”œβ”€β”€ Map.tsx        # Interactive map component
β”‚   β”‚   └── FacultyList.tsx # Faculty listing component
β”‚   └── style.css          # Custom styles
β”œβ”€β”€ shared/
β”‚   └── types.ts           # Shared TypeScript types
└── README.md

Usage

The app provides an intuitive interface where users can:

  1. View the campus map with all faculty locations marked
  2. Click on any faculty marker to see details
  3. Search for specific faculties
  4. Get directions between any two points on campus
  5. View contact information and descriptions for each faculty

Technology Stack

  • Frontend: React 18.2.0 with TypeScript
  • Backend: Hono framework
  • Mapping: Leaflet.js for interactive maps
  • Styling: TailwindCSS
  • Icons: Lucide React icons