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

1. Install dependencies:

npm install

1. Start the development server:

npm run dev

1. 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