Implementing Hive Keychain Login: Building HIVE Frontend - Day 1

in #nextjs • last month

Disclaimer

This probably will not be production application. The process is purely for educational purposes and for my own learning and portfolio.

Welcome to the journey of building TheBuzzApp, a frontend app for the HIVE blockchain. This is the first post of many of learning series where I'll be documenting every step of creating a functional application. So basically this will be learning experience for me, and for readers, if they stumble upon this blog ofcourse.

Motivation

I have few hours every now and then and I usually end up watching bunch of nonsense Reels and Tiktoks. I figured, why not spend time doing something productive.

What We're Building ? TheBuzzApp.

TheBuzzApp, yup kinda lame name but it will have to do. We will be building a sleek, modern frontend for the HIVE blockchain. In this series, I'll be aiming cover from basic setup to advanced stuff during this integration. Let's see how far I will go.

Today's Achievements

1. Logo Design with Canva AI

First things first - every app needs a great logo! Instead of spending hours in design software, I simply used Canva's AI-powered logo generator. The result was okayish logo. It gave me logo with solid background which I quickly removed using this tool. lol
https://removal.ai/

2. Next.js 15 + shadcn/ui Setup (Because I'm too lazy to build my own components.)

Let's be honest - building UI components from scratch is time-consuming. That's why I chose the shadcn/ui + Tailwind CSS . I wont need to spend time building components, which is not the point of the series anyway.

# Initialize Next.js 15 project
npx create-next-app@latest thebuzzapp --typescript --tailwind --eslint --app

# Add shadcn/ui for instant beautiful components
npx shadcn@latest init
npx shadcn@latest add button card input avatar dropdown-menu

Stack we'll be using

  • Next.js 15: Latest features, App Router, and React 19 support
  • shadcn/ui: Copy-paste components that actually look good
  • Tailwind CSS 4: Utility-first styling with modern CSS features
  • TypeScript: Type safety for better developer experience

3. Custom Brand Theming

Even though we're using pre-built components, customization is definitely required, otherwise it will look kinda generic. Anyway, based on the logo color profile we'll have the following theme colors.

/* Brand Colors */
--primary: #0A0E1A;        /* Dark Blue - buttons, headers */
--secondary: #00E6C0;      /* Teal Green - secondary actions */
--accent: #FFD700;         /* Bee Yellow - highlights */
--background: #FFFFFF;     /* Clean white background */

Shadcn/ui makes theme customization quite easy across all components.

4. Building a Professional Navbar

Lets start building a clean, functional navbar inspired by modern social platforms:

Tasks here

  • Logo
  • Search UI
  • Authentication states (signed in/out) using Hive Keychain
  • AuthProvider
  • User avatar with dropdown menu

So, lets create AuthProvider to make working with authentication but easier, and in the future we could extend it. Checkout the code here.
useHook.tsx

Lets use the hook.

export function Navbar() {
  const { user, isAuthenticated, login, logout } = useAuth();
  
  return (
    <nav className="border-b border-border bg-background px-4 py-3">
      {/* Logo, Search, Auth Actions */}
    </nav>
  );
}

5. HIVE Keychain Integration

This is the main task for today. After a quick google search, found the npm package for the keychain integration.

npm install keychain-sdk

Implementation highlights:

import { KeychainSDK, Login, KeychainKeyTypes } from "keychain-sdk";

const login = async (username: string) => {
  const keychain = new KeychainSDK(window);
  
  // Check if Keychain extension is installed
  const isInstalled = await keychain.isKeychainInstalled();
  
  if (!isInstalled) {
    alert("Please install HIVE Keychain extension");
    return;
  }

  // Perform login with message signing
  const loginData: Login = {
    username: username,
    message: JSON.stringify({ login: Date.now().toString() }),
    method: KeychainKeyTypes.posting,
    title: "Login to TheBuzzApp"
  };

  const result = await keychain.login(loginData);
  // Handle success/error...
};

Cool we've build a basic layout.

What's Next?

In the upcoming posts, I'll try Fetching posts, users, and communities

Visit https://thebuzzapp.vercel.app/ for demo.

Demo URL: https://thebuzzapp.vercel.app/
Repository: https://github.com/the100dev/thebuzzapp

Disclaimer: This will probably not be production application. The process is purely for educational purposes and for my own learning and portfolio.

#react #hive #blockchain #webdevelopment #typescript #tailwindcss #frontend #tutorial #authentication
last month in #nextjs by
$41.56
  • Past Payouts $41.56
  • - Author $20.79
  • - Curators $20.77
148 votes
Reply 5
Sort:  
  • Trending
    • [-]
     last month  

    Wouldn't really say the name is lame, can already hear its slogan being "What's buzzing" :D

    gl hf!

    [-]
     last month  

    That'd be pretty cool tbh. 😊 Thank you.

    $0.00
      Reply
      [-]
       last month  

      Congratulations @the100! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

      You received more than 4000 upvotes.
      Your next target is to reach 4250 upvotes.

      You can view your badges on your board and compare yourself to others in the Ranking
      If you no longer want to receive notifications, reply to this comment with the word STOP

      $0.00
        Reply