LearnBasilan

Matuto • Maglaro • Magtagumpay

Empowering education through mother tongue learning for elementary students in Basilan, Philippines.

Getting Started • Features • Tech Stack • Architecture • Contributing

📱 "No Internet? No Problem. Every feature works offline."

Overview

LearnBasilan is a mobile learning application designed for elementary students in Basilan, Philippines. The app provides an offline-first learning experience with support for 5 languages: Filipino, Chavacano, Yakan, Tausug, and English.

The platform enables students to learn subjects, take quizzes, track progress, and earn achievements — all without requiring internet connectivity. Teachers can create content, generate QR codes for lesson distribution, and collect student progress reports via QR scanning.

Key Principle: No internet? No problem. Every feature works offline.

Features

For Students

Multi-Language Support — Learn in Filipino, Chavacano, Yakan, Tausug, or English
Interactive Lessons — Read through structured lessons with images and examples
Quizzes & Assessment — Test knowledge with multiple-choice questions
Progress Tracking — Monitor completed lessons, quiz scores, and learning streaks
Achievements & Badges — Earn rewards for completing milestones
XP & Leveling System — Gain experience points and level up
QR Code Import — Receive lessons, quizzes, and content from teachers via QR codes
Progress Sharing — Generate QR codes to share progress with teachers
Text-to-Speech — Listen to lessons read aloud (Filipino & English)

For Teachers

Content Creator — Create and edit lessons and quizzes directly in the app
QR Distribution — Generate QR codes for lessons, quizzes, and subjects
Progress Scanner — Scan student QR codes to import progress reports
Dashboard Analytics — View student performance, averages, and identify struggling students
Multi-Language Content — Create content in any supported language

Tech Stack

Category	Technology
Mobile Framework	React Native 0.76.9
Runtime	Expo SDK 52
Language	TypeScript 5.3
Database	expo-sqlite (SQLite)
State Management	Zustand
Forms	React Hook Form + Zod
Localization	i18next + react-i18next
QR Code	react-native-qrcode-svg + expo-barcode-scanner
Speech	expo-speech
Secure Storage	expo-crypto (SHA-256 hashing)
Local Storage	AsyncStorage

Architecture

Project Structure

Offline-Learning-App/
├── App.tsx                          # Root component with screen flow
├── app.json                         # Expo configuration
├── eas.json                         # EAS Build profiles
├── package.json                     # Dependencies
├── src/
│   ├── components/                  # Reusable UI components
│   │   └── AvatarPicker.tsx
│   ├── screens/                     # 13 app screens
│   │   ├── SplashScreen.tsx         # App loading
│   │   ├── LanguageScreen.tsx       # Language selection
│   │   ├── OnboardingScreen.tsx     # First-time user onboarding
│   │   ├── LoginScreen.tsx          # Student/Teacher login
│   │   ├── RegisterScreen.tsx       # New account registration
│   │   ├── HomeScreen.tsx           # Student dashboard
│   │   ├── SubjectDetailScreen.tsx  # Subject chapters & lessons
│   │   ├── LessonViewerScreen.tsx   # Lesson content reader
│   │   ├── QuizEngineScreen.tsx     # Quiz taking interface
│   │   ├── QRScannerScreen.tsx      # QR code scanner
│   │   ├── QRGeneratorScreen.tsx    # QR code generator
│   │   ├── TeacherDashboardScreen.tsx    # Teacher analytics
│   │   └── TeacherLessonCreatorScreen.tsx # Content creation
│   ├── services/                    # Business logic & data
│   │   ├── database.ts              # SQLite schema & initialization
│   │   ├── auth.ts                  # Authentication (SHA-256)
│   │   ├── progress.ts             # Progress tracking & badges
│   │   └── contentStore.ts         # Imported content management
│   ├── types/                       # TypeScript type definitions
│   │   └── qr.ts                   # QR payload types
│   ├── utils/                       # Utility functions
│   │   └── qr/                     # QR transfer system
│   │       ├── compress.ts         # Pako compression + base64
│   │       ├── chunk.ts            # Multi-QR chunking
│   │       ├── crc32.ts            # Integrity verification
│   │       ├── package.ts          # High-level API
│   │       └── index.ts            # Public exports
│   ├── theme/                       # Design system
│   │   └── colors.ts              # Color palette & shadows
│   └── translations/               # i18n localization
│       ├── en.json                 # English (479 keys - complete)
│       ├── fil.json                # Filipino (479 keys - complete)
│       ├── chavacano.json          # Chavacano (placeholder)
│       ├── yakan.json              # Yakan (placeholder)
│       ├── tausug.json             # Tausug (placeholder)
│       ├── TRANSLATION_TEMPLATE.csv # Translator spreadsheet
│       ├── csv_to_json.py          # CSV → JSON converter
│       └── TRANSLATOR_GUIDE.md     # Translation instructions

Database Schema

Table	Purpose
`users`	Student & teacher accounts
`subjects`	Mathematics, Science, English, Filipino, Araling Panlipunan
`lessons`	Lesson content with language and chapter ordering
`quizzes`	Multiple-choice questions linked to lessons
`progress`	Student lesson completion and scores
`user_stats`	XP, level, and streak tracking
`earned_badges`	Achievement badges earned by students
`imported_content`	Content imported via QR codes

QR Transfer System

The QR ecosystem is the primary method for distributing educational content offline.

Architecture:

Compress Chunk CRC32 QR Code ✅ Done

