About Warehouse Visualizer

The Warehouse Visualizer is a modern web application designed to simplify warehouse location management through intuitive visualization and efficient navigation.

In logistics warehouses, locations are identified using a structured addressing system. Each address consists of four essential components:

  • Cell: A major section of the warehouse (numbered 1-4)
  • Aisle: A numbered corridor within a cell (e.g., 016)
  • Position: A specific location along the aisle (e.g., 0026)
  • Level: The vertical position, including picking level (00) and storage levels in multiples of 10 (10, 20, 30, 40)

For example, the address 4-016-0026-30 represents:

  • Cell 4
  • Aisle 16
  • Position 26
  • Level 30 (third level)

Project Purpose

This visualization tool helps warehouse staff to:

  • Quickly understand the structure of warehouse addresses
  • Visualize the relative position of locations
  • Validate warehouse addresses
  • Navigate through different warehouse locations efficiently
  • Manage inventory locations more effectively

Warehouse Structure

Our warehouse system is organized into cells, each with its unique configuration:

  • Cell 1: 12 aisles with 100 positions each
  • Cell 2: 15 aisles with 100 positions each
  • Cell 3: 20 aisles with 100 positions each
  • Cell 4: 16 aisles with 100 positions each

Each position can have a picking level (00) and up to 4 storage levels (10, 20, 30, 40), providing flexible options for both order picking and storage operations.

Technologies

  • Astro

    Modern static site builder providing excellent performance and routing capabilities

  • React

    Component-based library for building interactive user interfaces with efficient state management

  • TypeScript

    Strongly typed programming language ensuring robust code quality and better developer experience

  • Tailwind CSS

    Utility-first CSS framework for building modern and responsive user interfaces

  • Prisma

    Next-generation ORM for Node.js and TypeScript, providing type-safe database access and migrations

  • Perplexity AI

    Advanced AI technology used for generating comprehensive documentation and improving code quality

Key Features

  • Cell Overview

    A comprehensive view of all warehouse cells, providing quick access to each cell's data and statistics.

  • Cell View

    Insightful exploration of all aisles within a selected cell, showing aisle-specific data and allowing navigation to specific aisles.

  • Aisle View

    Detailed visualization of positions and levels in each aisle, facilitating efficient location tracking and management.

  • Location View

    Accurate and interactive representation of a specific location within the warehouse, with automatic scrolling to relevant content.

Navigation Structure

The application uses a logical URL structure reflecting the warehouse hierarchy:

/warehouse - Cells overview

/warehouse/cell/[cell] - Single cell view

/warehouse/cell/[cell]/aisle/[aisle] - Aisle view

/warehouse/cell/[cell]/aisle/[aisle]/[location] - Specific location

Technical Implementation

Address Validation

Robust validation system ensuring all warehouse addresses follow the correct format and constraints, with proper error handling and user feedback.

Responsive Design

Mobile-first approach ensuring the application works seamlessly across all device sizes, from smartphones to desktop monitors.

Performance Optimization

Efficient rendering and state management, with features like automatic scrolling to relevant content and smart content pagination.

Type Safety

Comprehensive TypeScript implementation ensuring robust code quality and preventing common runtime errors.