Skip to content

yousef469/Engineeruim

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

848 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 Engineerium - The Ultimate Interactive STEM Education Platform

Master engineering through interactive 3D models, AI-powered tutoring, gamified learning, and real-world projects

Live Demo React Supabase Gemini AI


📚 Table of Contents


🌟 Platform Overview

Engineerium is a comprehensive STEM education platform that combines:

  • 5 Engineering Disciplines with 100+ lessons
  • AI-Powered Tutoring (EnGo - powered by Google Gemini 2.0 Flash)
  • Interactive 3D Models with JARVIS explode mode
  • Real-time Progress Tracking with XP and leveling
  • Community Features for collaborative learning
  • Career Projects for portfolio building
  • 25+ Engineering Calculators and 200+ formulas

🎯 Project Vision & Impact

The "Why": The Reason for Creation

Engineerium was created to bridge the massive gap between dense theoretical math/physics and real-world engineering. Traditional textbooks are static; Engineerium was built to make engineering "alive," allowing students to interact with the same formulas (like the Tsiolkovsky Rocket Equation) used at NASA and SpaceX in a visual, low-risk environment.

📈 Evolution and Improvements

The project has evolved from a simple model viewer into a comprehensive career-ready curriculum:

  • Foundation Depth: Curriculum sections like Unit 0: Foundations include MIT-quality content covering Vectors, Newton’s Laws, and Thermodynamics.
  • Technical Fidelity: 3D models moved from simple shapes to high-fidelity components (like the Falcon 9 Octaweb and Merlin Engines) with dedicated "JARVIS" modes that analyze parts in real-time.
  • AI Integration: The tutoring system moved from simple chat to EnGo Tutor, which is context-aware—meaning it knows exactly which lesson you are on and can explain complex derivations step-by-step.

🎓 How It Transforms Student Learning

  1. Visual Intuition: Instead of just reading "Thrust = Force," students see the vectors acting on a 3D car or rocket. The Explode View lets them see the "guts" of an engine, building spatial awareness.
  2. Instant Feedback: Every lesson contains a 5-question quiz with immediate explanations. This "micro-learning" prevents knowledge gaps from forming.
  3. Variable Complexity: It starts with "Beginner Units" (Foundations) and scales all the way to Capstone Projects, allowing a student to grow from a hobbyist to a career-ready engineer.
  4. The EnGo Safety Net: If a student is stuck on a formula like F_net = √(F_net,x² + F_net,y²), they can ask the AI tutor to "Explain this like I'm 10" or "Show me the advanced derivation."

✨ Complete Feature List

🎓 Learning System

Feature Description
5 Learning Tracks Rockets, Planes, Cars, Electronics, Civil Engineering
100+ Lessons Comprehensive curriculum from basics to advanced
Game-Style Maps Visual progression with unlockable content
Interactive Quizzes End-of-lesson assessments with instant feedback
Mini Quizzes Quick knowledge checks throughout lessons
Continue Learning Smart resume from where you left off
Lesson Navigation Breadcrumbs and prev/next navigation
Enhanced Content Rich media, diagrams, and interactive elements

🤖 AI Features (EnGo Tutor)

Feature Description
Floating AI Helper Accessible from any page
Context-Aware Knows current lesson and subject
Quick Actions Explain Concept, Help with Math, Draw Diagram, Real Examples
Homework Solver Step-by-step solutions for engineering problems
JARVIS Mode AI-powered 3D model analysis
Project Insights AI recommendations for career projects

🎮 Gamification

Feature Description
XP System Earn XP for completing lessons (100-150 XP based on quiz score)
Leveling 1000 XP = 1 Level
Achievements 20+ unlockable badges
Streak System Daily learning streaks with fire counter
Daily Challenges New engineering challenges every day
Weekly Challenges Larger challenges with bigger rewards
Leaderboard Global rankings by XP
Achievement Notifications Real-time popup notifications

🔧 Engineering Toolbox