Compression — Pako (deflate level 9) + base64 encoding (60-96% size reduction)
Chunking — Splits data into ≤1800 character chunks for safe QR scanning
Integrity — CRC32 checksums verify data wasn't corrupted during transfer
Reconstruction — Automatic reassembly when all chunks are scanned

Supported QR Content Types:

Lessons (with images, examples, translations)
Quizzes (questions, choices, explanations)
Subjects (metadata and structure)
Progress Reports (student performance data)
Translation Packages (vocabulary lists)

Getting Started

Prerequisites

Node.js v18 or later
Expo CLI
EAS CLI (for building)
Android Studio or physical Android device (for testing)

Installation

# Clone the repository
git clone https://github.com/LikeNmuFF/Novu.git
cd Offline-Learning-App

# Install dependencies
npm install

# Start the development server
npx expo start

Running on Device

# Android (requires Android Studio or connected device)
npx expo start --android

# iOS (requires macOS and Xcode)
npx expo start --ios

Building for Production

# Build APK for Android
eas build --platform android --profile preview

# Build for production
eas build --platform android --profile production

Screen Flow

Splash Screen
    ↓
Language Selection (Filipino / Chavacano / Yakan / Tausug / English)
    ↓
Onboarding (first-time users)
    ↓
Login / Register
    ↓
Student App                          Teacher Dashboard
├── Home                             ├── Dashboard Overview
├── Subjects & Lessons               ├── Content Creator
├── Quizzes                          ├── QR Distribution Center
├── Progress Tracking                ├── Student Progress Import
├── Rewards & Badges                 └── Analytics
└── Profile

Gamification System

XP Rewards

Action	XP
Lesson Completed	+10 XP
Quiz Passed	+50 XP
Perfect Quiz Score	+100 XP

Level Progression

Level	XP Required
1	0
2	100
3	250
4	500
...	Scaling

Achievements

First Lesson Completed
First Quiz Passed
Perfect Score
5-Day Streak
10 Lessons Completed
100 XP Earned
And more...

Supported Languages

Language	Status
English	Complete (479 UI keys)
Filipino	Complete (479 UI keys)
Chavacano	Pending translation
Yakan	Pending translation
Tausug	Pending translation

Contributing Translations

See TRANSLATOR_GUIDE.md for instructions on contributing translations.

# Convert completed CSV translations to JSON
python src/translations/csv_to_json.py

Design System

Color Palette

Coral — Primary actions, headers
Teal — Science, success states
Gold — Achievements, rewards
Green — Progress, completion
Ocean — Text, backgrounds

Design Principles

Child-friendly, gamified interface
Rounded cards and large touch targets
Bright, engaging colors
Progress animations and celebrations
Minimum 16px text for readability
High contrast for accessibility

Building

EAS Build Profiles

Profile	Purpose	Channel
`development`	Development builds with dev tools	development
`preview`	Testing and QA	preview
`production`	Production release	production

Build Configuration

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  }
}

Project Status

Completed

QR Transfer Architecture (compression, chunking, CRC32)
SQLite database schema
Authentication system (SHA-256 password hashing)
13 React Native screens
i18n translation system (English complete)
Translation workflow (CSV template + converter)
Design token system

In Progress

EAS Build configuration
i18next integration
Tab navigation wiring
Phase 2 development (Subjects, Lessons, Quizzes)

Planned

Full i18n translations (Filipino, Chavacano, Yakan, Tausug)
Teacher Dashboard analytics
Advanced gamification
Accessibility improvements
Dark mode support

See Project Status.md for detailed development tracking.

Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow TypeScript strict mode
Use StyleSheet.create() for styling
All UI text must use i18n translation keys (never hardcode)
Test on physical devices when possible
Follow the existing code structure and patterns

License

This project is licensed under the MIT License - see the LICENSE file for details.

Thank You to Our Contributors

We appreciate all the contributions made to LearnBasilan! Whether it's code, translations, bug fixes, or suggestions — every contribution helps empower education through mother tongue learning.

Our Contributors

@C000KED — Lead Developer

@LikeNmuFF — Assistant Developer

Acknowledgments

Built with Expo
QR code generation with react-native-qrcode-svg
Inspired by Duolingo, Khan Academy Kids, and Google Classroom
Designed for the students and teachers of Basilan, Philippines
Special thanks to all contributors who help make this project better

LearnBasilan — Empowering education through mother tongue learning

Name		Name	Last commit message	Last commit date
Latest commit History 106 Commits
.github		.github
api		api
assets		assets
design-prototype		design-prototype
logs		logs
src		src
website		website
.gitignore		.gitignore
.npmrc		.npmrc
.vercelignore		.vercelignore
Agents.md		Agents.md
App.tsx		App.tsx
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
DEV_LOG.md		DEV_LOG.md
Design System.md		Design System.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
app.json		app.json
babel.config.js		babel.config.js
eas.json		eas.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

LearnBasilan

📱 "No Internet? No Problem. Every feature works offline."

Overview

Features

For Students

For Teachers

Tech Stack

Architecture

Project Structure

Database Schema

QR Transfer System

Getting Started

Prerequisites

Installation

Running on Device

Building for Production

Screen Flow

Gamification System

XP Rewards

Level Progression

Achievements

Supported Languages

Contributing Translations

Design System

Color Palette

Design Principles

Building

EAS Build Profiles

Build Configuration

Project Status

Completed

In Progress

Planned

Contributing

Development Guidelines

License

Thank You to Our Contributors

Our Contributors

Acknowledgments

About

Topics

Resources

License

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages