🌍 TechGo - Interactive Global Innovation Learning Platform

Overview

TechGo is an innovative EdTech platform designed to make technology education engaging and interactive. It combines a stunning 3D globe interface with an AI-powered adaptive quiz system to help students explore global technological innovations across different countries and continents.

🎯 Key Features

Interactive 3D Globe: Explore technological innovations visually on a rotating 3D globe interface
AI-Powered Adaptive Quizzes: Dynamic quiz generation using Google Gemini AI that adapts to student skill levels
Multi-Language Support: Full support for Indonesian and English interfaces
User Progress Tracking: Monitor student learning progression with adaptive difficulty levels (Beginner → Intermediate → Expert)
Google Authentication: Secure login with Google or guest access
Real-time Database: Track user progress and quiz attempts in real-time
Responsive Design: Works seamlessly on desktop and mobile devices

📊 Project Structure

TechGo/
├── techgo_backend/           # Express.js API Server
│   ├── app.js               # Main application file
│   ├── package.json         # Backend dependencies
│   ├── schema.sql           # MySQL database schema
│   ├── config/
│   │   └── database.js      # MySQL connection pool
│   ├── controllers/
│   │   ├── aiController.js  # Quiz generation & scoring
│   │   └── innovationController.js # Countries & innovations data
│   ├── routes/
│   │   └── api.js           # API route definitions
│   └── scratch/             # Development scripts
│
├── techgo_frontend/         # React + Vite Frontend
│   ├── src/
│   │   ├── App.jsx          # Main app component with routing
│   │   ├── main.jsx         # React entry point
│   │   ├── pages/
│   │   │   ├── LandingPage.jsx   # Home & authentication
│   │   │   ├── MapPage.jsx       # 3D globe interface
│   │   │   ├── QuizPage.jsx      # AI quiz interface
│   │   │   └── ProfilePage.jsx   # User progress & stats
│   │   ├── context/
│   │   │   ├── AuthContext.jsx   # Google & guest auth
│   │   │   └── LanguageContext.jsx # Multi-language support
│   │   ├── locales/
│   │   │   └── dictionary.js     # i18n translations
│   │   ├── data/
│   │   │   └── fallbackCountries.js # Fallback country data
│   │   └── assets/
│   │       └── models/      # 3D models for landmarks
│   ├── package.json         # Frontend dependencies
│   ├── vite.config.js       # Vite configuration
│   ├── tailwind.config.js   # Tailwind CSS setup
│   └── eslint.config.js     # ESLint configuration
│
└── README.md                # This file

🛠️ Technology Stack

Backend

Technology	Version	Purpose
Node.js	≥18.0.0	JavaScript runtime
Express.js	^4.19.2	Web framework & API server
MySQL	8.0.x	Relational database
mysql2	^3.9.7	MySQL client driver
Google Generative AI	^0.24.1	AI quiz generation (Gemini API)
CORS	^2.8.5	Cross-origin resource sharing
dotenv	^16.4.5	Environment variable management
nodemon	^3.1.0	Development auto-reload

Frontend

Technology	Version	Purpose
React	^19.2.6	UI library
Vite	^8.0.12	Build tool & dev server
React Router	^7.17.0	Page routing
Three.js	^0.184.0	3D graphics library
React Globe GL	^2.38.0	Interactive 3D globe component
TailwindCSS	^4.3.0	Utility-first CSS framework
Lucide React	^1.17.0	Icon library
ESLint	^10.3.0	Code linting

🚀 Getting Started

Prerequisites

Node.js >= 18.0.0
MySQL 8.0.x Server
npm or yarn package manager
Google OAuth 2.0 credentials (for authentication)
Google Generative AI API key (for quiz generation)

Backend Setup

Navigate to backend folder
```
cd techgo_backend
```
Install dependencies
```
npm install
```

Setup environment variables Create .env file in techgo_backend/:

PORT=5000
DB_HOST=your_mysql_host
DB_USER=your_mysql_user
DB_PASSWORD=your_mysql_password
DB_NAME=techgo_db
GOOGLE_GEMINI_API_KEY=your_gemini_api_key

Setup database

mysql -u your_mysql_user -p your_mysql_password < schema.sql

Run backend server

npm start          # Production
npm run dev        # Development with nodemon

Backend will run on http://localhost:5000

Frontend Setup

Navigate to frontend folder
```
cd techgo_frontend
```
Install dependencies
```
npm install
```

Setup environment variables Create .env.local file in techgo_frontend/:

VITE_API_URL=http://localhost:5000/api
VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id

Run development server
```
npm run dev
```
Frontend will run on http://localhost:5173
Build for production
```
npm run build
npm run preview
```

📚 API Documentation

Base URL

http://localhost:5000/api

Endpoints

Get Countries with Innovations

GET /api/countries

Returns list of all countries with their associated technological innovations.

Response Example:

[
  {
    "id": 1,
    "country_code": "IDN",
    "country_name_id": "Indonesia",
    "country_name_en": "Indonesia",
    "continent": "Asia",
    "latitude": -0.7893,
    "longitude": 113.9213,
    "innovations": [
      {
        "id": 1,
        "title_id": "Teknologi Geothermal",
        "title_en": "Geothermal Technology",
        "description_id": "...",
        "icon_name": "icon_geothermal.png"
      }
    ]
  }
]

Generate AI Quiz

POST /api/quiz/generate
Content-Type: application/json

{
  "user_id": 1,
  "innovation_id": 5,
  "skill_level": "Intermediate"
}

Response Example:

{
  "quiz_id": "quiz_123",
  "questions": [
    {
      "id": 1,
      "question": "What is...",
      "options": ["A", "B", "C", "D"],
      "difficulty": "medium"
    }
  ]
}

Submit Quiz Score

POST /api/quiz/submit
Content-Type: application/json

{
  "user_id": 1,
  "innovation_id": 5,
  "score": 4,
  "correct_answers": 4,
  "total_questions": 5
}

Response Example:

{
  "success": true,
  "new_level": "Intermediate",
  "message": "Great job! You've progressed to Intermediate level"
}

🗄️ Database Schema

Key Tables

users

Stores user information (Google OAuth & Guest users)
Supports multi-provider authentication

countries

Contains 12+ country data with 3D coordinates
Includes continent classification

innovations

Technology innovations per country
Bilingual descriptions (Indonesian & English)

user_progress

Tracks quiz attempts and scores
Manages adaptive skill level progression

See schema.sql for complete details.

🎓 Learning Features

AI-Powered Quiz System

Dynamically generates questions based on innovation topics
Uses Google Gemini API for intelligent question creation
Adapts difficulty based on user skill level
Tracks score and performance metrics

Skill Level Progression

Beginner: Introduction level (0-30% score)
Intermediate: Intermediate level (31-70% score)
Expert: Advanced level (71-100% score)

Multi-Language Support

Full UI support for Indonesian & English
Bilingual innovation descriptions
Language preference saved in context

🔐 Security Features

Environment Variables: Sensitive credentials kept in .env
CORS Protection: Controlled origin access
SSL/TLS: HTTPS support ready
Database Connection: Pool-based MySQL connection
User Authentication: Google OAuth 2.0 integration

📱 Responsive Design

TechGo is fully responsive and works on:

🖥️ Desktop (1920px and above)
💻 Laptop (1024px - 1919px)
📱 Tablet (768px - 1023px)
📲 Mobile (below 768px)

🚀 Deployment

cPanel Shared Hosting

This project is optimized for cPanel shared hosting:

Use HashRouter for full route compatibility
Environment variables configured via cPanel
MySQL database accessible via cPanel
Frontend builds to static files in public_html

Recommended Hosting

Backend: cPanel hosting with Node.js support
Frontend: Netlify, Vercel, or cPanel public_html
Database: cPanel MySQL 8.0+

📈 Performance Considerations

3D Globe: Lazy-loaded Three.js/React Globe GL
Quiz Caching: Reduce AI API calls with intelligent caching
Database Indexing: Optimized queries with indexes
API Rate Limiting: Implement to prevent abuse
Image Optimization: Compressed 3D models and icons

🤝 Contributing

To contribute to TechGo:

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 Scripts

Backend

npm run dev      # Start with auto-reload (nodemon)
npm start        # Production start

Frontend

npm run dev      # Start Vite dev server
npm run build    # Production build
npm run lint     # Run ESLint
npm run preview  # Preview production build

🐛 Troubleshooting

MySQL Connection Issues

# Check MySQL service is running
mysql -u root -p

# Verify credentials in .env
# Ensure database is created and schema imported

CORS Errors

Check backend CORS configuration in app.js
Verify frontend VITE_API_URL matches backend URL

3D Globe Not Rendering

Check Three.js dependencies are installed
Verify React Globe GL version compatibility
Check browser console for WebGL support

📄 License

This project is part of the IEEE Future Tech initiative.

👨‍💼 Authors

Zidan LPTP - Project Lead & Full Stack Developer

📞 Support

For issues, questions, or suggestions:

GitHub Issues: TechGo Issues
Email: [Your Contact]

🗺️ Roadmap

🎉 Acknowledgments

Google Generative AI (Gemini) for quiz generation
Three.js community for 3D graphics
React community for amazing tools
IEEE for the Future Tech initiative

Made with ❤️ for Global Education | Last Updated: July 2026

Name		Name	Last commit message	Last commit date
gdl_maker		gdl_maker
techgo_backend		techgo_backend
techgo_frontend		techgo_frontend
.gitignore		.gitignore
Bible TechGo.md		Bible TechGo.md
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation

🌍 TechGo - Interactive Global Innovation Learning Platform

Overview

🎯 Key Features

📊 Project Structure

🛠️ Technology Stack

Backend

Frontend

🚀 Getting Started

Prerequisites

Backend Setup

Frontend Setup

📚 API Documentation

Base URL

Endpoints

Get Countries with Innovations

Generate AI Quiz

Submit Quiz Score

🗄️ Database Schema

Key Tables

🎓 Learning Features

AI-Powered Quiz System

Skill Level Progression

Multi-Language Support

🔐 Security Features

📱 Responsive Design

🚀 Deployment

cPanel Shared Hosting

Recommended Hosting

📈 Performance Considerations

🤝 Contributing

📝 Development Scripts

Backend

Frontend

🐛 Troubleshooting

MySQL Connection Issues

CORS Errors

3D Globe Not Rendering

📄 License

👨‍💼 Authors

📞 Support

🗺️ Roadmap

🎉 Acknowledgments

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages