JHUB-AFRICA/jhubafrica_website
Domain:
educationRecord type:
software
Creator:
JHU
Host:
# JHUB Africa Portal (Frontend Client)
The official web portal and administrator control center for **JHUB Africa**, built using React, TypeScript, and Vite. This application integrates directly with `jhub-backend` (running on Express + PostgreSQL + Supabase) to deliver dynamic resource catalogs, portfolio showcases, and administrative controls.
---
## 🚀 Key Features
* **Course Catalog**: A database-driven listing of short courses, categorized dynamically (e.g., Software, Data, Design), featuring duration calculators, prerequisites, delivery modes (Online/Hybrid/In-Person), and cohort recruitment status indicators.
* **Innovations Showcase**: Portfolio grids highlighting JKUAT/JHUB innovations. Support for guest proposal submissions, stage mapping (Concept to Scale), and automated JWT-claim based ownership tracking.
* **Events Calendar**: Interactive cards tracking upcoming dates, converting datetime stamps to readable calendar badges, and integrating waitlist sign-ups.
* **News & Announcements**: Dynamic blog board tracking announcements with category tags.
* **Secure Admin Dashboard**: Restricted JWT-protected management portal enabling staff to securely log in, verify statistics, and run full **CRUD operations** (Create, Read, Update, Delete) on:
* *News posts* (with base64 image uploads)
* *Events schedules* (automatically parsed by category keywords)
* *Innovations proposals* (approving, rejecting, or editing status stages)
* *Courses programs* (editing catalog options, publishing drafts, and featuring items)
---
## 🛠 Tech Stack
* **Framework**: React 18
* **Build Tool**: Vite
* **Routing**: TanStack Router (for absolute type-safe routing)
* **HTTP Client**: Axios
* **Styling**: Vanilla CSS (Premium, cohesive palette with light/dark glassmorphism, responsive flex grids, and status pills)
* **Type Checker**: TypeScript
---
## 📁 Project Structure
```
├── axios/
│ ├── api/ # Modular API client callers
│ │ …