Gamified STEM Learning Platform

An interactive Progressive Web App (PWA) designed for students in rural India (grades 6–12) to improve STEM learning through engaging offline-friendly features, multilingual support (English + Odia), and gamified content.

🌟 Key Features

🎯 Educational Focus

Curriculum-aligned content for grades 6-12
STEM subjects: Science, Technology, Engineering, Mathematics
Bilingual support: English and Odia languages
Offline-first design for areas with limited connectivity
Progressive difficulty with adaptive learning paths

🎮 Gamification

Points & Levels: XP system with progressive unlocks
Badges & Achievements: Earn rewards for consistent learning
Daily Challenges: Engaging STEM problems
Streak Counter: Motivate daily learning habits
Leaderboards: Friendly competition with peers

📱 Technical Features

Progressive Web App (PWA): Installable, app-like experience
Offline Capability: Content caching with IndexedDB
Responsive Design: Works on phones, tablets, and desktops
Modern Tech Stack: Next.js 15, TypeScript, Tailwind CSS
Smooth Animations: Framer Motion for engaging interactions

🚀 Quick Start

Prerequisites

Node.js 18+
npm, yarn, or pnpm

Installation

Clone the repository

git clone <repository-url>
cd gamified-stem-learning-platform

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Run the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser Visit http://localhost:3000

📁 Project Structure

src/
├── app/                    # Next.js App Router
├── components/             # React Components
│   ├── ui/                # Basic UI components
│   ├── gamification/      # Gamification components
│   └── learning/          # Learning-specific components
├── lib/                   # Utilities and configurations
│   ├── db/               # Database (IndexedDB) setup
│   ├── types/            # TypeScript type definitions
│   └── utils/            # Utility functions
├── data/                  # Static data and content
│   ├── content/          # Educational content
│   └── locales/          # Translation files
├── hooks/                 # Custom React hooks
├── contexts/              # React context providers
└── stores/                # State management

public/
├── icons/                 # PWA icons and app icons
├── sounds/                # Audio files for feedback
└── images/                # Static images and illustrations

🛠️ Technology Stack

Frontend

Framework: Next.js 15 with App Router
Language: TypeScript
Styling: Tailwind CSS with custom educational theme
Animations: Framer Motion
Icons: Lucide React
State Management: Zustand

PWA & Offline

PWA: @ducanh2912/next-pwa
Database: Dexie (IndexedDB wrapper)
Caching: Service Worker with Workbox

Internationalization

i18n: next-i18next
Languages: English, Odia (ଓଡ଼ିଆ)

Development

Linting: ESLint with Next.js config
Type Checking: TypeScript strict mode
Package Manager: npm/yarn/pnpm

🎨 Design System

Colors

Primary: Blue tones for learning and trust
Secondary: Green tones for success and growth
Accent: Orange tones for highlights and energy
Educational: Carefully chosen for accessibility

Typography

English: Inter font family
Odia: Noto Sans Oriya for proper script rendering
Responsive: Fluid typography that scales with screen size

Components

Accessible: WCAG 2.1 AA compliant
Mobile-first: Designed for touch interactions
Consistent: Unified design language throughout

🌐 Internationalization

The platform supports bilingual education:

English: Primary interface language
Odia (ଓଡ଼ିଆ): Local language support for rural Indian students
Content: All educational materials available in both languages
UI: Complete interface translation
RTL Ready: Prepared for right-to-left language support

💾 Offline Functionality

Content Caching

Topics: Educational content cached locally
Media: Images, videos, and audio files
Assessments: Quizzes and interactive elements
Progress: User progress stored locally and synced

Sync Strategy

Background Sync: Automatic when connection available
Conflict Resolution: Smart merge of offline/online changes
Storage Management: Automatic cleanup of old content
Bandwidth Awareness: Optimized for low-bandwidth scenarios

🎯 Learning Management

Content Organization

Subjects: Science, Technology, Engineering, Mathematics
Grades: 6, 7, 8, 9, 10, 11, 12
Difficulty Levels: Beginner, Intermediate, Advanced
Learning Paths: Guided sequences of topics

Progress Tracking

Completion Status: Not started, In progress, Completed, Mastered
Time Tracking: Time spent on each topic
Assessment Scores: Performance tracking
Learning Analytics: Insights into learning patterns

🏆 Gamification System

Experience Points (XP)

Activities: Earned through learning activities
Levels: Progressive unlocking based on XP
Bonuses: Extra points for streaks and achievements

Badges

