Skip to content

README.md

Latest commit

 

History

History
133 lines (97 loc) · 3.98 KB

README.md

File metadata and controls

133 lines (97 loc) · 3.98 KB

Quest Service - Frontend

The frontend application for Quest Service, a thought-provoking logic puzzle game built on the Stellar blockchain. This React-based interface provides an engaging and intuitive user experience for players to solve puzzles and earn on-chain rewards.

🎨 Design

View the complete design system and UI mockups on Figma: Quest Service Design - Figma

🚀 Features

  • Interactive Puzzle Interface: Smooth, responsive UI for solving logic puzzles
  • Stellar Wallet Integration: Connect with Freighter and other Stellar wallets
  • Real-time Progress Tracking: Visual feedback on puzzle completion and achievements
  • NFT Gallery: Display earned achievement NFTs from completed puzzles
  • Token Management: View and manage XLM and custom tokens for unlocking content
  • Responsive Design: Optimized for desktop and mobile gameplay

🛠️ Tech Stack

  • Framework: React 18+
  • Styling: TailwindCSS
  • State Management: React Context API / Redux (if applicable)
  • Blockchain Integration: Stellar SDK, Soroban RPC
  • Wallet Connection: Freighter Wallet API
  • Build Tool: Vite / Create React App
  • Type Safety: TypeScript (if applicable)

📦 Installation

# Clone the repository
git clone https://github.com/yourusername/quest-service-frontend.git

# Navigate to the project directory
cd quest-service-frontend

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env with your Stellar network configuration

# Start the development server
npm run dev

🔧 Configuration

Create a .env file in the root directory with the following variables:

VITE_STELLAR_NETWORK=testnet
VITE_SOROBAN_RPC_URL=https://soroban-testnet.stellar.org
VITE_BACKEND_API_URL=http://localhost:3000
VITE_CONTRACT_ADDRESS=your_contract_address

🎮 Usage

  1. Connect Wallet: Click "Connect Wallet" to link your Freighter wallet
  2. Browse Puzzles: Explore available puzzles organized by difficulty
  3. Solve Challenges: Complete logic puzzles to earn points and rewards
  4. Claim NFTs: Mint achievement NFTs for completing puzzle milestones
  5. Unlock Content: Use tokens to access hints and special levels

📁 Project Structure

quest-service-frontend/
├── public/
├── src/
│   ├── assets/          # Images, icons, and static files
│   ├── components/      # Reusable UI components
│   ├── pages/           # Page components
│   ├── services/        # API and blockchain services
│   ├── utils/           # Helper functions
│   ├── hooks/           # Custom React hooks
│   ├── contexts/        # React contexts
│   ├── App.jsx          # Main application component
│   └── main.jsx         # Application entry point
├── .env.example
├── package.json
└── README.md

🧪 Testing

# Run unit tests
npm run test

# Run tests with coverage
npm run test:coverage

# Run e2e tests
npm run test:e2e

🚢 Deployment

# Build for production
npm run build

# Preview production build
npm run preview

🤝 Contributing

We welcome contributions! Please follow these steps:

  1. Fork the repository
  2. Create a 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

Please ensure your code follows the project's coding standards and includes appropriate tests.

📄 License

This project is licensed under the MIT License.

🔗 Related Repositories

💬 Support

For questions or support, please open an issue or join our community discussions.