kiwik - mvp

overview

kiwik is a community-driven hub where you can:

• Turn ideas into products and solutions
• Collaborate with builders and founders
• Access microfunding to scale your impact

This mvp showcases the platform's features and provides an entry point for users to join the regenerative community. This is a Next.js project for the kiwik landing page, bootstrapped with create-onchain --mini, configured with:

how it's built

• MiniKit - Easiest way to build Mini Apps on Base
• OnchainKit - React components and TypeScript utilities for onchain apps
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Re-usable components built using Radix UI and Tailwind CSS
• Next.js - React framework for production

getting started

Prerequisites

• Node.js 22+ or Bun
• An Upstash Redis account (for notifications and webhooks)
• Coinbase Developer Platform API key

Installation

1. Clone and install dependencies:

git clone <repository-url>
cd kiwik
bun install

2. Set up environment variables:

Copy the example environment file and configure the required variables:

cp .env.example .env.local

Configure the following environment variables:

# OnchainKit configuration
NEXT_PUBLIC_ONCHAINKIT_API_KEY=your_coinbase_api_key
NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=kiwik

# App metadata
NEXT_PUBLIC_URL=https://your-domain.com
NEXT_PUBLIC_ICON_URL=https://your-domain.com/icon.png
NEXT_PUBLIC_APP_ICON=https://your-domain.com/icon.png
NEXT_PUBLIC_APP_SUBTITLE="Cultivando ideas y generando impacto"
NEXT_PUBLIC_APP_DESCRIPTION="talento colectivo que cultiva ideas y genera impacto"
NEXT_PUBLIC_APP_SPLASH_IMAGE=https://your-domain.com/splash.png
NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR=#10B981
NEXT_PUBLIC_APP_PRIMARY_CATEGORY=social
NEXT_PUBLIC_APP_HERO_IMAGE=https://your-domain.com/hero.png
NEXT_PUBLIC_APP_TAGLINE="descubre el jardín infinito de la regeneración"
NEXT_PUBLIC_APP_OG_TITLE="kiwik | jardín infinito de regeneración"
NEXT_PUBLIC_APP_OG_DESCRIPTION="talento colectivo que cultiva ideas y genera impacto"
NEXT_PUBLIC_APP_OG_IMAGE=https://your-domain.com/og-image.png

# Farcaster Frame configuration (generated by CLI)
FARCASTER_HEADER=your_farcaster_header
FARCASTER_PAYLOAD=your_farcaster_payload
FARCASTER_SIGNATURE=your_farcaster_signature

# Redis configuration (for notifications and webhooks)
REDIS_URL=your_upstash_redis_url
REDIS_TOKEN=your_upstash_redis_token

3. Start the development server:

bun run dev

Open http://localhost:3000 to view the landing page.

Features

Landing Page Sections

• Hero Section: Main value proposition with call-to-action
• What is kiwik?: Feature overview with responsive accordion on mobile
• Features: Grid showcasing core platform capabilities
• How It Works: Step-by-step process timeline
• Who is kiwik for?: Target audience personas
• Testimonials: Community feedback carousel
• Call to Action: Final conversion section
• Footer: Navigation and social links

Technical Features

• Responsive Design: Mobile-first approach with Tailwind CSS
• Component Library: shadcn/ui components with consistent theming
• MiniKit Integration: Ready for Frame deployment in Base App
• OnchainKit Components: Blockchain-ready UI components
• Accessibility: ARIA standards and WCAG compliance
• SEO Optimized: Meta tags and semantic HTML structure

MiniKit Provider

The app is wrapped with MiniKitProvider configured with:

• OnchainKit integration for blockchain functionality
• Frame SDK context for Base App compatibility
• Automatic safe area insets handling
• Notification proxy setup

Deployment

Vercel (Recommended)

1. Deploy to Vercel:

npx vercel --prod

2. Configure environment variables in Vercel dashboard

3. Update domain in environment variables:

   • Update NEXT_PUBLIC_URL to your Vercel domain
   • Regenerate Farcaster account association if needed:

npx create-onchain --manifest

Other Hosting Providers

The app can be deployed to any hosting provider that supports Next.js applications. Ensure Redis endpoints are accessible from your hosting environment.

Customization

Design System

• Theme: Modify src/styles/globals.css for custom color schemes
• Components: Extend shadcn/ui components in src/components/ui/
• Typography: Font configuration in src/app/layout.tsx

Content

• Copy: Update Spanish content in component files
• Images: Replace placeholder images with brand assets
• Links: Update navigation and social media links in footer

Adding New Sections

1. Create new component in src/components/sections/
2. Import and add to src/app/page.tsx
3. Ensure responsive design and accessibility standards

Development

Available Scripts

bun run dev          # Start development server
bun run build        # Build for production
bun run start        # Start production server
bun run lint         # Run ESLint
bun run type-check   # Run TypeScript checks

Project Structure

src/
├── app/                 # Next.js app directory
├── components/
│   ├── sections/       # Landing page sections
│   └── ui/             # shadcn/ui components
├── lib/                # Utilities and configurations
├── providers/          # Context providers
└── styles/             # Global styles and themes

Learn More

• MiniKit Documentation
• OnchainKit Documentation
• shadcn/ui Documentation
• Next.js Documentation
• Tailwind CSS Documentation

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes following the existing code style
4. Test thoroughly on mobile and desktop
5. Submit a pull request

License

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