MyCommunity - Hive Community Frontend

A customizable Next.js frontend for Hive blockchain communities, featuring snaps (short posts), blog posts, wallet integration, and multiple theme support.

🌐 Live Demo: mycommunity-omega.vercel.app

🎨 Features

Snaps Feed - Twitter-like short posts with media support
Blog Posts - Long-form content with markdown support
Multiple Tabs - Filter by community, all posts, or following
Wallet Integration - View balances, tokens, and transaction history
Hive Post Previews - Rich preview cards for shared Hive posts
Theme System - 8 pre-built themes (HiveBR, Nounish, Cannabis, Mengão, Bluesky, Hacker, Forest, Windows95)
Hive Authentication - Login via Keychain, HiveAuth, Ledger, or PeakVault
Responsive Design - Mobile-first with full desktop support

🚀 Quick Start (For Developers)

Prerequisites

Node.js 18+ installed
pnpm, npm, or yarn package manager
A Hive blockchain account

Installation

Clone the repository

git clone https://github.com/bgrana75/mycommunity.git
cd mycommunity

Install dependencies

pnpm install
# or
npm install
# or
yarn install

Set up environment variables
```
cp .env.local.example .env.local
```
Edit .env.local with your community settings (see Environment Variables)
Run the development server
```
pnpm dev
# or
npm run dev
# or
yarn dev
```
Open your browser

Navigate to http://localhost:3000

🌐 Deploy to Vercel (No Coding Required)

Perfect for community managers who want to deploy without touching code!

Step 1: Create a GitHub Account (if you don't have one)

Go to github.com
Click Sign up in the top right
Follow the prompts to create your account
Verify your email address

Step 2: Fork This Repository

Log in to GitHub with your account
Visit this repository: github.com/bgrana75/mycommunity
Click the Fork button in the top right corner
Click Create fork (keep all default settings)
Wait for GitHub to create your copy (this takes about 10 seconds)
You now have your own copy at github.com/YOUR-USERNAME/mycommunity

Step 3: Create a Vercel Account

Go to vercel.com
Click Sign Up in the top right
Choose Continue with GitHub
Authorize Vercel to access your GitHub account
Complete your profile (name, etc.)

Step 4: Deploy Your Site

From your Vercel dashboard, click Add New Project
Import your forked repository:
- You'll see a list of your GitHub repositories
- Find mycommunity and click Import
Configure your project:
- Project Name: Choose a name (e.g., my-hive-community)
- Framework Preset: Next.js (should be auto-detected)
- Root Directory: ./ (leave as default)
- Environment Variables: Click Add and enter these (see detailed explanations below):
```
NEXT_PUBLIC_THEME=forest
NEXT_PUBLIC_HIVE_COMMUNITY_TAG=hive-123456
NEXT_PUBLIC_HIVE_SEARCH_TAG=hive-123456
NEXT_PUBLIC_HIVE_USER=yourusername
HIVE_POSTING_KEY=posting_private_key_here_ //used for uploading images
```
Click Deploy
Wait 2-3 minutes for the build to complete
Your site is live! 🎉

Step 5: Access Your Site

Vercel will give you a URL like: my-hive-community.vercel.app
You can add a custom domain later in Vercel settings

Step 6: Making Updates

When you want to make changes:

Edit files on GitHub:
- Go to your forked repository on GitHub
- Navigate to the file you want to edit
- Click the pencil icon (Edit this file)
- Make your changes
- Click Commit changes
Automatic deployment:
- Vercel automatically detects changes
- Your site rebuilds in 2-3 minutes
- No need to do anything else!

🔧 Environment Variables Explained

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

Required Variables

`NEXT_PUBLIC_THEME`

What it does: Sets the color scheme and styling of your site
Options: hivebr, nounish, cannabis, mengao, bluesky, hacker, forest, windows95
Example: NEXT_PUBLIC_THEME=hivebr
How to change: Just type one of the theme names above

`NEXT_PUBLIC_HIVE_COMMUNITY_TAG`

What it does: Sets which Hive community's posts to show
Format: hive-XXXXXX (6 digits)
Example: NEXT_PUBLIC_HIVE_COMMUNITY_TAG=hive-173115
How to find:

Go to your community on Hive (e.g., PeakD)
Look at the URL: peakd.com/c/hive-173115/created
Copy the hive-XXXXXX part

`NEXT_PUBLIC_HIVE_SEARCH_TAG`

What it does: Tag used for searching/filtering posts
Format: Usually the same as your community tag
Example: NEXT_PUBLIC_HIVE_SEARCH_TAG=hive-173115
Note: Keep this the same as NEXT_PUBLIC_HIVE_COMMUNITY_TAG unless you have a specific reason

`NEXT_PUBLIC_HIVE_USER`

What it does: Your Hive username for posting (optional for read-only sites)
Example: NEXT_PUBLIC_HIVE_USER=yourusername
Note: Don't include the @ symbol

Optional Variables

`NEXT_PUBLIC_DISPLAY_CURRENCY`

What it does: Shows post payouts in your preferred currency instead of HBD/USD
Options: Leave empty for HBD/USD, or use: BRL, EUR, GBP, JPY, AUD, CAD, CHF, CNY, INR
Example: NEXT_PUBLIC_DISPLAY_CURRENCY=BRL (for Brazilian Reals)
Default: Empty (displays as HBD/USD with $ symbol)
Note: Exchange rates are cached for 6 hours to minimize API calls. HBD is treated as $1 USD when no currency is specified.

`HIVE_POSTING_KEY`

What it does: needed for signing the image files to upload to hive.blog Example: HIVE_POSTING_KEY=5JxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxQ
⚠️ WARNING: Never share this key! Only use in secure server environments.
Note: Most users don't need this - Keychain handles authentication

Example .env.local File

# Theme Selection
NEXT_PUBLIC_THEME=hivebr

# Community Settings
NEXT_PUBLIC_HIVE_COMMUNITY_TAG=hive-173115
NEXT_PUBLIC_HIVE_SEARCH_TAG=hive-173115

# Your Hive Username
NEXT_PUBLIC_HIVE_USER=yourusername

HIVE_POSTING_KEY=5Jxxxxxxxxxxxxxxxxxxxxxxxxxxx

🎨 Customization Guide

Changing Themes

Via Environment Variable (Easiest):
- Update NEXT_PUBLIC_THEME in .env.local
- Restart your dev server or redeploy

Creating a Custom Theme:

// Create: themes/myTheme.ts
import { extendTheme } from '@chakra-ui/react';

export const myTheme = extendTheme({
  colors: {
    background: '#your-color',
    text: '#your-color',
    primary: '#your-color',
    secondary: '#your-color',
    accent: '#your-color',
    muted: '#your-color',
    border: '#your-color',
  },
  // ... more customization
});

Then add it to app/providers.tsx:

import { myTheme } from '@/themes/myTheme'

const themeMap = {
  // ... existing themes
  myTheme: myTheme,
}

Changing Community

Update these in .env.local:

NEXT_PUBLIC_HIVE_COMMUNITY_TAG - Your community's tag
NEXT_PUBLIC_HIVE_SEARCH_TAG - Same as above (usually)

Customizing the Logo/Avatar

The community avatar is automatically fetched from the Hive blockchain using your community tag. To change it, update your community's profile image on Hive.

📁 Project Structure

mycommunity/
├── app/                        # Next.js 14 app directory
│   ├── layout.tsx             # Root layout with providers
│   ├── page.tsx               # Home page (snaps feed)
│   ├── blog/                  # Blog posts pages
│   ├── compose/               # Create post page
│   └── [...slug]/             # Dynamic routes
├── components/                 # React components
│   ├── homepage/              # Feed, snaps, composer
│   ├── blog/                  # Blog post components
│   ├── profile/               # User profile pages
│   ├── wallet/                # Wallet & transactions
│   ├── layout/                # Header, sidebar, navigation
│   └── shared/                # Reusable components
├── hooks/                      # Custom React hooks
│   ├── useSnaps.ts            # Snaps feed logic
│   ├── usePosts.ts            # Blog posts logic
│   └── useHiveAccount.ts      # Account data
├── lib/                        # Utility functions
│   ├── hive/                  # Hive blockchain integration
│   └── utils/                 # Helper functions
├── themes/                     # Theme definitions
│   ├── hivebr.ts
│   ├── nounish.ts
│   └── ... (8 themes total)
├── types/                      # TypeScript type definitions
├── public/                     # Static assets
└── .env.local                 # Environment configuration

🛠️ Common Tasks

Update Your Community's Posts

Posts are automatically fetched from the Hive blockchain based on your NEXT_PUBLIC_HIVE_COMMUNITY_TAG. No manual updates needed!

Add a Custom Domain (Vercel)

Go to your project in Vercel dashboard
Click Settings → Domains
Add your domain and follow DNS instructions
Wait for DNS propagation (5-30 minutes)

Change the Site Title/Meta Tags

Edit app/layout.tsx:

export const metadata = {
  title: 'Your Community Name',
  description: 'Your community description',
}

🤝 Contributing

Contributions are welcome! Here's how:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Guidelines

Use TypeScript for new files
Follow the existing code style
Test your changes locally before submitting
Update documentation if needed

📚 Tech Stack

Framework: Next.js 14 (App Router)
UI Library: Chakra UI
Blockchain: Hive via @hiveio/dhive
Authentication: Aioha (Keychain, HiveAuth, Ledger, PeakVault)
Styling: Tailwind CSS
Language: TypeScript
Package Manager: pnpm (or npm/yarn)

🐛 Troubleshooting

Site not loading after deployment

Check environment variables are set correctly in Vercel
Verify your community tag exists on Hive
Check Vercel build logs for errors

Posts not showing

Confirm NEXT_PUBLIC_HIVE_COMMUNITY_TAG is correct
Check if your community has posts with that tag
Try a different tab (All or Following)

Theme not applying

Verify theme name is spelled correctly in .env.local
Check if theme exists in themes/ folder
Restart development server after changing .env

"Following" tab not working

You must be logged in via Keychain or another provider
Check if you're following any users
Try refreshing the page

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Built on the Hive blockchain
Community-driven development

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Hive: Contact @mengao

Made with ❤️ for the Hive community

Name		Name	Last commit message	Last commit date
Latest commit History 150 Commits
.vscode		.vscode
app		app
components		components
contexts		contexts
hooks		hooks
lib		lib
public		public
scripts		scripts
themes		themes
types		types
.copilot-instructions.md		.copilot-instructions.md
.env.local.example		.env.local.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

hive-br/mycommunity

Folders and files

Latest commit

History

Repository files navigation