Gamestr

A modern Vue.js gaming platform with seamless Nostr-only authentication, enabling decentralized identity and profile management for web5 gaming experiences.

Comment

What Inspired You

The inspiration came from the need to bridge traditional web gaming with decentralized identity systems. As the Nostr protocol gains adoption, there's a growing demand for applications that leverage its censorship-resistant, decentralized nature while maintaining excellent user experience. I wanted to create a gaming platform that demonstrates how Nostr authentication can be as smooth and intuitive as traditional OAuth systems, but with the added benefits of user ownership and privacy.

What You Learned

This project taught me several valuable lessons:

  • Nostr Protocol Integration: Deep dive into NIP-01 (basic protocol), NIP-46 (Nostr Connect), and various authentication methods
  • Vue.js State Management: Implementing reactive authentication states and profile synchronization
  • Real-time Data Sync: Managing profile updates between Nostr Relays and Supabase database
  • Session Persistence: Creating seamless user experiences with automatic session restoration
  • Cross-platform Compatibility: Ensuring the app works with various Nostr Signing Apps (nsec.app, Alby Extension, Amber App)

How You Built Your Project

Tech Stack:

  • Frontend: Vue.js 3 with Composition API
  • Authentication: nostr-login library for Nostr integration
  • Database: Supabase for user data and game statistics
  • Styling: Tailwind CSS for modern UI design
  • Build Tool: Vite for development and production builds

Architecture:

  1. Authentication Layer: Implemented nostr-login for handling various Nostr authentication methods
  2. Profile Management: Created a sync system between Nostr network (kind 0 events) and Supabase database
  3. Session Handling: Built automatic session detection and restoration using localStorage
  4. Real-time Updates: Implemented periodic profile synchronization every 5 minutes
  5. Database Schema: Designed efficient Supabase tables for user profiles and game data

Development Process:

  • Started with basic Vue.js setup using Bolt.new
  • Integrated nostr-login library for authentication
  • Built profile fetching system using Nostr relays
  • Implemented Supabase integration for data persistence
  • Added session management and automatic restoration
  • Created responsive UI with Tailwind CSS
  • Tested across multiple Nostr clients for compatibility

Challenges You Faced

1. Nostr Protocol Complexity

  • Understanding different NIPs (Nostr Implementation Possibilities)
  • Handling various authentication methods and fallbacks
  • Managing relay connections and event fetching

2. State Management

  • Synchronizing authentication state between Nostr protocol and Vue.js
  • Managing localStorage persistence securely

3. Cross-Client Compatibility

  • Ensuring the app works with different Nostr signers
  • Handling various authentication flows (NIP-46, browser extensions, etc.)
  • Testing with multiple Nostr applications

4. Database Synchronization

  • Merging Nostr profile data with existing database records
  • Handling network failures during profile sync
  • Preventing duplicate entries and data conflicts

5. User Experience

  • Making Nostr authentication feel as smooth as traditional login
  • Providing clear feedback during authentication process
  • Handling edge cases like network timeouts gracefully

Technical Achievements

  • Seamless Authentication: Users can authenticate using their existing Nostr identity without complex setup or create a new Identity.
  • Profile Synchronization: Automatic syncing of Nostr profiles with database ensures data consistency
  • Session Persistence: Users stay logged in across browser sessions
  • Real-time Updates: Profile changes on the Nostr network are reflected in the application
  • Multi-Client Support: Compatible with major Nostr applications and browser extensions

Future Enhancements

  • Social Features: Enhance Social Systems using Nostr's social graph
  • Direct Messages: Implement Direct Messages trough decentralited Nostr Relays (Nip-17 | Nip-44)
  • Battle Mode: Bet tiny parts of Bitcoin(Sats). (Nip-47)
  • Achievement System: Track gaming achievements on the Nostr network
  • Multi-Relay Support: Enhance reliability with multiple relay connections
  • Offline Mode: Cache profiles for offline gaming experiencesr
  • Gaming: Allow Game PR´s for Developers

Built With

Share this project:

Updates