Logbytes Assessment

Overview

This project is a modern web application built with React, TypeScript, and Vite. It visualizes and interacts with hexagonal grids on a map using the H3 geospatial indexing system and Leaflet for mapping. The application is styled with Tailwind CSS and leverages a modular, maintainable code structure.

---

Features

• Interactive Map: Displays a map using Leaflet, allowing users to interact with hexagonal cells.
• Hexagonal Grid Overlay: Dynamically overlays H3 hexagons on the map, updating with zoom and pan.
• Cell Selection: Users can select hex cells; selection logic supports adjacency and parent/child relationships.
• Responsive UI: Uses Tailwind CSS for a modern, responsive design.
• Type Safety: Built with TypeScript for robust type checking.
• Fast Development: Powered by Vite for instant hot module reloads and fast builds.

---

Code Structure

logbytes-assesment/
├── public/                # Static assets
├── src/                   # Source code
│   ├── App.tsx            # Main app component
│   ├── App.css            # App-level styles
│   ├── HexGrid.tsx        # Hex grid overlay logic
│   ├── Map.tsx            # Map container and logic
│   ├── main.tsx           # App entry point
│   ├── index.css          # Global styles (Tailwind)
│   └── assets/            # Static assets (e.g., logos)
├── index.html             # HTML entry point
├── package.json           # Project metadata and scripts
├── vite.config.ts         # Vite configuration
├── tsconfig*.json         # TypeScript configuration
└── ...

---

Main Components

src/main.tsx

• Entry point. Mounts the React app to the DOM.

src/App.tsx

• Root component. Renders the Map component.

src/Map.tsx

• Sets up the Leaflet map and manages selected hex cells.
• Passes selection state and toggle logic to HexGrid.
• Uses getH3Resolution to map zoom levels to H3 resolutions.

src/HexGrid.tsx

• Computes visible H3 cells for the current map viewport and zoom.
• Handles selection logic:
  • Selecting/deselecting cells
  • Highlighting adjacent and parent/child cells
• Renders hexagons as Leaflet polygons with interactive styles.

---

How It Works

1. Map Initialization: The app loads a Leaflet map centered at a default location.
2. Hex Grid Overlay: As the user pans/zooms, HexGrid recalculates which H3 cells are visible and overlays them.
3. Selection Logic: Clicking a hex toggles its selection. Adjacency and parent/child relationships are visually indicated.
4. Styling: Tailwind CSS and custom styles provide a clean, modern look.

---

Scripts

• pnpm dev — Start development server
• pnpm build — Build for production
• pnpm preview — Preview production build
• pnpm lint — Run ESLint

---

Dependencies

• React & ReactDOM — UI framework
• Leaflet & react-leaflet — Map rendering
• h3-js — Hexagonal grid geospatial indexing
• Tailwind CSS — Utility-first CSS framework
• Vite — Build tool
• TypeScript — Type safety

---

Development

1. Install dependencies: pnpm install
2. Start dev server: pnpm dev
3. Open http://localhost:5173 in your browser

---

Customization

• Map Center/Zoom: Change defaults in src/Map.tsx.
• Grid Logic: Adjust H3 resolution mapping in getH3Resolution.
• Styling: Edit src/App.css or src/index.css.