Keys for All - Demo Application

A demonstration app showcasing the @keys-for-all/client-components library.

Features

This demo app demonstrates:

• 🏠 Home Page - Overview of the Keys for All system
• 🔑 Keys Page - Key management, activation, and filtering
• 💳 Purchase Page - Key pack selection and checkout flow
• 🤝 Community Page - Community pool, donations, and requests
• 🎨 Components Page - All available UI components

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173

Demo Features

Mock Data

The app uses @faker-js/faker to generate realistic mock data for:

• User keys with various statuses
• Purchase history
• Community pool entries

Pages Overview

1. Home - Landing page with pricing and features
2. My Keys - View and manage your keys, activate new ones
3. Purchase - Select from different key packs
4. Community - Browse available keys, donate, or request
5. Components - Interactive showcase of all UI components

Key Features Demonstrated

• Key Activation Flow: Enter a key and device ID to activate
• Key Filtering: Filter keys by status (active, unused, expired)
• Purchase Selection: Choose from various key pack options
• Community Interaction: Claim, donate, or request keys
• Responsive Design: Works on desktop and mobile
• Dark Theme: Optimized for developer tools

Development

Project Structure

src/
├── components/
│   └── Layout.tsx        # Main app layout
├── pages/
│   ├── HomePage.tsx      # Landing page
│   ├── KeysPage.tsx      # Key management
│   ├── PurchasePage.tsx  # Purchase flow
│   ├── CommunityPage.tsx # Community features
│   └── ComponentsPage.tsx # Component showcase
├── mocks/
│   └── mockData.ts       # Mock data generators
├── App.tsx               # Main app component
└── main.tsx              # Entry point

Technologies Used

• React 18
• TypeScript
• Vite
• React Router
• React Query
• styled-components
• @faker-js/faker

Notes

• This is a demo app - no real purchases or API calls are made
• All data is generated client-side for demonstration
• The API client is configured but not connected to a real backend

License

MIT