Seeker Magazine - Interactive Digital Flipbook

An interactive digital magazine viewer built as a Farcaster mini app, featuring a realistic page-flipping experience with Web3 integration for NFT minting.

Live Demo: seeker-indol.vercel.app

Overview

Seeker is a full-featured digital magazine viewer that combines modern web technologies with blockchain integration. It transforms a 122-page digital magazine into an engaging, interactive experience with smooth page transitions, touch/swipe navigation, and integrated social features.

Key Features

• Realistic Page Flipping: Smooth, physics-based page turning animation using react-pageflip
• Mobile-First Design: Touch gestures, swipe navigation, and responsive layout
• Interactive Scrubber: Jump to any page instantly with a progress bar
• Web3 Integration: Direct NFT minting through Manifold marketplace
• Farcaster Integration: Seamless profile viewing and social sharing
• Progressive Loading: Smart image preloading for optimal performance
• Production Deployment: Fully deployed on Vercel with CDN optimization

Technical Stack

Core Technologies

• React 18.3.1 - Modern React with hooks and concurrent features
• TypeScript 5.8.3 - Type-safe development with strict mode
• Vite 5.2.11 - Lightning-fast build tool and dev server

Web3 & Blockchain

• Wagmi 3.0.1 - Type-safe Ethereum library with React hooks
• Viem 2.39.3 - Lightweight Ethereum utilities
• Farcaster SDK - Mini app integration with social features
• Base & Ethereum Mainnet - Multi-chain support via Wagmi

UI/UX Libraries

• react-pageflip 2.0.3 - Realistic flipbook animations
• react-zoom-pan-pinch 3.7.0 - Touch gesture support
• TanStack Query 5.45.1 - Server state management and caching

Developer Experience

• Biome 1.9.4 - Fast linting and code formatting
• pnpm - Efficient package management
• TypeScript Strict Mode - Enhanced type safety and code quality

Architecture & Design Decisions

Component Architecture

The app uses a focused component hierarchy:

App (Root)
└── MagazineViewer (Main Component)
    ├── HTMLFlipBook (Third-party flipbook wrapper)
    │   └── Page Components (122 instances)
    ├── Header (Logo, Social, Mint buttons)
    └── Scrubber (Page navigation)

State Management

• Local State: Used for UI state (current page, loading status)
• Refs: Touch coordinates and flipbook instance management
• TanStack Query: Ready for future API data fetching

Performance Optimizations

1. Progressive Image Loading: Preloads first 5 pages for instant interactivity
2. Lazy Loading: Remaining images load on-demand during browsing
3. Memoization: useCallback prevents unnecessary re-renders
4. forwardRef Pattern: Efficient ref forwarding to page components

Web3 Configuration

Type-safe Wagmi configuration with multi-chain support:

// seeker/src/wagmi.ts
export const config = createConfig({
  chains: [base, mainnet],
  connectors: [miniAppConnector()],
  transports: { /* HTTP transports */ }
});

Farcaster Mini App Integration

The app registers as a Farcaster mini app via .well-known/farcaster.json with:

• Account association verification
• App metadata and branding
• Deep linking configuration

Project Structure

seeker/
├── src/
│   ├── App.tsx              # Root component with Web3 providers
│   ├── MagazineViewer.tsx   # Main viewer logic (180 LOC)
│   ├── wagmi.ts             # Web3 configuration
│   ├── App.css              # Component styling
│   ├── index.css            # Global styles & animations
│   └── main.tsx             # React entry point
├── public/
│   ├── .well-known/
│   │   └── farcaster.json   # Mini app configuration
│   ├── seekerImages/        # 122 magazine pages (JPEG)
│   └── [branding assets]    # Logo, icons, splash screens
├── package.json             # Dependencies & scripts
├── vite.config.ts           # Build configuration
├── tsconfig.json            # TypeScript configuration
└── biome.json               # Linting & formatting rules

Getting Started

Prerequisites

• Node.js 18.x or higher
• pnpm 10.23.0 or higher (can use npm/yarn as alternative)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/seeker.git
cd seeker/seeker

2. Install dependencies:

pnpm install
# or
npm install
# or
yarn install

Local Development

Start the development server:

pnpm dev

The app will be available at http://localhost:5173

Building for Production

1. Lint your code:

pnpm lint

2. Build the production bundle:

pnpm build

3. Preview the production build locally:

pnpm preview

The optimized build will be in the dist/ directory.

Testing Locally

Manual Testing Checklist

Desktop Testing

1. Page Navigation:

   • Click page edges to flip forward/backward
   • Use the scrubber to jump to specific pages
   • Test smooth animations during transitions

2. Interactive Elements:

   • Click logo to view Farcaster profile
   • Click X button to open Twitter
   • Click "Mint on Manifold" button

3. Performance:

   • Verify first 5 pages load quickly
   • Check smooth scrolling through all 122 pages

Mobile Testing

1. Touch Gestures:

   • Swipe left/right to turn pages
   • Test pinch-to-zoom functionality
   • Verify responsive layout on various screen sizes

2. Mobile Navigation:

   • Test scrubber with touch input
   • Verify all buttons are easily tappable

Web3 Testing

While Web3 features work best in Farcaster's environment, you can test locally:

• Check that Wagmi configuration loads without errors
• Verify console shows proper chain connections (Base, Mainnet)

Browser Compatibility

Tested and working on:

• Chrome/Edge (latest)
• Safari (latest)
• Firefox (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Deployment

This project is configured for Vercel deployment:

1. Push to your GitHub repository
2. Import project in Vercel
3. Vercel will auto-detect Vite configuration
4. Deploy with default settings

The app includes:

• Automatic CDN distribution for images
• Server-side rendering ready
• Optimized production builds

Code Quality

Linting

pnpm lint

Uses Biome for:

• TypeScript type checking
• Code style enforcement
• Best practices validation

TypeScript Configuration

• Strict mode enabled
• ES2020 target
• Module resolution optimized for Vite
• React JSX support

Development Highlights

This project demonstrates:

1. Modern React Patterns: Hooks, refs, memoization, and component composition
2. TypeScript Proficiency: Type-safe props, strict mode, module augmentation
3. Web3 Integration: Wagmi configuration, multi-chain support, Farcaster SDK
4. Performance Engineering: Progressive loading, lazy loading, optimization
5. Production Deployment: Vercel hosting, CDN optimization, build tooling
6. Developer Experience: Fast dev server, hot reload, linting automation
7. Mobile-First Design: Touch gestures, responsive layouts, mobile optimization

Future Enhancements

Potential improvements:

• Add keyboard navigation (arrow keys)
• Implement fullscreen mode
• Add page bookmarking
• Create table of contents/chapter navigation
• Add social sharing features
• Implement analytics tracking
• Add unit/integration tests

License

Code - MIT License

The source code in this repository is available under the MIT License. You are free to use, modify, and distribute the code for learning or building your own projects.

Magazine Content - All Rights Reserved

Important: The magazine content (all images in seeker/public/seekerImages/ and brand assets) is NOT covered by the MIT License and remains fully copyrighted. The magazine content is provided in this repository solely to demonstrate the functionality of the mini app.

You may NOT:

• Reproduce, copy, or redistribute the magazine images
• Use the magazine content in other projects
• Create derivative works from the magazine content

For full details, see the LICENSE file.

Contact

• Farcaster: @seeker_magazine (FID: 1019537)
• Twitter/X: @seeker_magazine
• NFT Collection: Manifold

---

Built with modern web technologies and deployed on Vercel.