A comprehensive web-based campus management system designed to digitize university operations and provide integrated services for students, staff, and administrators. The system implements modern web technologies with a distributed database architecture to ensure scalability and reliability.
- Student Portal - Centralized dashboard for academic information and services
- Unit Catalog - Course browsing and enrollment management
- Library Portal - Book search, borrowing, and renewal system
- Application System - Program application and status tracking
- Information Services - News, announcements, and academic calendar
- Staff Portal - Course management and student enrollment oversight
- Administrative Tools - Application processing, library management, and system administration
- Content Management - News, announcements, and system content updates
- Academic Calendar - University-wide event and deadline management
- Program Information - Comprehensive academic program details
- E-Learning Platform - Online learning resources and tools
- Campus Information - University services and campus life details
CockroachDB represents a NewSQL database that bridges traditional relational databases with modern scalability requirements:
NewSQL Characteristics:
- Maintains ACID transaction properties
- Provides SQL interface compatibility
- Offers horizontal scalability
- Ensures strong consistency across distributed nodes
- PostgreSQL Compatibility - Standard SQL syntax and wire protocol support
- Fault Tolerance - Automatic recovery from node failures without data loss
- Horizontal Scalability - Linear performance scaling through node addition
- Strong Consistency - ACID transactions with serializable isolation
- Geo-Distribution - Multi-region deployment with automatic data replication
Database Types:
├── SQL (Relational)
│ ├── Traditional: MySQL, PostgreSQL, Oracle
│ └── NewSQL: CockroachDB, TiDB, Spanner ← We are here!
├── NoSQL
│ ├── Document: MongoDB, CouchDB
│ ├── Key-Value: Redis, DynamoDB
│ └── Graph: Neo4j, ArangoDB
└── In-Memory: Redis, Memcached
The campus management system implements a 3-tier architecture pattern with clear separation of concerns:
graph TB
subgraph "Client Layer (Frontend)"
A[React App<br/>Port 5174]
B[Tailwind CSS<br/>Styling]
C[Font Awesome<br/>Icons]
end
subgraph "Application Layer (Backend)"
D[Express.js Server<br/>Port 3001]
E[REST API Routes]
F[Authentication<br/>Middleware]
G[Business Logic]
end
subgraph "Data Layer (Database)"
H[CockroachDB<br/>Port 26257]
I[Web UI<br/>Port 8080]
end
A --> D
D --> H
I --> H
style A fill:#61dafb
style D fill:#68a063
style H fill:#6933ff
graph LR
subgraph "Frontend (React)"
A1[Pages<br/>StudentPortal, Library, etc.]
A2[Components<br/>Reusable UI]
A3[Services<br/>API Calls]
A4[Contexts<br/>Auth & State]
end
subgraph "Backend (Node.js)"
B1[Routes<br/>API Endpoints]
B2[Middleware<br/>Auth, CORS, etc.]
B3[Database<br/>Connection Pool]
end
subgraph "Database (CockroachDB)"
C1[Tables<br/>Students, Staff, etc.]
C2[Indexes<br/>Performance]
C3[Constraints<br/>Data Integrity]
end
A1 --> A3
A3 --> B1
B1 --> B2
B2 --> B3
B3 --> C1
style A1 fill:#e1f5fe
style B1 fill:#e8f5e8
style C1 fill:#f3e5f5
sequenceDiagram
participant U as User Browser
participant R as React App
participant A as API Server
participant D as CockroachDB
U->>R: User Action (Login, View Data)
R->>A: HTTP Request (GET/POST/PUT)
A->>A: Validate & Process
A->>D: SQL Query
D->>A: Query Results
A->>R: JSON Response
R->>U: Updated UI
Note over U,D: All communication uses REST API
Note over A,D: Connection pooling for performance
erDiagram
STUDENTS ||--o{ ENROLLMENTS : has
UNITS ||--o{ ENROLLMENTS : contains
PROGRAMS ||--o{ STUDENTS : enrolled_in
PROGRAMS ||--o{ UNITS : offers
STAFF ||--o{ STAFF_UNITS : teaches
UNITS ||--o{ STAFF_UNITS : taught_by
STAFF ||--o{ ANNOUNCEMENTS : creates
STAFF ||--o{ NEWS : writes
STUDENTS ||--o{ BORROWINGS : borrows
BOOKS ||--o{ BORROWINGS : borrowed_as
STUDENTS {
uuid id PK
string student_id UK
string first_name
string last_name
string email UK
uuid program_id FK
int year
decimal gpa
string status
}
UNITS {
uuid id PK
string code UK
string name
text description
int credits
string school
uuid program_id FK
}
PROGRAMS {
uuid id PK
string name
string code UK
string degree_type
string department
text description
}
The application follows a modular architecture with clear separation between frontend, backend, and database layers:
├── src/ # Frontend React Application
│ ├── pages/ # Application pages and views
│ │ ├── StudentPortal.jsx # Student dashboard interface
│ │ ├── LibraryPortal.jsx # Library management system
│ │ ├── Programs.jsx # Academic program catalog
│ │ └── admin/ # Administrative interfaces
│ ├── components/ # Reusable UI components
│ ├── services/ # API communication layer
│ └── contexts/ # State management and authentication
├── server/ # Backend Node.js Application
│ ├── routes/ # REST API endpoint definitions
│ ├── db/ # Database schema and seed data
│ └── server.js # Express server configuration
└── cockroach-data/ # CockroachDB data storage
Data Flow: React Frontend → Express.js API → CockroachDB Database
- React 18 - Modern UI library with hooks and concurrent features
- Tailwind CSS - Utility-first CSS framework for rapid styling
- Vite - Lightning-fast build tool and dev server
- Font Awesome - Professional icon library
- Node.js - JavaScript runtime for server-side development
- Express.js - Minimal and flexible web application framework
- JWT Authentication - Secure token-based authentication
- CORS - Cross-origin resource sharing middleware
- CockroachDB - Distributed SQL database (NewSQL)
- PostgreSQL Compatible - Use familiar SQL syntax
- Horizontally Scalable - Add nodes as you grow
- Strongly Consistent - ACID transactions guaranteed
- Fault Tolerant - Survives node failures automatically
- Geo-Distributed - Deploy across multiple regions
- ESLint - Code linting and formatting
- Git - Version control
- npm - Package management
- Vscode-Programming IDE
- Node.js (v18 or higher)
- CockroachDB (latest stable version)
- Git
# Clone repository
git clone https://github.com/kiprutobeauttah/UOK.git
cd manage-campus
# Install frontend dependencies
npm install
# Install backend dependencies
cd server
npm install
cd ..-
Start CockroachDB (see
cockroach.txtfor detailed instructions)cockroach start-single-node --insecure --listen-addr=localhost:26257 --http-addr=localhost:8080 --store=cockroach-data
-
Start the backend
cd server npm start -
Start the frontend
npm run dev
-
Access Application Services
- Frontend Application: http://localhost:5174
- Backend API: http://localhost:3001
- Database Admin UI: http://localhost:8080
- Database Server: localhost:26257
┌─────────────────┬──────┬─────────────────────────┐
│ Service │ Port │ Purpose │
├─────────────────┼──────┼─────────────────────────┤
│ React Frontend │ 5174 │ User Interface │
│ Express API │ 3001 │ REST API Endpoints │
│ CockroachDB │ 26257│ Database Server │
│ CockroachDB UI │ 8080 │ Database Admin Panel │
└─────────────────┴──────┴─────────────────────────┘
Student Access:
- Student IDs:
STU001throughSTU008 - Password: Any value (authentication bypass in demo mode)
Staff Access:
- Staff IDs:
STAFF001throughSTAFF005 - Password: Any value (authentication bypass in demo mode)
- Responsive design supporting desktop, tablet, and mobile devices
- University branding with consistent color scheme (#8B1A1A)
- Smooth transitions and interactive elements
- Intuitive navigation structure
- Real data integration (no placeholder content)
- Complete CRUD operations for all entities
- Student enrollment and academic records management
- Library book borrowing and renewal system
- News and announcement content management
- Unit catalog with real course information
- JWT-based authentication system
This system demonstrates:
- Full-stack Development - Complete web application with frontend, backend, and database
- Modern Architecture - 3-tier architecture with proper separation of concerns
- Scalable Database - NewSQL database technology for enterprise-level applications
- Real-world Application - Practical university management system implementation
- Professional Development - Industry-standard tools and practices
/api/auth- Authentication services/api/students- Student management/api/staff- Staff management/api/units- Course catalog/api/library- Library services/api/announcements- News and announcements/api/applications- Program applications
- Students - Student records and enrollment data
- Staff - Faculty and administrative personnel
- Units - Course catalog and academic programs
- Programs - Degree programs and requirements
- Library - Book catalog and borrowing records
- Announcements - News and system notifications