IT Master: Professional IT Training App

A comprehensive mobile training application for iOS and Android built with React Native and Expo. This app provides structured IT courses across beginner, intermediate, and advanced levels with interactive lessons, hands-on activities, real-time code execution, network simulations, security scenarios, and a final comprehensive exam with certificate generation.

✨ Features

📚 22 Comprehensive Courses

The app includes 22 IT courses organized by skill level with proper course-to-lesson hierarchy:

Beginner Level (7 Courses):

Introduction to IT
Computer Hardware Basics
Operating Systems Fundamentals
Networking Basics
Internet and Web Basics
Cybersecurity Fundamentals
Data Management Basics

Intermediate Level (8 Courses):

Advanced Networking
Linux Administration
Windows Server Basics
Database Fundamentals
Cloud Computing Basics
Virtualization Essentials
Security Best Practices
IT Compliance & Governance

Advanced Level (7 Courses):

Advanced Linux Administration
Active Directory & Group Policy
Advanced Networking & Routing
Cloud Architecture
Cybersecurity Advanced Topics
IT Project Management
Disaster Recovery & Business Continuity

📖 Interactive Lessons

Each course includes 4+ comprehensive lessons with:

Full-Text Content: 6+ paragraphs per lesson (5-7 sentences each) covering topics in depth
Markdown Rendering: Beautiful formatting with syntax highlighting, code blocks, and proper typography
Read-Aloud Feature: Text-to-speech functionality with play/pause/resume controls and speed adjustment
Font Size Controls: Adjustable text size (12-24px) for accessibility and comfort
Accurate Reading Time: Calculated based on content length and reading speed
Offline Access: Lessons cached locally for studying without internet connection

🎯 Real Hands-On Activities

Interactive learning experiences that go beyond quizzes:

Code Editor: Write and execute Python, JavaScript, SQL, and Bash code with real-time feedback and hints
Network Simulator: Design network topologies, connect devices, and test network connectivity
Security Scenarios: Interactive threat response scenarios with multiple choice decisions and detailed feedback
In-Lesson Quizzes: 10+ quizzes per lesson with detailed explanations and lesson references
Challenges: Coding challenges and troubleshooting exercises with validation and scoring

✅ Comprehensive Testing System

Lesson Quizzes: 10+ questions per lesson with detailed explanations
Course Tests: 15+ questions per course with shuffled questions and answers
Final Exam: 100+ comprehensive questions covering all courses
85% Pass Gate: Must score 85% or higher to unlock the next course
Question Shuffling: Different questions on each attempt for better learning
Answer Shuffling: Randomized answer options to prevent pattern recognition
Quiz Feedback: Detailed explanations and lesson references for incorrect answers

🎓 Certificates & Progress Tracking

Certificates: Earn certificates upon passing the final exam with 80%+ score
PDF Export: Download progress reports with statistics, achievements, and certificates
Progress Dashboard: Visual representation of learning progress across all courses
Study Streaks: Daily streak tracking with motivational displays and longest streak history
Achievements: Unlock 10+ unique badges for milestones and accomplishments
Learning Analytics: Charts showing learning velocity, time spent per course, and weak areas

🎮 Gamification Features

Leaderboard: User rankings based on courses completed and test scores
Achievements & Badges:
- Getting Started (first lesson completed)
- Course Master (complete a course)
- Expert Learner (complete 5 courses)
- IT Master (complete all courses)
- Perfect Score (100% on a test)
- Week Warrior (7-day streak)
- Dedicated Scholar (30-day streak)
- Certified Professional (pass final exam)
- Speed Learner (complete course in under 1 hour)
- Consistent Learner (100+ total lessons)
Study Streaks: Track daily study streaks with longest streak history
Points System: Earn points for completing lessons, activities, and tests

📱 Mobile Optimizations

Responsive Design: Optimized layouts for phones, tablets, and different screen sizes
Safe Area Handling: Proper button placement and navigation with safe area insets
Back Buttons: Easy navigation with back buttons on all screens
Breadcrumb Navigation: Clear navigation path showing current location in app
Gesture Navigation: Swipe gestures for intuitive navigation between screens
Offline Mode: Cache lessons and videos locally for studying without internet