Feature Description
25+ Calculators Specialized engineering calculators
200+ Formulas Comprehensive formula library across 9 categories
20 Project Templates Ready-to-build engineering projects
Interactive Diagrams Car and aircraft component diagrams
3D Model Viewer Rotate, zoom, explode mode
Circuit Lab Interactive circuit simulation

👥 Community

Feature Description
Q&A Forum Ask questions and get answers
Project Showcase Share your engineering projects
Voting System Upvote helpful content
Comments Discuss and collaborate
Subject Filters Filter by engineering discipline
Search Find relevant discussions

� UUser Features

Feature Description
Profile Page Comprehensive user dashboard
Progress Tracking Real-time across all modules
Certificates Generate completion certificates
Onboarding Flow Guided introduction for new users
Language Selector 6 languages supported
Global Search Search across all content

📖 Learning Tracks (5 Disciplines)

🚀 Rockets (40+ Lessons)

Complete aerospace engineering curriculum

Section Topics Lessons
Section 0: Foundations Basics, Newton's Laws, Thrust, ISP 8 lessons
Section 1: Propulsion Staging, Mass Ratios, Nozzles, Fuel Types 8 lessons
Section 2: Structures Materials, Stress Analysis, Heat Shields 6 lessons
Section 3: Avionics Guidance, Navigation, Control Systems 6 lessons
Section 4: Design Mission Planning, Trajectory Design 5 lessons
Section 5: Testing Ground Tests, Flight Tests, Certification 4 lessons
Section 6: Operations Launch Operations, Mission Control 4 lessons
Section 7: Capstone Design Your Own Rocket 3 lessons

Interactive Features:

  • 3D rocket models (Falcon 9, Saturn V, Space Shuttle, Falcon Heavy)
  • Rocket Equation Calculator (Tsiolkovsky)
  • Orbital Transfer Calculator (Hohmann transfers)
  • Delta-V calculations
  • Real-world mission examples

✈️ Planes (35+ Lessons)

Complete aeronautical engineering curriculum

Section Topics Lessons
Section 0: Foundations Aerodynamics, Lift, Drag, Airfoils 7 lessons
Section 1: Structures Wing Design, Fuselage, Materials 6 lessons
Section 2: Propulsion Jet Engines, Propellers, Turbofans 6 lessons
Section 3: Controls Flight Controls, Stability, Autopilot 6 lessons
Section 4: Maintenance Inspection, Repair, Safety 5 lessons
Section 5: Simulation Flight Simulation, Testing 5 lessons

Interactive Features:

  • 3D aircraft models (F-22, F-16, MiG-29)
  • Lift Calculator
  • Drag coefficient calculations
  • Interactive aircraft diagrams
  • Real-world aircraft specs

🚗 Cars (35+ Lessons)

Complete automotive engineering curriculum

Section Topics Lessons
Section 0: Foundations Basics, Forces, Friction, Braking 7 lessons
Section 1: Powertrain Engines, Transmissions, Drivetrains 7 lessons
Section 2: Dynamics Suspension, Steering, Handling 6 lessons
Section 3: Electronics ECU, Sensors, CAN Bus 6 lessons
Section 4: Safety Crash Testing, ADAS, Airbags 5 lessons

Interactive Features:

  • 3D car models (Porsche 911, BMW M4, Ford F-150)
  • Interactive car component diagrams
  • Performance calculators
  • Gear ratio calculations
  • Real-world vehicle specs

⚡ Electronics (30+ Lessons)

Complete electronics and robotics curriculum

Section Topics Lessons
Section 0: Foundations Circuits, Ohm's Law, Components 6 lessons
Section 1: Digital Logic Gates, Digital Systems 6 lessons
Section 2: Microcontrollers Arduino, Programming, I/O 6 lessons
Section 3: Sensors Types, Interfacing, Applications 6 lessons
Section 4: Communication Serial, I2C, SPI, Wireless 6 lessons

Interactive Features:

  • Circuit Lab simulation
  • Component diagrams
  • Code examples
  • Real-world project ideas

🏗️ Civil Engineering (25+ Lessons)

Complete civil engineering curriculum

Section Topics Lessons
Section 0: Foundations Engineering Basics, Materials 5 lessons
Section 1: Surveying Land Surveying, GPS, Mapping 5 lessons
Section 2: Materials Concrete, Steel, Composites 5 lessons
Section 3: Structural Beams, Columns, Load Analysis 5 lessons
Section 4: Water Hydraulics, Water Systems 5 lessons

Interactive Features:

  • Structural calculators
  • Material property tables
  • Load analysis tools
  • Real-world case studies

🔐 Authentication & Security

Authentication Methods

Method Description
Email/Password Traditional signup with email verification
Google OAuth One-click Google sign-in
Session Management Secure JWT tokens via Supabase

Security Features

Feature Description
Fingerprint Detection Device fingerprinting for fraud prevention
Rate Limiting API rate limiting to prevent abuse
Row Level Security Supabase RLS for data protection
Secure Storage Encrypted credential storage
HTTPS Only All traffic encrypted

Auth Context Features

// Available in useAuth() hook
- user (current user object)
- signIn(email, password)
- signUp(email, password, username)
- signInWithGoogle()
- signOut()
- loading state
- error handling

🗄️ Database & Backend

Supabase Tables

Table Purpose
profiles User profiles, avatars, usernames
progress Lesson completion, quiz scores
xp_transactions XP earning history
achievements Unlocked achievements
streaks Daily streak tracking
community_posts Forum posts
community_comments Post comments
community_votes Upvotes/downvotes
leaderboard Cached rankings

Database Features

  • Real-time Subscriptions: Live updates for leaderboard, community
  • Row Level Security: Users can only access their own data
  • Automatic Timestamps: created_at, updated_at
  • Foreign Key Constraints: Data integrity
  • Indexes: Optimized queries

Progress Context

// Available in useProgress() hook
- progress.completedLessons
- progress.quizScores
- progress.xp
- progress.level
- progress.streak
- progress.achievements
- completeLesson(lessonId, score)
- addXP(amount, reason)
- unlockAchievement(achievementId)

🤖 AI Features (EnGo Tutor)

Powered by Google Gemini 2.0 Flash

Floating AI Helper

  • Always Available: Floating button on every page
  • Context Aware: Knows current lesson, subject, user progress
  • Quick Actions:
    • 💡 Explain Concept
    • 🔢 Help with Math
    • 📊 Draw Diagram
    • 🌍 Real Examples

AI Capabilities

Feature Description
Lesson Explanations Detailed concept breakdowns
Math Help Step-by-step problem solving
Diagram Generation ASCII/text diagrams
Real Examples Industry applications
Homework Solver Complete problem solutions
Project Insights Career project recommendations

JARVIS Mode (3D Analysis)

  • Model Identification: AI identifies uploaded 3D models
  • Technical Specs: Auto-generates specifications
  • Historical Context: Background information
  • Color-Coded Info:
    • 🟣 Purple: Model name, engine specs
    • 🟠 Orange: Fuel system
    • 🔵 Cyan: Performance metrics
    • 🟢 Green: Mission capabilities
    • 🟡 Yellow: Cost breakdown

Gemini Service

// src/services/gemini.js
- askEnGo(question, context)
- analyzeModel(modelData)
- solveHomework(problem)
- generateInsights(projectData)

🎮 Gamification System

XP System

Action XP Earned
Complete Lesson 100 XP
Perfect Quiz Score +50 XP bonus
Daily Challenge 50 XP
Weekly Challenge 200 XP
Career Project 200 XP
Community Help 10-50 XP
First Lesson 25 XP bonus

Leveling System

  • 1000 XP = 1 Level
  • Level displayed on profile
  • Level badges unlock at milestones

Achievements (20+)

Achievement Requirement
🚀 First Launch Complete first lesson
🔥 On Fire 7-day streak
🏆 Rocket Master Complete all rocket lessons
✈️ Pilot License Complete all plane lessons
🚗 Gear Head Complete all car lessons
⚡ Circuit Breaker Complete all electronics lessons
🏗️ Master Builder Complete all civil lessons
🎯 Perfect Score 100% on any quiz
📚 Bookworm Complete 50 lessons
🌟 Rising Star Reach Level 10
💎 Diamond Reach Level 50
👑 Legend Reach Level 100

