Blog & Articles by Wael Alhamad

When we set out to build Wave Spark, our goal was ambitious: create a hybrid renewable energy system that not only generates clean power from three sources but also provides an immersive digital experience for users to understand and monitor the technology.

The Challenge

The project required integrating three distinct domains:

Hardware: ESP8266 microcontrollers, PM2.5 sensors, temperature sensors
3D Visualization: Interactive model of the physical prototype
Full-Stack Application: Real-time data dashboard with authentication

The Tech Stack

After evaluating various options, I settled on a modern, scalable stack:

Frontend: React + Three.js

For the 3D visualization, I used React Three Fiber, a React renderer for Three.js. This allowed me to create interactive 3D scenes using familiar React patterns. Users can rotate, zoom, and explore every component of the Wave Spark prototype with smooth animations powered by Framer Motion.

// Simplified React Three Fiber component
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

function WaveSparkModel() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <OrbitControls enableZoom={true} />
      <mesh>
        {/* 3D model components */}
      </mesh>
    </Canvas>
  )
}

Backend: Node.js + Express + MongoDB

The backend handles multiple responsibilities:

RESTful API endpoints for sensor data
JWT-based authentication with bcrypt encryption
Real-time data storage in MongoDB
WebSocket connections for live updates

IoT Integration: ESP8266

The ESP8266 microcontrollers read environmental data every 60 seconds and transmit it to our Node.js server via HTTP POST requests. This data is then stored in MongoDB and pushed to connected clients in real-time.

Key Learnings

Building Wave Spark taught me valuable lessons about full-stack architecture:

Performance Optimization: 3D models can be heavy. We optimized mesh complexity and implemented lazy loading.
Real-Time Data: Balancing database writes with real-time updates requires careful architecture planning.
Hardware-Software Bridge: Handling unreliable network connections from IoT devices requires robust error handling.

The Result

Wave Spark won First Place at the Brilliant Blue Challenge 2025 in Canada, demonstrating that combining modern web technologies with renewable energy engineering can create impactful, user-friendly solutions. The project now serves as a reference for coastal communities exploring sustainable energy options.

Want to Learn More?

Check out the live demo or explore the detailed project page to see Wave Spark in action.

View Project Live Demo

Building Wave Spark: Combining Three.js with MERN Stack for IoT Visualization