KIMO — Hawaii Surf & Travel UI

A Next.js + TypeScript frontend for a Hawaii surf & travel platform. Built with Chakra UI, Framer Motion, and Swiper — featuring category browsing, highlight cards, and responsive layouts.

Built by Rajan Kumar

Features

• Server-side rendered landing page with dynamic categories & highlights
• Responsive sidebar navigation and header
• Swiper-based text carousel and highlight cards
• Chakra UI theming with custom color tokens
• SEO metadata via dedicated SEO component

Tech Stack

Layer	Tools
Framework	Next.js 13, React 18
Language	TypeScript
UI	Chakra UI, Framer Motion
Carousel	Swiper 9

Getting Started

# Install dependencies
yarn install

# Start dev server
yarn dev

Open http://localhost:3000 in your browser.

Project Structure

src/
├── components/     # UI components (Header, Sidebar, Highlights, Categories)
├── hooks/          # Custom hooks (useMediaQuery, useScrollDirection)
├── pages/          # Next.js pages & API routes
├── SEO/            # SEO meta component
├── styles/         # Global CSS
└── types/          # TypeScript interfaces

Scripts

Command	Description
yarn dev	Start development server
yarn build	Production build
yarn start	Start production server
yarn lint	Run ESLint

API

The app fetches data from the KIMO backend:

• GET /v1/categories — surf spot categories
• GET /v1/highlights — featured highlights

License

MIT © Rajan Kumar