Streak System

  • Daily Tracking: Login and complete activity
  • Fire Counter: Visual streak display
  • Streak Freeze: Premium feature (coming soon)
  • Streak Rewards: Bonus XP for milestones

Leaderboard

  • Global Rankings: All users by XP
  • Weekly Rankings: Reset weekly
  • Subject Rankings: Per discipline
  • Real-time Updates: Live via Supabase subscriptions

🔧 Engineering Toolbox

25+ Engineering Calculators

Aerospace Calculators

Calculator Function
Rocket Equation Tsiolkovsky equation, delta-v
Orbital Transfer Hohmann transfers
Lift Calculator Aircraft lift force
Drag Calculator Drag coefficient
Thrust Calculator Engine thrust
ISP Calculator Specific impulse

Mechanical Calculators

Calculator Function
Stress Calculator Material stress analysis
Strain Calculator Deformation analysis
Torque Calculator Rotational force
Power Calculator Mechanical power
Gear Ratio Transmission ratios
Spring Calculator Spring constants

Electrical Calculators

Calculator Function
Ohm's Law V, I, R calculations
Power Calculator Electrical power
Resistor Calculator Series/parallel
Capacitor Calculator Capacitance
Inductor Calculator Inductance
RC Time Constant Circuit timing

Civil Calculators

Calculator Function
Beam Calculator Bending moments
Column Calculator Buckling analysis
Concrete Mix Mix design
Hydraulic Calculator Flow rates

200+ Formula Library

Categories (9)

  1. Mechanics - Forces, motion, energy
  2. Thermodynamics - Heat, work, entropy
  3. Fluid Dynamics - Flow, pressure, viscosity
  4. Electrical - Circuits, power, magnetism
  5. Structural - Stress, strain, loads
  6. Aerospace - Lift, drag, thrust
  7. Materials - Properties, strength
  8. Mathematics - Calculus, algebra
  9. Physics - Fundamental equations

Formula Features

  • LaTeX rendering
  • Variable definitions
  • Unit conversions
  • Example calculations
  • Copy to clipboard

20 Project Templates

Aerospace Projects

  • Rocket Engine Nozzle Design
  • Satellite Orbit Calculator
  • Aircraft Wing Design
  • Drone Flight Controller

Automotive Projects

  • Car Transmission Design
  • Suspension System
  • Electric Vehicle Range
  • Brake System Analysis

Electronics Projects

  • Arduino Robot Arm
  • Solar Panel System
  • Smart Home Controller
  • Wireless Sensor Network

Civil Projects

  • Bridge Load Analysis
  • Building Foundation
  • Water Distribution
  • Traffic Flow Simulation

👥 Community Platform

Features

Feature Description
Posts Create questions, share projects
Categories Questions, Projects, Designs, Discussions
Voting Upvote/downvote system
Comments Threaded discussions
Search Full-text search
Filters By subject, category, date
User Profiles View other users' contributions

Post Types

  • 🤔 Questions: Get help from community
  • 🚀 Projects: Share your builds
  • 📐 Designs: Share engineering designs
  • 💬 Discussions: General engineering talk

Moderation

  • Report system
  • Admin dashboard
  • Content guidelines
  • Spam prevention

🎨 UI/UX Design

Color Palette

Color Hex Usage
Primary (Cyan) #00D4FF Buttons, links, accents
Secondary (Purple) #8B5CF6 Gradients, highlights
Background #0F172A Main background
Background Light #1E293B Cards, modals
Text Primary #FFFFFF Main text
Text Secondary #94A3B8 Muted text
Success #10B981 Success states
Warning #F59E0B Warning states
Error #EF4444 Error states

Design System

  • Glass Morphism: Frosted glass effects
  • Gradients: Multi-color gradients
  • Shadows: Premium shadow effects
  • Animations: Smooth GSAP animations
  • Icons: Lucide React icons

Components

  • Cards: Rounded corners, shadows
  • Buttons: Gradient backgrounds, hover effects
  • Modals: Centered, backdrop blur
  • Forms: Floating labels, validation
  • Navigation: Sticky headers, breadcrumbs

Tailwind Configuration

// Custom theme extensions
- colors: primary, secondary, background variants
- fontFamily: Inter, system fonts
- animation: custom keyframes
- boxShadow: premium shadows
- backdropBlur: glass effects

📱 Mobile Optimization

Responsive Design

Breakpoint Width Optimizations
Mobile < 640px Single column, larger touch targets
Tablet 640-1024px Two columns, adjusted spacing
Desktop > 1024px Full layout, hover effects

Mobile Features

Feature Description
Bottom Navigation Fixed mobile nav bar
Touch Targets Minimum 44px tap areas
Safe Areas iOS notch/home indicator support
Swipe Gestures Navigation gestures
Pull to Refresh Content refresh
Optimized Images Lazy loading, WebP

Mobile Bottom Nav

  • Home
  • Learn
  • Tools
  • Community
  • Profile

PWA Support

  • Manifest: App-like installation
  • Icons: Multiple sizes (192px, 512px)
  • Offline: Service worker caching
  • Splash Screen: Custom loading

CSS Optimizations

/* Touch-friendly */
.touch-target { min-height: 44px; }

/* Safe areas */
padding-bottom: env(safe-area-inset-bottom);

/* Smooth scrolling */
-webkit-overflow-scrolling: touch;

/* Prevent zoom on inputs */
font-size: 16px;

💳 Payment System (Stripe)

Current Status: Sandbox Mode

Pricing Tiers

Tier Price Features
Free $0/month Basic lessons, limited AI
Pro $9.99/month All lessons, unlimited AI, no ads
Team $29.99/month Pro + team features, analytics

Stripe Integration

  • Checkout Sessions: Secure payment flow
  • Customer Portal: Manage subscriptions
  • Webhooks: Payment event handling
  • Test Mode: Safe testing environment

Premium Features (Locked)

  • Model Comparison tool
  • Advanced calculators
  • Certificate generation
  • Priority AI responses
  • Ad-free experience

📜 Legal & Compliance

Pages

Page Content
Privacy Policy Data collection, usage, rights
Terms of Service Usage terms, liability
Help Center FAQ, support contact

Privacy Features

  • GDPR compliant
  • Data export option
  • Account deletion
  • Cookie consent
  • Analytics opt-out

Terms Highlights

  • Age requirements
  • Content ownership
  • Acceptable use
  • Termination policy

🛠️ Tech Stack

Frontend

Technology Version Purpose
React 18.x UI framework
Vite 5.x Build tool
React Router 6.x Routing
Tailwind CSS 3.x Styling
Three.js Latest 3D graphics
GSAP 3.x Animations
Lucide React Latest Icons
i18next Latest i18n
Recharts Latest Charts

Backend & Services

Service Purpose
Supabase Auth, database, storage
Google Gemini AI tutoring
Stripe Payments
Mixpanel Analytics
Vercel Hosting

3D & Graphics

Library Purpose
Three.js WebGL rendering
GLTFLoader GLB/GLTF models
FBXLoader FBX models
DRACOLoader Compressed models
OrbitControls Camera controls

🚀 Quick Start

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Supabase account
  • Google Gemini API key

Installation

# Clone repository
git clone https://github.com/yousef469/Engineeruim.git
cd Engineeruim

# Install dependencies
npm install

# Setup environment
cp .env.example .env
# Edit .env with your API keys

# Run development server
npm run dev

# Build for production
npm run build

📁 Project Structure

Engineeruim/
├── src/
│   ├── components/           # Reusable components
│   │   ├── calculators/      # Engineering calculators
│   │   ├── diagrams/         # Interactive diagrams
│   │   ├── labs/             # Virtual labs
│   │   ├── projects/         # Project templates
│   │   ├── FloatingAIHelper.jsx
│   │   ├── GlobalSearch.jsx
│   │   ├── MobileBottomNav.jsx
│   │   ├── Leaderboard.jsx
│   │   ├── StreakCounter.jsx
│   │   ├── AchievementNotification.jsx
│   │   ├── CertificateGenerator.jsx
│   │   ├── FormulaLibrary.jsx
│   │   ├── EngineeringCalculators.jsx
│   │   ├── ProjectTemplates.jsx
│   │   └── ...
│   ├── contexts/             # React contexts
│   │   ├── AuthContext.jsx
│   │   └── ProgressContext.jsx
│   ├── data/                 # Lesson data
│   │   ├── rockets/          # 8 section files
│   │   ├── planes/           # 6 section files
│   │   ├── automotive/       # 5 section files
│   │   ├── electronics/      # 5 section files
│   │   ├── civil/            # 5 section files
│   │   ├── formulasData.js   # 200+ formulas
│   │   ├── calculatorsData.js # 25+ calculators
│   │   └── projectTemplatesData.js # 20 templates
│   ├── hooks/                # Custom hooks
│   │   └── useAchievementNotifications.js
│   ├── pages/                # Page components
│   │   ├── GameMapRockets.jsx
│   │   ├── GameMapPlanes.jsx
│   │   ├── GameMapCars.jsx
│   │   ├── GameMapElectronics.jsx
│   │   ├── GameMapCivil.jsx
│   │   ├── RocketLessonPage.jsx
│   │   ├── PlaneLessonPage.jsx
│   │   ├── CarLessonPage.jsx
│   │   ├── ElectronicsLessonPage.jsx
│   │   ├── CivilLessonPage.jsx
│   │   ├── ExplodeViewPage.jsx
│   │   ├── CommunityPage.jsx
│   │   ├── ProfilePage.jsx
│   │   ├── CareerProjectsPage.jsx
│   │   ├── EngineeringToolboxPage.jsx
│   │   ├── HomeworkSolverPage.jsx
│   │   ├── InternshipSimulatorPage.jsx
│   │   └── ...
│   ├── services/             # API services
│   │   ├── gemini.js         # AI service
│   │   ├── supabase.js       # Database
│   │   ├── community.js      # Community API
│   │   └── mixpanel.js       # Analytics
│   ├── App.jsx               # Main app + routes
│   ├── main.jsx              # Entry point
│   └── index.css             # Global styles
├── public/
│   ├── models/               # 3D models (GLB/FBX)
│   ├── favicon.svg
│   ├── manifest.json
│   └── ...
├── server/                   # Backend server
├── api-server/               # API endpoints
├── .env.example
├── package.json
├── vite.config.js
├── tailwind.config.js
└── vercel.json

🔑 Environment Setup

Required Variables

# Supabase
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Google Gemini AI
VITE_GEMINI_API_KEY=your_gemini_api_key

# Stripe (Sandbox)
VITE_STRIPE_PUBLIC_KEY=your_stripe_public_key
STRIPE_SECRET_KEY=your_stripe_secret_key

# Google OAuth (Optional)
VITE_GOOGLE_CLIENT_ID=your_google_client_id

# Mixpanel (Optional)
VITE_MIXPANEL_TOKEN=your_mixpanel_token

Getting API Keys

  1. Supabase: https://supabase.com → Create project → Settings → API
  2. Gemini: https://aistudio.google.com/app/apikey
  3. Stripe: https://dashboard.stripe.com/test/apikeys
  4. Google OAuth: https://console.cloud.google.com

🌐 Deployment

Vercel (Recommended)

npm i -g vercel
vercel --prod

Environment Variables

Add all .env variables to Vercel dashboard.

Database Setup

Run SQL scripts from SETUP_DATABASE.md in Supabase.


📊 Platform Statistics

Metric Value
Total Lessons 100+
Engineering Tracks 5
Calculators 25+
Formulas 200+
Project Templates 20
3D Models 11
Achievements 20+
Languages 6

🤝 Contributing

  1. Fork the repository
  2. Create feature branch (git checkout -b feature/AmazingFeature)
  3. Commit changes (git commit -m 'Add AmazingFeature')
  4. Push to branch (git push origin feature/AmazingFeature)
  5. Open Pull Request

🔗 Links


Built with ❤️ for engineering education

Last Updated: November 29, 2025

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors