About
Work
Projects

Pong Game with Blockchain Score Storage

TypeScript
Tailwind
Avalanche
Next.js
Pong Game with Blockchain Score Storage

Overview

This project reimagines the classic Pong arcade game as a full-stack web application with blockchain integration. The goal was to highlight my skills in front-end development, smart contract integration, and decentralized data storage. Players can play locally, compete against AI or a friend, and have their game scores permanently recorded on the Avalanche blockchain.

Key Features

  • Real-Time Gameplay: Local multiplayer gameplay with 1v1 and 1vAI modes, featuring responsive paddle controls and dynamic ball physics.
  • Blockchain Score Storage: Game scores are permanently recorded on the Avalanche Fuji testnet via Solidity smart contracts for an immutable leaderboard.
  • Server-Side Transaction Signing: Implemented secure server-side transaction submission using Next.js API routes to handle blockchain interactions without exposing private keys.
  • Live Blockchain Data: Real-time score history and network statistics fetched directly from the Avalanche RPC, showing the latest game results and block information.
  • Responsive UI: Built with Next.js, React, TypeScript, and Tailwind CSS for a lightweight, frontend with WebGL shader background effects.
  • Transaction History: View the last 10 game results with transaction hashes, timestamps, and direct links to blockchain explorers.
  • Vercel Deployment: Seamless serverless deployment with Next.js API routes for backend functionality.

Technologies Used

  • TypeScript: For type-safe frontend and backend code.
  • Next.js: Full-stack React framework for API routes and server-side rendering.
  • Solidity: Smart contract development for immutable score storage on Avalanche.
  • Ethers.js v6: For blockchain interactions and event querying.
  • Tailwind CSS: For a responsive and clean interface.
  • Hardhat: Development environment for compiling, testing, and deploying smart contracts.
  • WebGL Shaders: For animated background effects.

Challenges and Learnings

Building a blockchain-integrated game required understanding smart contract event emissions and efficient RPC querying for real-time data display. Implementing server-side transaction signing added complexity in securely handling private keys while maintaining a seamless user experience. Working with the Avalanche network taught me about testnet deployment, gas optimization, and event indexing for querying blockchain data efficiently. Deploying smart contracts and coordinating frontend-backend integration with blockchain RPC calls required careful error handling and network resilience.

Outcome

The Avalanche Pong app demonstrates my ability to design a full-stack, blockchain-integrated web application from scratch. The project showcases smart contract development, secure server-side blockchain interactions, and real-time data fetching from decentralized networks.

Related projects