A modern, blockchain-powered Snake game built with Next.js and Linera blockchain technology, featuring real-time score tracking, token rewards, customizable skins, and achievement systems.
Get started in 5 minutes!
pnpm install
npm run setup:local
npm run build:backend
npm run deploy:local
npm run dev📖 Full Guide: See QUICKSTART.md for detailed setup instructions.
🌐 Deploy to Testnet: See TESTNET_DEPLOYMENT.md to connect to Linera Testnet Conway.
📊 Blockchain Status: See BLOCKCHAIN_STATUS.md for integration status and infrastructure details.
- On-Chain Score Tracking: Scores recorded on Linera blockchain
- Wallet Integration: Connect Linera wallet or use mock mode for testing
- Point System: Earn points stored on-chain, redeemable for rewards
- Leaderboard: Compete with players globally with verified scores
- Traditional Mechanics: Eat food to grow, score points, and avoid self-collision
- Responsive Controls: Arrow keys with smooth animations
- Score Tracking: Real-time score display with blockchain verification
- Token System: Earn tokens by playing and achieving milestones
- Skin Customization: Purchase and equip different snake skins with earned points
- Achievement Rewards: Unlock achievements and earn on-chain token rewards
- Transaction History: View all your blockchain interactions
- Modern Design: Sleek dark theme with vibrant accents and particle effects
- Responsive Layout: Optimized for mobile and desktop play
- Visual Feedback: Smooth animations, confetti effects, and hover interactions
- Blockchain Status: Real-time sync indicator and transaction notifications
- Framework: Next.js 16 with App Router
- UI Library: React 19 with TypeScript
- Styling: Tailwind CSS v4
- UI Components: Radix UI, Lucide React, React Icons
- State Management: React Context API
- Blockchain Client: GraphQL with graphql-request
Linera Smart Contract
- Language: Rust
- Blockchain: Linera Protocol
- Contract: WASM-compiled smart contract
- Services: GraphQL API for queries
Multiplayer Backend Service
- Runtime: Node.js 20
- Framework: Express.js
- Real-time: Socket.IO for WebSocket connections
- Language: TypeScript
- Port: 3001 (default)
- Containerization: Docker & Docker Compose
- Local Node: Linera local development network
- Build Tools: Cargo, Rust toolchain
See QUICKSTART.md for a 5-minute setup guide.
-
Clone the repository
git clone https://github.com/Goodnessukaigwe/jeteeah.git cd jeteeah -
Install dependencies
pnpm install
-
Setup environment
cp .env.example .env.local
-
Start Linera node (Docker)
npm run setup:local
-
Build and deploy contract
npm run build:backend npm run deploy:local
Update
.env.localwith the chain and app IDs from deployment output. -
Run the development server
npm run dev ```bash npm run dev
- QUICKSTART.md - Get started in 5 minutes
- SETUP.md - Comprehensive setup and development guide
- TESTNET_DEPLOYMENT.md - Deploy to Linera Testnet Conway
- backend/README.md - Smart contract documentation
- Connect Wallet: Click "Connect Wallet" or use mock mode for testing
- Enable Blockchain Mode: Toggle the blockchain switch ON for on-chain gameplay
- Start Game: Click "Start Game" to begin
- Controls:
- Arrow Keys: Move the snake (Up, Down, Left, Right)
- Pause: Click pause button or press ESC
- Objective: Eat the food to grow and increase your score
- Scoring:
- Each food = 5 points
- Points are recorded on-chain at game end
- High scores are saved to blockchain
- Rewards: Earn on-chain points to unlock skins and achievements
# Frontend
npm run dev # Start Next.js dev server
npm run build # Build for production
npm run start # Start production server
# Backend Service (Multiplayer)
npm run backend:dev # Start backend dev server
npm run backend:install # Install backend dependencies
npm run backend:build # Build backend
npm run dev:all # Run frontend + backend concurrently
# Blockchain (Linera Smart Contract)
npm run setup:local # Setup local Linera node
npm run build:backend # Build smart contract (Note: conflicts with backend:build)
npm run deploy:local # Deploy to local node
# Docker
npm run docker:up # Start all services (Linera + Backend)
npm run docker:down # Stop all services
npm run docker:logs # View logs
npm run docker:reset # Reset blockchain data
# Utilities
npm run linera:info # Show wallet infojeteeah/
├── app/ # Next.js app directory
│ ├── contexts/ # React contexts
│ │ └── GameContext.tsx # Blockchain-integrated game state
│ ├── game/ # Main game page
│ ├── gameover/ # Game over page
│ ├── landing/ # Landing page
│ ├── multiplayer/ # Multiplayer game modes
│ ├── reward/ # Rewards/achievements page
│ ├── skin/ # Skin customization page
│ ├── start/ # Game start page
│ ├── wallet/ # Wallet connection page
│ └── leaderboard/ # Global leaderboard
├── backend/ # Multiplayer Backend Service (Node.js)
│ ├── api/
│ │ ├── config/ # Server configuration
│ │ ├── service/ # Game room management
│ │ └── types/ # TypeScript types
│ ├── app.ts # Express app setup
│ ├── server.ts # Server entry point
│ ├── Dockerfile # Docker configuration
│ └── package.json # Backend dependencies
├── smart-contract/ # Linera Smart Contract (Rust)
│ ├── src/
│ │ ├── contract.rs # Game logic & operations
│ │ ├── service.rs # GraphQL service
│ │ ├── state.rs # Blockchain state
│ │ └── lib.rs # Contract entry point
│ └── tests/ # Contract tests
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── AchievementCard.tsx # Achievement display
│ ├── BlockchainStatus.tsx # Sync status indicator
│ ├── Leaderboard.tsx # Leaderboard component
│ ├── ParticleEffects.tsx # Visual effects
│ ├── PointsDashboard.tsx # Points overview
│ ├── SkinCard.tsx # Skin selection
│ ├── TransactionNotification.tsx # TX notifications
│ └── WalletButton.tsx # Wallet connection
├── lib/ # Utilities & blockchain
│ ├── contract-operations.ts # Blockchain operations
│ ├── linera-client.ts # GraphQL client
│ ├── types.ts # TypeScript types
│ └── utils.ts # Helper functions
├── hooks/ # Custom React hooks
│ └── useLineraWallet.ts # Wallet management
├── scripts/ # Build & deployment
│ ├── setup-local.sh # Local env setup
│ ├── build-backend.sh # Contract build
│ └── deploy-local.sh # Contract deployment
├── docker-compose.yml # All services orchestration
├── linera.toml # Project configuration
└── .devcontainer/ # VSCode dev container
-
Update Environment Variables:
cp .env.example .env.local # Edit .env.local with testnet values
2. **Build Contract**:
```bash
npm run build:backend
```
3. **Deploy Contract**:
```bash
linera project publish-and-create
```
4. **Update Frontend Config**:
Update `.env.local` with your deployed chain/app IDs
5. **Deploy Frontend** (Vercel):
```bash
vercel
```
### Deploy Frontend Only
The easiest way to deploy the frontend is using [Vercel](https://vercel.com):
1. Push your code to GitHub
2. Connect repository to Vercel
3. Add environment variables from `.env.local`
4. Deploy automatically
## 🤝 Contributing
Contributions are welcome! Please:
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the MIT License.
## 🔗 Links
- **Linera Documentation**: [https://linera.dev](https://linera.dev)
- **Linera Discord**: [https://discord.gg/linera](https://discord.gg/linera)
- **Report Issues**: [GitHub Issues](https://github.com/YOUR_USERNAME/jeteeah/issues)
## 🙏 Acknowledgments
Built with the [Linera Buildathon Template](https://github.com/linera-io/buildathon-template) and Next.js.
---
**Made with ❤️ for the Linera Blockchain**