BioNXA Learning Platform

Interactive learning platform for bioinformatics, biotechnology, and AI-driven computational biology

Live Site · Features · Architecture · Getting Started · Deployment

---

Overview

BioNXA is a bilingual (English/Arabic) learning platform that makes bioinformatics accessible to researchers, students, and professionals. Users authenticate via social login or email, follow guided tutorials, track progress, earn achievements, and experiment in an interactive code playground.

Production URL: https://bionxa.com

---

Features

Authentication & User Management

• 5 OAuth Providers: Google, GitHub, LinkedIn, X (Twitter), ORCID
• Email/Password: Via Supabase Auth
• Dual Auth Support: NextAuth.js for OAuth + Supabase for email auth
• Smart Navbar: Adapts to show avatar/dashboard or sign-in based on auth state
• Profile Import: Pulls user data from OAuth providers on first sign-in

Learning System

• 13 Interactive Tutorials spanning 4 difficulty levels:

  Beginner (4):

  • Introduction to Bioinformatics (30 min, 100 XP)
  • Python for Bioinformatics (45 min, 150 XP)
  • Linux Command Line for Biologists (40 min, 150 XP)
  • DNA Sequence Analysis Fundamentals (50 min, 175 XP)

  Intermediate (6):

  • Genomic Characterization of UPEC (75 min, 250 XP)
  • MLST Typing Deep Dive (90 min, 250 XP)
  • AMR Detection Masterclass (120 min, 300 XP)
  • RNA-Seq Analysis Pipeline (75 min, 250 XP)
  • Genome Assembly Fundamentals (70 min, 250 XP)
  • Phylogenetics & Evolutionary Analysis (65 min, 250 XP)

  Advanced (2):

  • Metagenomics & Microbiome Analysis (90 min, 350 XP)
  • Machine Learning in Genomics (90 min, 350 XP)

  Expert (1):

  • Nextflow Genomics Master (via dynamic routing)

• Categories: Fundamentals, Programming, Genomics, Transcriptomics, Evolution, Metagenomics, AI & Genomics

• Total: 770+ minutes of content, 2,825+ XP available

• TutorialViewer: Sections with text, code blocks, interactive content, and quizzes

• Progress Tracking: Auto-saves to Supabase (or localStorage fallback)

• XP & Achievements: Earn XP on completion, auto-awarded achievements for milestones

• Tutorials Page: Search, filter by difficulty/category, stats summary

Interactive Playground

• Monaco Editor: Full-featured code editor (same engine as VS Code)
• Nextflow Workflows: Pre-built example workflows for experimentation
• AI Assistant: Context-aware help panel (mock, ready for OpenAI integration)

Personalization

• Skill Level Selector: Beginner/Intermediate/Advanced/Expert onboarding
• Settings Persistence: Skill level and preferences saved to Supabase
• Personalized Dashboard: Stats, progress, achievements, certificates

Internationalization

• English & Arabic with full RTL support
• next-intl: Locale-based routing (/en/..., /ar/...)

Pages

Page	Path	Description
Home	/	Hero, features, CTA
Tutorials	/tutorials	Browse & filter tutorials
Playground	/playground	Interactive code editor
Resources	/resources	External learning links
Dashboard	/dashboard	User stats & progress (auth required)
Settings	/settings	Skill level & preferences
About	/about	Platform story & team
Pricing	/pricing	Plans & tiers
Pipeline	/pipeline	Bioinformatics pipeline info
Auth	/auth	Sign in / Sign up
Onboarding	/onboarding	Skill selection for new users

---

Architecture

Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS 3
Animation	Framer Motion
Auth (OAuth)	NextAuth.js 4
Auth (Email)	Supabase Auth
Database	Supabase (PostgreSQL)
i18n	next-intl
Code Editor	Monaco Editor
Markdown	react-markdown + remark-gfm
Icons	Lucide React
Deployment	Vercel
Domain	bionxa.com

Project Structure

