AIoT Agriculture Wiki — Wiki + Trivia

Interactive AIoT Agriculture Wiki with a Trivia module. The site includes Sensors, Hardware, Connectivity and Applications, providing a structured exploration of smart agriculture technologies.

Built with React + TypeScript + Vite, with data stored in JSON inside the repository.

This README explains how to run, build, deploy and maintain the project, and documents architectural decisions to keep it easy to extend.

---

Requirements

• Node.js 18 or higher

---

Getting Started

npm install
npm run dev
npm run build
npm run preview

---

Project Structure

src/
  assets/                         Images and backgrounds
    sensors/
    hardware/
    connectivity/
    applications/
    backgrounds/                  Section backgrounds
  components/                     NavBar, Footer, SearchBar
  content/
    trivia/questions.json         Trivia questions
    wiki/                         Data by section (JSON)
      sensors.json
      hardware.json
      connectivity.json
      applications.json
  features/
    trivia/pages/                 TriviaStart, TriviaResults
    wiki/pages/
      Home.tsx                    Landing page
      WikiIndex.tsx               Global index with search
      WikiDetail.tsx              Detail view
      SensorsPage.tsx
      HardwarePage.tsx
      ConnectivityPage.tsx
      ApplicationsPage.tsx
      NotFound.tsx

---

Routes

• / Home
• /wiki Index
• /wiki/sensors
• /wiki/hardware
• /wiki/connectivity
• /wiki/applications
• /wiki/:group/:slug Detail page
• /trivia Trivia game
• /trivia/results Results
• * 404

---

Data and Assets

• Each section reads JSON data from src/content/wiki/
• Images are resolved by slug using:

  import.meta.glob(...)

• File names must match slugs

---

Styling and Layout

• Defined in src/index.css
• Uses CSS variable --page-bg for backgrounds
• Each section has its own visual identity
• Detail pages use a card-based layout

---

Trivia Module

• Category-based questions (Sensors, Hardware, etc.)
• Difficulty levels
• Randomized answers
• Results with scoring feedback

---

Deployment (GitHub Pages)

• vite.config.ts uses:

  base: "/aiot-agriculture/"
  

• App.tsx:

  <BrowserRouter basename={import.meta.env.BASE_URL}>

• GitHub Actions workflow builds and deploys
• SPA fallback:

  dist/index.html → dist/404.html
  

---

Maintenance

• Removed all unused template assets
• Replaced Hollow Knight content with AIoT domain data
• Simplified structure for scalability
• Cleaned imports and dependencies

---

Common Issues

404 on refresh

Ensure:

• correct base in Vite
• correct basename in Router
• SPA fallback enabled

Images not loading

• File name must match slug exactly
• Check correct folder

---

Project Goal

To provide:

• A clean AIoT Agriculture knowledge base
• Structured technical content
• Interactive learning through trivia
• A scalable platform for future expansion

---

Notes

This project originated from a cloned template and has been fully refactored into an AIoT Agriculture-focused application.

---

License

Educational project.