🎥 Video Lessons

Embedded Videos: Video lessons for complex topics like networking and cybersecurity
Progress Tracking: Track video completion (80% watched = complete)
Playback Controls: Play, pause, skip, and speed controls
Offline Caching: Download videos for offline viewing (30-day cache)

🔔 Push Notifications

Daily Reminders: Customizable study reminders to maintain streaks
Achievement Alerts: Notifications when badges are unlocked
Course Completion: Notifications when courses are completed
Study Group Activity: Alerts for activity in study groups

👥 Study Groups & Collaboration

Create Groups: Start study groups with other learners
Note Sharing: Share study notes and resources with group members
Discussion: Collaborate on challenging topics and share insights
Group Leaderboard: See how your progress compares to group members

🧠 Advanced Learning Features

Spaced Repetition: SM-2 algorithm optimizes quiz review scheduling based on difficulty and performance
Quiz Feedback: Detailed explanations and lesson references for incorrect answers
Learning Analytics: Charts showing learning velocity, time spent per course, and weak areas
Personalized Recommendations: AI-powered course suggestions based on performance

⚙️ Settings & Customization

Reset Data: Clear all progress and start fresh with confirmation dialog
Offline Mode Management: View cache statistics and manage stored content
Notification Settings: Customize notification preferences and frequency
Theme: Light and dark mode support with automatic system detection
Accessibility: Font size adjustments, high contrast modes, and text-to-speech controls

🛠 Technical Stack

Framework: React Native 0.81 with Expo SDK 54
Language: TypeScript 5.9
Styling: NativeWind 4 (Tailwind CSS for React Native)
State Management: React Context + AsyncStorage
Audio: expo-speech for text-to-speech
Navigation: Expo Router 6
Icons: Expo Vector Icons (Material Icons + SF Symbols)
Notifications: expo-notifications
File System: expo-file-system for caching
Markdown: react-native-markdown-display

📁 Project Structure

it-training-app/
├── app/                                  # Expo Router app directory
│   ├── (tabs)/
│   │   ├── index.tsx                    # Home screen with course list
│   │   ├── progress.tsx                 # Progress/profile screen
│   │   ├── achievements.tsx             # Achievements screen
│   │   ├── leaderboard.tsx              # Leaderboard screen
│   │   ├── certificates.tsx             # Certificates screen
│   │   └── _layout.tsx                  # Tab layout
│   ├── lesson.tsx                       # Lesson viewer with TTS
│   ├── activity.tsx                     # Activity player
│   ├── test.tsx                         # Quiz/test screen
│   ├── test-results.tsx                 # Test results display
│   ├── final-exam.tsx                   # Final exam
│   ├── final-exam-results.tsx           # Final exam results
│   ├── course-detail.tsx                # Course overview
│   ├── settings.tsx                     # Settings screen
│   └── _layout.tsx                      # Root layout with providers
├── components/
│   ├── code-editor.tsx                  # Interactive code editor
│   ├── network-simulator.tsx            # Network topology simulator
│   ├── security-scenario.tsx            # Security scenario player
│   ├── markdown-lesson-viewer.tsx       # Markdown renderer with controls
│   ├── navigation-header.tsx            # Navigation header with breadcrumbs
│   ├── safe-area-wrapper.tsx            # Safe area wrapper
│   ├── screen-container.tsx             # SafeArea wrapper
│   ├── streak-display.tsx               # Streak display component
│   ├── certificate-view.tsx             # Certificate display
│   ├── video-player.tsx                 # Video lesson player
│   └── ui/
│       └── icon-symbol.tsx              # Icon mapping
├── hooks/
│   ├── use-progress.ts                  # Progress tracking
│   ├── use-text-to-speech-fixed.ts      # Text-to-speech with controls
│   ├── use-gamification.ts              # Gamification features
│   ├── use-push-notifications.ts        # Push notifications
│   ├── use-offline-cache.ts             # Offline caching
│   ├── use-colors.ts                    # Theme colors
│   └── use-color-scheme.ts              # Dark/light mode
├── lib/
│   ├── restructured-courses.ts          # 22 courses with lessons
│   ├── full-lesson-content.ts           # Comprehensive lesson content
│   ├── final-exam-data.ts               # 100+ exam questions
│   ├── spaced-repetition.ts             # SM-2 algorithm
│   ├── analytics.ts                     # Learning analytics
│   ├── pdf-export.ts                    # PDF report generation
│   ├── types.ts                         # TypeScript definitions
│   └── test-utils.ts                    # Test shuffling utilities
├── assets/
│   ├── images/                          # App icons and splash
│   └── lessons/                         # Markdown lesson files (88 total)
├── app.config.ts                        # Expo configuration
├── tailwind.config.js                   # Tailwind CSS config
├── theme.config.js                      # Theme tokens
└── package.json

🚀 Installation & Setup

Prerequisites

Node.js 18+ and pnpm
Expo CLI: npm install -g expo-cli
iOS Simulator (macOS) or Android Emulator
Expo Go app on physical device (optional)

Installation

# Clone the repository
gh repo clone CodingJeffRoblox/it-training-app
cd it-training-app

# Install dependencies
pnpm install

# Start development server
pnpm dev

Running on Devices

iOS Simulator:

pnpm ios

Android Emulator:

pnpm android

Physical Device (Expo Go):

Install Expo Go from App Store or Play Store
Scan QR code from terminal output
App will open in Expo Go

💡 Key Features Implementation

Text-to-Speech with Controls

All lessons include a "Read Aloud" button powered by expo-speech:

import { useTextToSpeech } from '@/hooks/use-text-to-speech-fixed';

const { speak, pause, resume, stop, isSpeaking } = useTextToSpeech();

// Speak lesson content
await speak(lessonText);

// Control playback
pause();
resume();
stop();

Interactive Code Editor

Write and execute code with real-time feedback:

import { CodeEditor } from '@/components/code-editor';

<CodeEditor
  language="python"
  challenge={{
    title: 'Python Basics',
    description: 'Write a function to calculate factorial',
    expectedOutput: 'def factorial(n):',
    hints: ['Use recursion', 'Handle base case'],
  }}
  onSuccess={() => markActivityComplete()}
/>

Network Simulator

Design and test network topologies:

import { NetworkSimulator } from '@/components/network-simulator';

<NetworkSimulator
  scenario={{
    title: 'Build a Network',
    description: 'Connect all devices',
    objective: 'Create a working network',
    nodes: [/* network nodes */],
  }}
  onComplete={() => markActivityComplete()}
/>

Security Scenarios

Interactive threat response training:

import { SecurityScenario } from '@/components/security-scenario';

<SecurityScenario
  title="Phishing Attack Response"
  description="Respond to a phishing email"
  steps={[/* scenario steps */]}
  onComplete={() => markActivityComplete()}
/>

Progress Persistence

User progress is stored locally using AsyncStorage:

import { useProgress } from '@/hooks/use-progress';

const { completeLesson, getProgress, clearAllProgress } = useProgress();

// Mark lesson as complete
await completeLesson(courseId, lessonId);

// Get user progress
const progress = await getProgress();

// Clear all data
await clearAllProgress();

Spaced Repetition

SM-2 algorithm optimizes quiz scheduling:

import { useSpacedRepetition } from '@/lib/spaced-repetition';

const { getNextReviewDate, recordAnswer } = useSpacedRepetition();

// Record user answer
recordAnswer(questionId, isCorrect, difficulty);

// Get next review date
const nextDate = getNextReviewDate(questionId);

📊 Building for Production

iOS

eas build --platform ios

Android

eas build --platform android

Both Platforms

eas build

🧪 Testing

Run tests with:

pnpm test

The app includes:

Shuffled test questions on each attempt
85% pass requirement enforcement
Progress persistence validation
Text-to-speech functionality testing
Offline caching validation

📈 Performance Considerations

Lazy loading of course content
Efficient list rendering with FlatList
Optimized image assets (compressed icons)
Minimal re-renders with proper React hooks usage
Offline caching with 30-day expiry
Markdown rendering optimization

♿ Accessibility

High contrast color schemes
Large touch targets (minimum 44pt)
Text-to-speech for all content
Clear navigation hierarchy
Keyboard navigation support
Adjustable font sizes (12-24px)
Dark mode support

🌐 Platform Support

iOS: 13+
Android: 8+
Web: Supported via Expo Web

📝 License

This project is proprietary and confidential.

🆘 Support

For issues or questions, please refer to:

Expo Documentation
React Native Documentation
GitHub Issues: https://github.com/CodingJeffRoblox/it-training-app/issues

🔗 Repository

GitHub: https://github.com/CodingJeffRoblox/it-training-app

🗺 Roadmap

📋 Changelog

Version 1.0.0 (Current - May 2026)

Major Features:

22 comprehensive IT courses (7 Beginner, 8 Intermediate, 7 Advanced)
88 lessons with 6+ paragraphs each
Interactive hands-on activities (code editor, network simulator, security scenarios)
Comprehensive testing system with 85% pass gate
100+ question final exam with certificate generation
Gamification features (10 achievements, leaderboard, study streaks)
Study groups with note sharing and collaboration
Spaced repetition learning algorithm (SM-2)
Offline mode with 30-day caching
Push notifications for reminders and achievements
Progress analytics with learning velocity tracking
PDF progress report export
Text-to-speech with play/pause/resume controls
Markdown lesson rendering with syntax highlighting
Dark mode support
Responsive mobile design

Technical Improvements:

Navigation header with breadcrumbs and back buttons
Safe area handling for all screens
Optimized performance and caching
Comprehensive error handling
Type-safe TypeScript implementation

Version: 1.0.0
Last Updated: May 2026
Built with: React Native 0.81, Expo SDK 54, TypeScript 5.9
Status: Production Ready ✅

IT Master: Pro Training - Learn IT, Master Your Career 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
app		app
assets		assets
components		components
constants		constants
drizzle		drizzle
hooks		hooks
lib		lib
scripts		scripts
server		server
shared		shared
tests		tests
.gitignore		.gitignore
.gitkeep		.gitkeep
.npmrc		.npmrc
.watchmanconfig		.watchmanconfig
README.md		README.md
app.config.ts		app.config.ts
babel.config.js		babel.config.js
design.md		design.md
drizzle.config.ts		drizzle.config.ts
eslint.config.js		eslint.config.js
global.css		global.css
metro.config.js		metro.config.js
nativewind-env.d.ts		nativewind-env.d.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tailwind.config.js		tailwind.config.js
theme.config.d.ts		theme.config.d.ts
theme.config.js		theme.config.js
todo.md		todo.md
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

IT Master: Professional IT Training App

✨ Features

📚 22 Comprehensive Courses

📖 Interactive Lessons

🎯 Real Hands-On Activities

✅ Comprehensive Testing System

🎓 Certificates & Progress Tracking

🎮 Gamification Features

📱 Mobile Optimizations

🎥 Video Lessons

🔔 Push Notifications

👥 Study Groups & Collaboration

🧠 Advanced Learning Features

⚙️ Settings & Customization

🛠 Technical Stack

📁 Project Structure

🚀 Installation & Setup

Prerequisites

Installation

Running on Devices

💡 Key Features Implementation

Text-to-Speech with Controls

Interactive Code Editor

Network Simulator

Security Scenarios

Progress Persistence

Spaced Repetition

📊 Building for Production

iOS

Android

Both Platforms

🧪 Testing

📈 Performance Considerations

♿ Accessibility

🌐 Platform Support

📝 License

🆘 Support

🔗 Repository

🗺 Roadmap

📋 Changelog

Version 1.0.0 (Current - May 2026)

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages