JHUB-AFRICA/jhubafrica_website

# 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 │ │ …