bionxa-learning-platform/
├── app/
│   ├── [locale]/           # Locale-based pages (en, ar)
│   │   ├── about/
│   │   ├── auth/           # Sign in/up + OAuth redirect
│   │   ├── dashboard/      # User dashboard (auth required)
│   │   ├── onboarding/     # Skill selector + profile import
│   │   ├── playground/     # Monaco code editor
│   │   ├── settings/       # User preferences
│   │   ├── tutorials/      # Tutorial pages + dynamic routes
│   │   └── ...             # pricing, resources, pipeline, etc.
│   ├── api/
│   │   ├── achievements/   # GET/POST achievements
│   │   ├── progress/       # GET/POST tutorial progress
│   │   ├── profile/        # Import & save user profiles
│   │   └── settings/       # GET/POST user settings
│   ├── auth/callback/      # Supabase auth callback
│   ├── globals.css
│   ├── layout.tsx          # Root layout
│   └── page.tsx            # Root redirect to /en
├── components/
│   ├── animations/         # DNA helix, particles, neural net
│   ├── dashboard/          # Personalized dashboard
│   ├── layout/             # Navbar, Footer
│   ├── onboarding/         # Skill selector, creative components
│   ├── tutorials/          # TutorialViewer
│   ├── ui/                 # Reusable UI components
│   ├── Avatar.tsx          # Reusable avatar with next/image
│   ├── WebVitals.tsx       # Core Web Vitals reporting
│   └── GoogleAnalytics.tsx # GA4 integration
├── lib/
│   ├── auth.ts             # NextAuth configuration
│   ├── supabase.ts         # Supabase client + helpers
│   ├── useAuth.ts          # Unified auth hook (NextAuth + Supabase)
│   ├── userProfile.ts      # localStorage profile utilities
│   ├── api-utils.ts        # Shared API helpers (auth, responses, caching)
│   ├── validations.ts      # Zod schemas for API validation
│   ├── jsonld.ts           # JSON-LD structured data generators
│   ├── tutorials/          # Tutorial content definitions
│   └── types/              # TypeScript interfaces
├── i18n/                   # Internationalization config
├── messages/               # en.json, ar.json translations
├── supabase/
│   ├── schema.sql          # App database schema
│   └── nextauth-schema.sql # NextAuth tables schema
├── __tests__/              # Unit tests (Jest)
├── e2e/                    # End-to-end tests (Playwright)
├── public/                 # Static assets
└── [config files]          # next.config, tailwind, tsconfig, etc.

API Endpoints

Method	Endpoint	Auth	Description
GET	/api/health	Public	Health check (version, uptime, tutorial count)
GET	/api/progress	Required	Fetch user's tutorial progress
POST	/api/progress	Required	Save/update tutorial progress
GET	/api/achievements	Required	Fetch user's achievements
POST	/api/achievements	Required	Award new achievement
GET	/api/settings	Required	Fetch user settings
POST	/api/settings	Required	Update user settings
POST	/api/profile/import	Required	Import profile from OAuth provider
POST	/api/profile/save	Required	Save user profile to Supabase

Database Schema (Supabase)

Key tables:

• user_profiles — User info, avatar, bio, metadata (skill level, preferences)
• course_progress — Tutorial completion, scores, time spent
• achievements — Earned badges and milestones
• certificates — Course completion certificates
• next_auth.* — NextAuth accounts, sessions, users, verification tokens

---

Getting Started

Prerequisites

• Node.js 18+
• npm 9+
• A Supabase project (free tier works)
• OAuth credentials (Google, GitHub, etc.) — optional

Installation

# Clone the repository
git clone https://github.com/mf2022-dev/BioNXA.git
cd BioNXA

# Install dependencies
npm install

# Copy environment template
cp .env.example .env.local

# Edit .env.local with your credentials
# At minimum, set:
#   NEXTAUTH_URL=http://localhost:3000
#   NEXTAUTH_SECRET=<random-string>
#   NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
#   NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>

# Run the development server
npm run dev

Open http://localhost:3000 to see the platform.

Database Setup

Run the SQL files in your Supabase SQL Editor:

1. supabase/nextauth-schema.sql — Creates NextAuth tables
2. supabase/schema.sql — Creates app tables (profiles, progress, achievements, certificates)

---

Development

Scripts

npm run dev          # Start development server
npm run build        # Production build
npm run start        # Start production server
npm run lint         # Run ESLint
npm run lint:fix     # Auto-fix lint issues
npm run format       # Format with Prettier
npm run type-check   # TypeScript type checking
npm run test         # Run unit tests (watch mode)
npm run test:ci      # Run tests for CI
npm run test:e2e     # Run Playwright E2E tests
npm run validate     # Lint + type-check + tests

Code Quality Tools

• ESLint — Linting with Next.js and TypeScript rules
• Prettier — Code formatting
• Husky — Git hooks for pre-commit checks
• lint-staged — Only lint staged files
• commitlint — Conventional commit messages

---

Deployment

Vercel (Current)

The platform auto-deploys from the master branch via Vercel:

1. Push to master triggers a build
2. Vercel builds with next build
3. Deploys to bionxa.com

Environment variables are managed in Vercel Dashboard (Settings > Environment Variables).

---

Roadmap

v1.0.0

• 5 OAuth providers + email auth
• 13 full tutorials across 4 difficulty levels (770+ minutes)
• Progress tracking & achievements (localStorage + Supabase)
• Interactive code playground (Monaco)
• Bilingual support (EN/AR with RTL)
• Smart auth-aware navigation
• Settings persistence with language switcher
• Elegant OAuth icon grid on auth page
• Tutorial progress auto-save (sections, quizzes, time)
• 2-step onboarding flow (profile + skill level)
• Testimonials & trust section on homepage
• Enhanced SEO with OG/Twitter cards
• 60+ i18n keys for dashboard, settings, onboarding
• Mobile-responsive TutorialViewer with sidebar toggle
• Gamification: XP, levels, streaks, 8 achievements

v1.2.0

• Global search modal (Cmd+K / Ctrl+K) with fuzzy matching
• Dynamic sitemap.xml with 48 URLs (13 tutorials × 2 locales + pages)
• Dynamic robots.txt pointing to bionxa.com
• Branded 404 page with bioinformatics theme
• Error boundaries (locale + global)
• Simulation disclaimers on Playground and Pipeline
• Fix: Achievements RLS vulnerability (INSERT policy)
• Fix: Sitemap domain (was bionxa.vercel.app)

v1.3.0

• Zod validation on all POST API routes (progress, settings, profile/save)
• Shared lib/api-utils.ts — consolidated getSupabase, getUserId, response helpers
• Shared lib/validations.ts — reusable Zod schemas with validateBody utility
• Replaced all <img> tags with next/image via reusable Avatar component
• next.config.js remote image patterns for 7 OAuth/CDN domains
• Security headers in vercel.json: HSTS, Referrer-Policy, Permissions-Policy, CSP
• API response caching with Cache-Control and stale-while-revalidate
• Loading skeletons (loading.tsx) for dashboard, tutorials, playground, settings, resources
• Dashboard performance: useMemo for computed values, useCallback to useMemo migration
• JSON-LD structured data (Organization, WebSite, FAQPage, Course, BreadcrumbList)
• Web Vitals reporting to Google Analytics and dev console
• PWA support: manifest.json, meta tags, branded icons (192px, 512px)
• OG image generation (1200x630)
• GitHub Actions CI/CD pipeline (lint, type-check, build, test)
• Expanded unit tests (22 validation tests) and E2E tests (Playwright)
• Jest config fix: excluded Playwright E2E tests from Jest runner
• Fix: currentSection Zod type to accept both string and number

v1.3.1 — Bug Fixes & Stability

• Fix: Wrong Link import in tutorials/page.tsx (was using next/link instead of i18n Link)
• Fix: useCallback placed before useEffect dependency issue
• Fix: Static XP value display (now shows dynamic XP from tutorial data)
• Fix: Unresolved Promise leak in dashboard data fetching
• Fix: Unclean setTimeout in onboarding and settings pages
• Fix: Missing waitlist form submission handler
• Fix: Missing aria-label on auth page OAuth buttons
• Fix: Missing aria-label on dashboard tab buttons
• Fix: Missing aria-label on Navbar mobile menu button
• Added 7 missing loading.tsx skeleton files for all route segments
• i18n keys fully synced — 210 keys EN/AR with zero mismatches

v1.3.2 — Deep Maintenance (Current Release)

• TypeScript any elimination — removed all 37 any type usages across 16 files with proper types (Error | null, Record<string, unknown>, specific interfaces)
• Empty catch {} blocks — added descriptive error logging to all ~20 previously empty catch blocks
• Timer / Memory leak fixes — cleaned up setTimeout and setInterval in 5 components:
  • SearchModal.tsx — proper clearTimeout on debounced input
  • ScrollReveal.tsx — IntersectionObserver disconnect + timeout cleanup in useEffect return
  • CodeSnippetChallenge.tsx — timer interval cleanup on unmount
  • AIAssistant.tsx — typing indicator timeout cleanup
  • Pipeline page — command execution timeout cleanup
• Pipeline page i18n/RTL overhaul — 17 new EN/AR keys, full useTranslations('pipeline') integration, RTL flex-row-reverse layouts
• Accessibility improvements — added aria-label attributes to interactive elements in AIAssistant, AICodeAnalyzer, Pipeline, Auth error, Error pages, Playground, Home, and Dashboard
• i18n keys fully synced — 227 keys EN/AR (up from 210)
• All 23 tests passing
• Build: zero errors, zero warnings
• 35 files modified across the codebase

v1.4.0 (Next Phase)

• AI-powered assistant (OpenAI integration)
• Certificate PDF generation
• Public user profiles
• Email notifications (welcome, streaks)
• Leaderboard & social features

v2.0.0 (Future)

• Payment integration (Stripe / PayTabs)
• Premium content tiers
• Team/classroom features
• Advanced analytics dashboard
• Mobile app (React Native)

---

Contributing

See CONTRIBUTING.md for guidelines.

Code of Conduct

See CODE_OF_CONDUCT.md.

License

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

---

Built with care for the bioinformatics community
bionxa.com