케냐 학생들을 위한 무료 KCSE 코스 체커를 React, Supabase, M-Pesa를 사용해 만든 방법

Source: Dev.to

번역할 텍스트가 제공되지 않았습니다. 번역을 원하는 본문을 알려주시면 한국어로 번역해 드리겠습니다.

개요

매년 수천 명의 케냐 Form 4 졸업생들이 KUCCPS 배치를 기다리며 불안해합니다 — 자신이 실제로 자격이 있는 대학 과정을 모른 채. 저는 학생들이 KCSE 성적을 입력하면 즉시 자격이 있는 과정을 확인할 수 있는 무료 웹 앱을 만들었습니다.

Live demo:
Source code:

Problem Statement

KCSE 결과가 발표된 후, 학생들은 두 가지 주요 어려움에 직면합니다:

1. 클러스터 점수 계산 – KUCCPS가 특정 과정에 대한 적격성을 판단하기 위해 사용하는 점수.
2. 적격 프로그램 찾기 – 393개의 학위 및 디플로마 과정이 있으며, 공식 KUCCPS 사이트는 컷오프 포인트만 나열하고 자동 적격성 검사기를 제공하지 않습니다.

솔루션: KCSE 코스 체커

학생이 이용할 수 있는 단일 페이지 웹 앱:

• KCSE 과목 성적을 입력합니다.
• 즉시 모든 6개 KUCCPS 클러스터에 대한 계산된 클러스터 점수를 확인합니다.
• 2024 KUCCPS 컷오프 점수를 기준으로 자격이 되는 모든 학위 및 디플로마 프로그램을 확인합니다.
• 관심 분야(공학, 의학, 비즈니스, 법학 등)별로 결과를 필터링할 수 있습니다.
• 검증을 위해 공식 2024 KUCCPS 컷오프 PDF를 다운로드합니다.

기술 스택

클러스터 점수 공식

KUCCPS는 각기 다른 KCSE 과목 집합을 사용하여 과정을 여섯 개 클러스터로 구분합니다. 2024년 배치 데이터를 분석한 후 다음과 같은 보정 공식을 도출했습니다:

C = \sqrt{\frac{r}{48} \times \frac{t}{84}} \times 48 \times 0.957

• r – 원시 클러스터 과목 점수 (4과목에 걸쳐 최대 48점)
• t – KCSE 총점 (7과목에 걸쳐 최대 84점)
• 0.957 – 계산된 점수를 실제 2024년 KUCCPS 배치와 일치시키는 보정 계수.

결과적인 클러스터 점수는 공식 데이터를 충분히 가깝게 일치시켜 학생들에게 신뢰할 수 있는 안내를 제공합니다.

보안 M‑Pesa 결제 흐름

1. 사용자가 전화번호를 입력합니다.
2. 프런트엔드가 intasend-stk Edge Function을 호출합니다.
3. Edge Function이 IntaSend API를 통해 STK 푸시를 트리거합니다.
4. IntaSend가 사용자의 전화에 M‑Pesa PIN 입력을 요청합니다.
5. 사용자가 기기에서 PIN을 입력합니다.
6. IntaSend가 mpesa-callback Edge Function (웹훅)을 호출합니다.
7. 웹훅이 거래를 검증하고 payments 테이블을 confirmed(확인됨)으로 업데이트합니다.
8. 프런트엔드가 payments 테이블을 3 초마다 폴링합니다.
9. status = 'confirmed'가 되면 결과가 잠금 해제됩니다.

보안 원칙: 프런트엔드는 데이터를 직접 쓰지 않으며, 데이터베이스가 말하는 내용만 읽습니다. 모든 업데이트는 웹훅이 결제를 확인한 후 서버 측 Edge Function에 의해 수행되며, 결제 단계를 우회하려는 시도를 방지합니다.

데이터베이스 스키마 (RLS‑보호)

• users – 학생 프로필
• user_results – KCSE 과목 성적
• user_cluster_results – 계산된 클러스터 점수
• payments – M‑Pesa 결제 기록
• courses – 커트오프 점수가 있는 393개 강좌
• degree_programme_cutoffs_exact_2024 – 703개의 정확한 2024 KUCCPS 커트오프
• reviews – 학생 리뷰 (관리자 승인)

모든 테이블에 Row Level Security가 활성화되어 있어 각 사용자는 자신의 데이터만 접근할 수 있습니다.

User Flows

Returning Users

이전에 결제한 학생은 이름과 전화번호를 제공하면 결과를 조회할 수 있습니다; Google OAuth 사용자는 자동으로 조회됩니다.

Diploma‑Only Mode

학생의 총점이 C+ (46/84점) 이하인 경우, 앱이 자동으로 디플로마 전용 모드로 전환되어 학위 결과를 숨기고 설명 메시지를 표시합니다.

Interest Filtering

학생은 관심 분야별로 결과를 필터링할 수 있어 수백 개의 프로그램을 스크롤할 필요가 없습니다.

Progressive Web App

앱은 Play Store나 App Store를 거치지 않고 Android 및 iOS 기기에 설치할 수 있습니다.

교훈

1. IntaSend + Supabase Edge Functions – 케냐에서 문서가 부족함에도 불구하고 M‑Pesa 통합에 부드러운 조합이다.
2. SEO for React SPAs – JSON‑LD 구조화 데이터, 적절한 메타 태그, 사이트맵 추가 및 Google Search Console에 수동 제출이 필요했다.
3. Calibrating the cluster formula – 가장 시간이 많이 소요되는 부분; 공식 공식은 공개되지 않아 2024년 배치 데이터를 기준으로 광범위한 테스트가 필요했다.

Future Enhancements

• 보다 넓은 채택을 위한 맞춤형 .co.ke 도메인.
• 결제 및 사용자 통계를 모니터링하기 위한 관리자 대시보드.
• KUCCPS 배치 결과에 대한 푸시 알림.
• TVET 프로그램 및 추가 과정 포함.

참여하기

• 실제 앱:
• GitHub 저장소:

케냐의 Form 4 졸업생이나 그들의 부모를 알고 계시다면, 이 도구를 공유해 주세요. 케냐 EdTech 또는 M‑Pesa 통합에 관심이 있는 개발자는 코드를 탐색해 보시기 바랍니다.

태그: kenya react supabase mpesa edtech webdev typescript pwa