Categories: Learning, Streak, Challenge, Social, Milestone
Rarity: Common, Uncommon, Rare, Epic, Legendary
Requirements: Various criteria for earning

Daily Challenges

Fresh Content: New challenges every day
Subject Rotation: Balanced across STEM subjects
Difficulty Adaptation: Based on user performance

🔧 Configuration

Environment Variables

Create a .env.local file:

# App Configuration
NEXT_PUBLIC_APP_NAME="STEM Learning Platform"
NEXT_PUBLIC_APP_VERSION="1.0.0"

# API Configuration (when backend is added)
# NEXT_PUBLIC_API_URL=https://your-api-url.com
# API_SECRET_KEY=your-secret-key

# PWA Configuration
NEXT_PUBLIC_PWA_NAME="STEM Learn"
NEXT_PUBLIC_PWA_SHORT_NAME="STEM Learn"
NEXT_PUBLIC_PWA_DESCRIPTION="Interactive STEM learning for rural students"

PWA Manifest

The PWA manifest is configured in public/manifest.json with:

App icons for various sizes
Splash screens for different devices
Offline capability declarations
Shortcuts for quick access

📚 Content Management

Adding New Content

Create topic files in src/data/content/
Follow TypeScript interfaces defined in src/lib/types/content.ts
Include bilingual content (English + Odia)
Add media resources to public/images/
Update learning paths as needed

Content Structure

// Example topic structure
const topic: Topic = {
  id: 'unique-topic-id',
  title: 'English Title',
  titleOdia: 'ଓଡ଼ିଆ ଶିରୋନାମ',
  subject: 'mathematics',
  grade: '8',
  difficulty: 'intermediate',
  // ... additional properties
}

🧪 Testing

Running Tests

# Unit tests
npm test

# E2E tests
npm run test:e2e

# Type checking
npm run type-check

# Linting
npm run lint

PWA Testing

Lighthouse: Run PWA audit in Chrome DevTools
Offline Testing: Disable network in DevTools
Installation: Test "Add to Home Screen" functionality
Performance: Monitor Core Web Vitals

🚀 Deployment

Build for Production

npm run build
npm start

Platform Options

Vercel (Recommended)

npm install -g vercel
vercel

Netlify

npm run build
# Upload 'out' folder to Netlify

Self-hosted

npm run build
npm start
# Or serve the 'out' folder with any static server

PWA Considerations

HTTPS Required: PWAs must be served over HTTPS
Service Worker: Automatically generated and cached
App Store: Can be submitted to app stores via PWABuilder

🤝 Contributing

Development Workflow

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

Code Standards

TypeScript: Strict mode enabled
ESLint: Follow Next.js recommended rules
Prettier: Code formatting (if configured)
Commit Messages: Use conventional commit format

Adding Translations

Update src/data/locales/en/common.json
Update src/data/locales/or/common.json
Test with language switcher
Verify text rendering in both languages

📄 License

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

🙏 Acknowledgments

Rural Education Initiative: Inspiration for offline-first design
Odia Language Community: Translation and cultural guidance
Open Source Contributors: Libraries and tools that make this possible
Students and Teachers: Feedback and testing from the target audience

📞 Support

For questions, issues, or contributions:

GitHub Issues: Technical bugs and feature requests
Discussions: General questions and community support
Email: [contact@yourdomain.com] for direct support

Made with ❤️ for rural students in India

Empowering STEM education through technology, accessibility, and gamification.

gamified-stem-learning-webapp

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next-i18next.config.js		next-i18next.config.js
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Gamified STEM Learning Platform

🌟 Key Features

🎯 Educational Focus

🎮 Gamification

📱 Technical Features

🚀 Quick Start

Prerequisites

Installation

📁 Project Structure

🛠️ Technology Stack

Frontend

PWA & Offline

Internationalization

Development

🎨 Design System

Colors

Typography

Components

🌐 Internationalization

💾 Offline Functionality

Content Caching

Sync Strategy

🎯 Learning Management

Content Organization

Progress Tracking

🏆 Gamification System

Experience Points (XP)

Badges

Daily Challenges

🔧 Configuration

Environment Variables

PWA Manifest

📚 Content Management

Adding New Content

Content Structure

🧪 Testing

Running Tests

PWA Testing

🚀 Deployment

Build for Production

Platform Options

Vercel (Recommended)

Netlify

Self-hosted

PWA Considerations

🤝 Contributing

Development Workflow

Code Standards

Adding Translations

📄 License

🙏 Acknowledgments

📞 Support

gamified-stem-learning-webapp

gamified-stem-learning-webapp

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages