YakBak - Voice Message Social Platform

YakBak is a modern social platform built on the Nostr protocol that allows users to share and interact with voice messages. Built with React, TypeScript, and Nostr, it provides a seamless experience for voice-based social interactions.

Features

• 🎤 Voice message recording and playback
• 💬 Threaded voice message conversations
• ⚡ Lightning Network zaps for voice messages
• ❤️ Reactions and engagement tracking
• 🔗 Nostr protocol integration
• 🎨 Modern UI with shadcn/ui components
• 🌐 Real-time updates and interactions

Tech Stack

• React 18.x: For building the user interface
• TypeScript: For type-safe development
• TailwindCSS 3.x: For styling
• Vite: For fast development and building
• shadcn/ui: For accessible UI components
• Nostrify: For Nostr protocol integration
• React Router: For client-side routing
• TanStack Query: For data fetching and caching
• Alby SDK: For Lightning Network integration

Getting Started

Prerequisites

• Node.js 18.x or later
• npm or yarn
• A Nostr wallet (like Alby) for authentication and zaps

Installation

1. Clone the repository:

git clone https://github.com/derekross/yakbak.git
cd yakbak

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

Project Structure

src/
├── components/     # React components
│   ├── ui/        # shadcn/ui components
│   └── ...        # Custom components
├── hooks/         # Custom React hooks
├── lib/           # Utility functions
├── pages/         # Page components
└── public/        # Static assets

Key Features

Voice Messages

• Record voice messages directly in the browser
• Maximum recording time of 60 seconds
• Automatic upload to Blossom servers
• Threaded conversations with voice replies

Nostr Integration

• Seamless authentication with Nostr
• Real-time event streaming
• Profile metadata support
• Threaded conversations

Lightning Network Integration

• Send zaps to voice messages
• Customizable zap amounts
• Real-time zap tracking
• Nostr Wallet Connect

UI Components

The project uses shadcn/ui components for a consistent and accessible user interface. Available components include:

• Accordion
• Alert
• Avatar
• Button
• Card
• Dialog
• Dropdown Menu
• Form
• Input
• Toast
• And many more...

Development

Testing

Run the test suite:

npm run ci

This will:

• Type check the code
• Build the project
• Run any tests

Code Style

The project follows TypeScript best practices and uses ESLint for code quality. Run the linter:

npm run lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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 - see the LICENSE file for details.

Acknowledgments

• Nostr Protocol
• shadcn/ui
• Alby