TL;DR

ShopShare is a modern, collaborative shopping list web app built with React 19, TypeScript, and Vite. It features a dual-view system (Add To List + Shopping List), drag-and-drop functionality, smart categorization, and mobile-first design. Perfect for families, roommates, and groups who want to coordinate their grocery shopping together.

Key Features:

  • 📱 Mobile-first responsive design with touch-friendly interactions
  • 🛒 Dual-view system for building and shopping from lists
  • 🏷️ Smart categorization with storage locations and priority levels
  • 🔄 Drag-and-drop reordering with @dnd-kit
  • 📋 Multiple list management with export/import capabilities
  • 🔍 Real-time search and smart suggestions
  • 💾 Local storage persistence with backup/restore

Tech Stack: React 19, TypeScript, Vite, Tailwind CSS, Radix UI, @dnd-kit, Local Storage

Project Overview

ShopShare is a modern, collaborative shopping list web application built with React, TypeScript, and Vite. It's designed to help families, roommates, and groups manage their shopping lists together with an intuitive, mobile-first interface.

Key Features

🛒 Core Shopping List Management

  • Dual-View System: Two main tabs - "Add To List" (for building your list) and "Shopping List" (for active shopping)
  • Smart Item Organization: Items can be categorized, prioritized, and assigned storage locations
  • Drag & Drop Functionality: Reorder items using @dnd-kit for intuitive list management
  • Check-off System: Mark items as purchased with visual feedback
  • Quantity & Units: Support for quantities (e.g., "6 bananas", "2 liters milk")

📱 Mobile-First Design

  • Responsive Interface: Optimized for both desktop and mobile devices
  • Touch-Friendly: Drag and drop works seamlessly on touch devices
  • Bottom Navigation: Quick tab switching with floating action button
  • Drawer Components: Mobile-optimized search and edit interfaces

🏷️ Advanced Organization

  • Categories: Pre-built categories (Fruits, Vegetables, Dairy, etc.) with custom category support
  • Storage Locations: Track where items are stored (Fridge, Pantry, etc.)
  • Priority Levels: "Buy Now", "Soon", "Later" with color coding
  • Notes: Add detailed notes to any item
  • Multiple Sorting Options: Sort by category, storage location, priority, alphabetically, or custom order

📋 List Management

  • Multiple Lists: Create and manage multiple shopping lists
  • List Operations: Create, edit, delete, merge, export, and import lists
  • Trash System: Soft delete with 30-day retention and restore capability
  • Default Items: New lists come with sample items to get started

🔍 Smart Search & Discovery

  • Real-time Search: Filter items as you type
  • Quick Add: Add items directly from search results
  • Item History: Track frequently used items
  • Smart Suggestions: Based on previous shopping patterns

Technical Architecture

Frontend Stack

  • React 19 with TypeScript for type safety
  • Vite for fast development and building
  • Tailwind CSS for styling with custom design system
  • Radix UI components for accessible UI primitives
  • Lucide React for consistent iconography

State Management

  • Local Storage: Persistent data storage for lists, items, and preferences
  • React Hooks: Custom hooks for categories, priorities, and storage locations
  • Context API: For theme and global state management

Key Libraries

  • @dnd-kit: Modern drag and drop functionality
  • React Router DOM: Client-side routing
  • UUID: Unique identifier generation
  • Sonner: Toast notifications
  • Vaul: Drawer components

Data Structure

interface itemType {
  id: string
  customPosition: number
  itemName: string
  checked: boolean
  onList: boolean
  quantity?: number
  unit?: string
  category: string
  storedIn: string
  priority: string
  notes?: string
}

User Experience Features

Intuitive Workflow

  1. Add Items: Use the "Add To List" tab to build your shopping list
  2. Organize: Categorize, prioritize, and add details to items
  3. Shop: Switch to "Shopping List" tab for active shopping
  4. Check Off: Mark items as purchased with visual feedback
  5. Reorder: Drag items to prioritize your shopping route

Collaboration Ready

  • Shared Lists: Multiple users can access the same list
  • Real-time Updates: Changes sync across devices via localStorage
  • Export/Import: Share lists via JSON files
  • Merge Lists: Combine multiple lists into one

Accessibility

  • Keyboard Navigation: Full keyboard support
  • Screen Reader Friendly: Proper ARIA labels and semantic HTML
  • High Contrast: Dark mode support
  • Touch Targets: Adequate size for mobile interaction

Future Roadmap

The project includes planned features like:

  • Drag Handles: Improved mobile drag and drop with dedicated handles
  • Settings Page: User preferences and customization
  • Customizable Views: Show/hide columns based on user preference
  • Onboarding: Interactive tutorial for new users
  • Database Migration: Moving from localStorage to proper database

Development Highlights

Performance Optimizations

  • Lazy Loading: Components load on demand
  • Efficient Re-renders: Optimized React component structure
  • Smooth Animations: CSS transitions for better UX
  • Mobile Optimization: Touch-friendly interactions

Code Quality

  • TypeScript: Full type safety throughout the application
  • ESLint: Strict linting rules for code quality
  • Component Architecture: Reusable, modular components
  • Custom Hooks: Encapsulated business logic

Data Persistence

  • Local Storage: All data persists between sessions
  • Auto-save: Changes are saved automatically
  • Backup System: Export functionality for data backup
  • Migration Support: Framework for future database migration

Target Audience

  • Families: Coordinate grocery shopping across household members
  • Roommates: Share household shopping responsibilities
  • Small Groups: Organize shopping for events or shared spaces
  • Individuals: Personal shopping list management

This project demonstrates modern React development practices, focusing on user experience, performance, and maintainability while solving a real-world problem of collaborative shopping list management.