Umoja Pamoja Youth Outreach

A completed frontend website concept for Umoja Pamoja Youth Outreach in Kilwa Masoko, Tanzania. The project presents the outreach mission, local church partnership, ministry priorities, prayer needs, stories, and a clear path to Africa Inland Mission's official donation page through a responsive, visually focused single-page experience.

Live Demo

View the deployed website

Project Overview

This project was designed as a polished web concept for a Christian outreach initiative centered on cooperation between local churches in Tanzania. The site combines mission-focused storytelling with a compact visual identity, responsive layout, reusable React components, and centralized content management.

The finished concept demonstrates how the organization could communicate its mission online while keeping fundraising, stories, and impact reporting transparent and easy to update.

Features

• Responsive single-page layout for desktop and mobile viewing
• Distinct hero, mission, story, giving, prayer, and footer sections
• Reusable React components for clear separation of page content
• Centralized outreach content and external links in src/content.ts
• Custom typography using Barlow Condensed and Bodoni Moda
• Purpose-built visual system with custom CSS rather than a component framework
• Clear calls to action for learning about the outreach and supporting the project
• Direct link to Africa Inland Mission's official giving page
• Visible placeholder treatment for unverified stories, photographs, and impact figures
• Automated production builds and GitHub Pages deployment through GitHub Actions

Technology

Area	Technology
UI	React 19
Language	TypeScript 5.9
Build Tool	Vite 8
Styling	Custom CSS
Typography	Fontsource
Deployment	GitHub Pages + GitHub Actions
Runtime	Node.js 22+

Project Structure

umoja-pamoja-website/
├── .github/
│   └── workflows/
│       └── deploy-pages.yml   # Automated GitHub Pages deployment
├── public/                    # Static assets
├── src/
│   ├── components/
│   │   ├── Footer.tsx
│   │   ├── Giving.tsx
│   │   ├── Header.tsx
│   │   ├── Hero.tsx
│   │   ├── Mission.tsx
│   │   └── Stories.tsx
│   ├── App.tsx                # Page composition
│   ├── content.ts             # Shared outreach content and links
│   ├── main.tsx               # Application entry point
│   └── styles.css             # Layout, typography, and responsive design
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Design Approach

The interface was built around a warm editorial style rather than a generic application layout. The design uses strong typography, compact content blocks, restrained accent colors, and deliberate section changes to give the site a recognizable identity while keeping the mission content readable.

Content that may change over time is separated from the main layout where practical. Outreach priorities, prayer points, story placeholders, progress milestones, and the donation destination are maintained in src/content.ts, making the concept easier to revise without restructuring the page.

Data and Content Transparency

This repository is a portfolio concept and demonstration, not the official production website for Umoja Pamoja Youth Outreach.

Some photographs, testimonials, campaign totals, impact figures, and story content remain intentionally marked as placeholders until approved material and verified reporting are available. The sample 53 / 47 progress display should not be interpreted as a factual ministry result.

This distinction is intentional so the design can be demonstrated without presenting unverified information as fact.

Running Locally

Requirements

• Node.js 22 or newer
• npm

Clone the repository:

git clone https://github.com/IPFizzy/umoja-pamoja-website.git
cd umoja-pamoja-website

Install dependencies:

npm install

Start the development server:

npm run dev

Create a production build:

npm run build

Preview the production build locally:

npm run preview

Deployment

The project includes a GitHub Actions workflow that automatically builds and deploys the site to GitHub Pages whenever changes are pushed to main.

The deployment process:

1. Checks out the repository
2. Configures Node.js 22
3. Installs dependencies with npm ci
4. Runs the production build
5. Uploads the generated dist directory
6. Deploys the result to GitHub Pages

Updating Content

Most repeated outreach information is stored in:

src/content.ts

Page-specific layout and presentation are divided among the components in:

src/components/

Before using this design for an official public launch, placeholder photographs and stories should be replaced only with permission-cleared material, and ministry statistics or fundraising claims should be verified by the organization.

Author

Keon Bushman
Software Development Student & IT Professional
GitHub Profile