Readme Clubs

Readme Clubs is a progressive web app (PWA) for book enthusiasts, integrating Web3 functionality to enable seamless interactions with blockchain-based books and communities. Built with React, Vite, Tailwind CSS, and Wagmi, this app allows users to browse books, view details, and interact with Web3 features like wallet connections and token balances.

Features

• Browse Books: Explore a curated list of books with details like title, author, cover image, and description.
• Web3 Integration: Connect your wallet (MetaMask, Coinbase Wallet, or Keplr) to view your ETH and $PAGE balances.
• Progressive Web App (PWA): Install the app on your device for offline access and a native app-like experience.
• Responsive Design: Optimized for desktop, tablet, and mobile devices.

Technologies Used

• Frontend: React, Vite, Tailwind CSS
• Web3: Wagmi, RainbowKit, Viem
• Deployment: Netlify
• PWA: Vite Plugin PWA

Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

1. Clone the repository: git clone https://github.com/pagedao/readme-clubs.git cd readme-clubs

2. Install dependencies: npm install

3. Start the development server: npm run dev

4. Open the app in your browser: http://localhost:5173

Building for Production

To build the app for production, run: npm run build

The production-ready files will be generated in the dist directory.

Deployment

This app is deployed on Netlify. To deploy your own instance:

1. Push your code to a GitHub repository.
2. Go to Netlify and create a new site from Git.
3. Configure the build settings:
   • Build command: npm run build
   • Publish directory: dist
4. Deploy the site.

Folder Structure

src/ ├── components/ # Reusable UI components ├── features/ # Feature-specific components (e.g., books, profile) ├── hooks/ # Custom React hooks ├── lib/ # Utility functions and API clients ├── pages/ # Route components ├── types/ # TypeScript interfaces and types ├── App.tsx # Main application component ├── main.tsx # Entry point

Contributing

We welcome contributions! Here’s how you can help:

1. Fork the repository.
2. Create a new branch for your feature or bugfix: git checkout -b feature/your-feature-name
3. Commit your changes: git commit -m "Add your feature"
4. Push to the branch: git push origin feature/your-feature-name
5. Open a pull request and describe your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

• Vite for the blazing-fast build tool.
• Tailwind CSS for the utility-first CSS framework.
• Wagmi for Web3 integration.
• RainbowKit for wallet connection UI.

---

Made with ❤️ by PageDAO