ViperView

Viper View is an AI-powered retail inventory system that visualizes stock in real time using an interactive store map, restock smarter, reduce waste, and prevent outages with insights.

Comment

Viper View – Retail Inventory Management System

UGAHacks 11 Submission
Built solo as a hands-on learning project focused on Spring Boot and modern full-stack development

Overview

Viper View is a retail inventory management system designed for small to medium-sized stores. It tracks inventory across both front shelves and back storage while providing analytics and AI-powered insights to help staff make better restocking and ordering decisions.

Rather than just counting products, the system focuses on understanding inventory flow, reducing waste, and making store operations easier to visualize and manage in real time.

Inspiration

Retail inventory problems are harder than they look. Overstocking leads to waste, understocking leads to lost sales, and manual tracking is often inaccurate. I wanted to explore how a modern backend system combined with real-time dashboards and AI analysis could support smarter day-to-day decisions.

On a personal level, this project was about learning Spring Boot properly by building a realistic, end-to-end application instead of following tutorials or relying heavily on AI-generated code.

What It Does

Viper View manages inventory across two physical locations: front shelves (customer-facing stock) and back storage (warehouse stock). Every action updates the system in real time and is recorded for analytics and auditing.

Inventory Operations

  • Process customer checkouts (decrements front stock)
  • Receive supplier shipments (adds to back storage)
  • Restock shelves from back storage
  • Log waste from damaged, expired, or donated items with location tracking

All operations are recorded as transactions, creating a complete inventory history.

Analytics Dashboard

The dashboard provides:

  • Real-time metrics for units sold, restocked, discarded, and total transactions
  • Charts showing inventory distribution by product
  • Transaction breakdowns by type
  • Low-stock alerts for critical items
  • A live activity feed of recent inventory events

AI-Powered Insights

Google Gemini is integrated to analyze inventory and transaction data. It provides:

  • Global inventory insights and urgent action recommendations
  • Per-product predictions including:
    • Sales velocity
    • Estimated days until shelves are empty
    • Estimated days until back storage is depleted
    • Waste rate analysis
    • Specific restock or reorder recommendations with suggested quantities

The AI is used as a decision-support tool rather than an automated controller.

Interactive Store Floor View

Viper View includes a digital twin of the store layout:

  • SVG-based interactive floor plan
  • Color-coded product indicators based on inventory health
  • Separate status for front shelves and back storage
  • Visual urgency heatmaps highlighting problem areas
  • Filters for critical items, restock needs, and reorder needs
  • Clickable products with detailed information and quick actions
  • Drag-and-drop layout editor with persistent positioning

This feature makes inventory issues visible at a glance instead of hidden in tables.

Sustainability Features

The system includes waste and donation tracking:

  • Logs damaged, expired, or donated inventory
  • Donation workflow connected to local shelters in the Athens, GA area
  • Data structured to support sustainability and ESG reporting

Technical Architecture

Backend

  • Java 17 with Spring Boot
  • PostgreSQL database hosted on Supabase (AWS)
  • Spring Data JPA with Hibernate
  • RESTful JSON APIs (13 endpoints)
  • Google Gemini API integration
  • Transaction management using @Transactional

The backend follows a clean layered architecture:

  • Controllers handle routing
  • Services contain business logic
  • Repositories manage data access

Special care was taken to ensure data consistency during multi-step operations like restocking.

Database Design

  • products: Core inventory data including front stock, back stock, waste, and reorder thresholds
  • transactions: Full audit trail of inventory events
  • waste_logs: Dedicated sustainability tracking with timestamps and locations
  • store_layout: Coordinates for mapping products to the digital store layout

Frontend

  • React with TypeScript
  • Vite for fast development and builds
  • Tailwind CSS for styling
  • Recharts for analytics visualizations
  • html5-qrcode for barcode scanning
  • Axios-based centralized API client

The frontend is fully type-safe, with consistent models shared across components.

How I Built It

Backend Development

  1. Set up Spring Boot with PostgreSQL integration
  2. Designed JPA entities with explicit column mappings
  3. Implemented repositories using Spring Data JPA
  4. Built a service layer containing all business logic
  5. Developed and tested REST endpoints
  6. Integrated Google Gemini with structured prompts
  7. Implemented backend logic for digital twin analytics

Frontend Development

  1. Initialized a React + TypeScript project with Vite
  2. Built a centralized API service layer
  3. Created modular components for inventory, analytics, and floor view
  4. Integrated charts for data visualization
  5. Added barcode scanning support
  6. Built the interactive SVG-based store layout
  7. Refined responsive design and UI consistency

Challenges

  • Debugging Hibernate and PostgreSQL column mismatches
  • Ensuring atomic inventory operations with transactions
  • Designing effective AI prompts for actionable insights
  • Keeping inventory logic consistent across backend and frontend
  • Handling SVG coordinate transforms for drag-and-drop layout editing

Accomplishments

  • Built a complete full-stack application as a solo developer
  • Designed a production-style PostgreSQL schema with audit trails
  • Integrated AI for real-time inventory intelligence
  • Created a digital twin store visualization
  • Maintained strong type safety across the frontend
  • Implemented transaction-safe backend operations
  • Added sustainability-focused features
  • Delivered a fully seeded, demo-ready project

What I Learned

  • Spring Boot architecture and service-layer design
  • JPA and Hibernate ORM fundamentals
  • RESTful API design and transaction management
  • Full-stack data consistency and type safety
  • Real-time dashboard design and visualization
  • Practical AI integration and prompt engineering
  • SVG-based UI interactions and layout systems

What’s Next

  • WebSocket-based real-time updates
  • More advanced AI-driven forecasting
  • Mobile app version with native scanning
  • Predictive supplier ordering
  • Multi-store support
  • Role-based access control
  • Performance scaling with caching and async processing

Reflection

This project represents my approach to learning by building. I focused on understanding Spring Boot and backend architecture deeply while iterating quickly on the frontend. AI tools were used sparingly and intentionally, mainly for debugging and analysis rather than core implementation.

Viper View reflects my growth as a full-stack developer and my ability to design, build, and ship a realistic system that solves real operational problems.

Built for UGAHacks 11
Solo Developer

Built With

  • axios
  • gemini
  • hibernate
  • html5-qrcode
  • intellij-idea
  • java-17
  • lombok
  • maven
  • postgresql-(supabase)
  • react-19
  • react-router-dom
  • recharts
  • spring-boot
  • spring-data-jpa
  • supabase
  • tailwind-css
  • tbd**
  • typescript
  • vite
  • vscode
Share this project:

Updates