Vault Discovery App

Overview

This is a full-stack web application built with React and Express that displays and manages a vault discovery system. Users can browse through various vaults, filter them by different criteria, and view detailed information about each vault. The application features a modern UI with dark theme styling and interactive components.

User Preferences

Preferred communication style: Simple, everyday language.

Recent Changes

VaultActivity System Implementation (July 27, 2025)

• Criado sistema centralizado VaultActivityMain para componentes de atividade do chat
• Substituído importações múltiplas por um único componente coordenador
• Implementadas interfaces TypeScript para type safety completo
• Sistema suporta 4 tipos: vault_opened, vault_failed, item_looted, offensive_ended
• Integrado diretamente no histórico do chat (ChatVaultHistory)
• Criados utilitários VaultActivityFactory para criação fácil de atividades
• Histórico combina mensagens e atividades ordenadas por timestamp
• Documentação completa com exemplos de uso

Masonry Grid Implementation (July 27, 2025)

• Implementado sistema Masonry para resolver problemas de espaçamento desigual entre cards
• Substituído CSS Grid tradicional por react-masonry-css para layout dinâmico
• Cards agora se ajustam perfeitamente sem espaços vazios grandes entre diferentes alturas
• Mantida responsividade completa: 4 colunas (xl), 3 colunas (lg), 2 colunas (md/sm), 1 coluna (mobile)
• Adicionados estilos CSS customizados para espaçamento otimizado em diferentes breakpoints
• Barra de rolagem da tela de cofres ocultada para melhor experiência visual
• Solução permite expansão/retração dinâmica dos cards mantendo layout organizado

VaultMain Scroll Fix (July 26, 2025)

• Fixed VaultMain component scroll behavior to allow full page scrolling instead of just content area
• Removed fixed header positioning to allow the vault header to scroll with content
• Updated container layout to use overflow-y-auto when VaultMain is active
• Changed from flex-col with fixed header to natural document flow for better scroll experience
• Users can now scroll the entire vault page including the header, providing better mobile experience

Navigation and Toggle System (July 19, 2025)

• Implemented responsive navigation system for ChatVault page
• Added toggle buttons in headers: chat icon in MyVaultHeader, vault icon in ChatVaultHeader
• Mobile breakpoint shows only one view at a time (Chat OR MyVault)
• Desktop maintains dual-pane layout (Chat AND MyVault side by side)
• Toggle buttons only visible on mobile breakpoint (md:hidden class)
• ChatVault page: users can switch between views using header buttons
• Vault Discovery page: MyVault appears without chat toggle (different context)
• Added MyVault visibility toggle in Vault Discovery navbar
• Navbar button switches between PanelLeftOpen/PanelLeftClose icons
• Content area expands to full width when MyVault is hidden
• Smooth transition animations when toggling MyVault visibility

Mobile Layout Fix (July 18, 2025)

• Fixed chat-vault page mobile viewport issues with simplified layout approach
• Timer at top with auto height (flex-shrink-0), MainChat expands to fill remaining height (flex-1)
• Removed complex mobile CSS classes and used straightforward flexbox layout
• Timer now properly adjusts to content, chat area uses all available space
• Fixed mobile browser navigation bar overlap issues with proper height calculations
• Simplified structure: h-screen container with flex-col, timer and chat sections properly sized

VaultSheet Implementation (July 16, 2025)

• Created comprehensive VaultSheet system with 6 modular components
• Implemented VaultSheetHeader, VaultUnlockForm, VaultPrizesList, VaultInteriorGrid, VaultSheetBackground, VaultSheet
• Added two-state vault system: locked (password entry) and unlocked (prize claiming)
• Integrated VaultSheet with VaultSectionChat for seamless opening
• VaultSheet opens as full-screen overlay with z-index above chat
• Components organized in logical folder structure for maintainability
• Added shake animations and mobile optimizations

Account System Implementation (July 16, 2025)

• Created comprehensive account page with modular components
• Implemented reusable components: AccountHeader, ProfileHeader, PersonalInfo, BillingSection, SavedCards, Achievements, Preferences, ActionButtons, UserUpdateForm
• Added dynamic routing system for vault chat pages (/{vaultId})
• Integrated VaultSectionChat component into chat interface
• Components organized in logical folder structure for maintainability

Account Page Layout Update (July 26, 2025)

• Reorganized account page component order per user request
• Moved Saved Cards component above Billing component
• Configured default component visibility: only Achievements expanded on page load
• All other components (Personal Info, Saved Cards, Billing, Preferences) start collapsed
• Updated card selection button text from "Padrão" to "Selecionar" for better UX clarity
• Created CardDeleteConfirmation component for safe card deletion
• Replaced browser confirm() with custom modal showing card details and warnings
• Added special warning for default card deletion requiring new default selection
• Created AddCardModal component based on checkout PaymentForm for adding new cards
• Implemented card validation, formatting, and brand detection in add card flow
• Added option to set new card as default during creation process
• Integrated modal with SavedCard component for seamless card management
• Maintained all functionality while improving layout flow and user experience

Vault Cards Layout Optimization (July 28, 2025)

• Implementado sistema Masonry com responsividade CSS pura para evitar re-renderizações
• Configuração estática do Masonry mantém performance sem recriar componentes
• Cards se ajustam dinamicamente via CSS flexbox baseado na visibilidade do MyVault
• Sistema responsivo: 4 colunas → 3 colunas (MyVault visível), 3 → 2 colunas em desktop médio
• Espaçamento consistente de 16px entre cards sem causar re-render da lista
• Altura otimizada dos cards (420px) para melhor densidade visual
• Layout se adapta fluidamente sem recarregar a grade de cofres

InsufficientTimeCard Integration (July 28, 2025)

• Implementada funcionalidade para exibir InsufficientTimeCard quando timer esgotar
• Card de tempo insuficiente substitui input de chat quando tempo acaba
• Botão "Adicionar Tempo" abre modal Checkout para comprar mais tempo
• Timer reinicia automaticamente quando tempo adicional é comprado
• Integração completa entre Timer, MainChatVault, InsufficientTimeCard e Checkout
• Sistema permite continuidade da conversa após compra de tempo adicional
• Estados de tempo gerenciados centralmente na página chat-vault
• Timer reativa e continua contagem com tempo adicionado

VaultItemCard Consistency Implementation (July 28, 2025)

• Unificado sistema de cards entre VaultMain e MyVault para consistência visual completa
• VaultMain agora usa o mesmo VaultItemCard utilizado no MyVault em vez de cards customizados
• Estendido VaultItemCard com props opcionais para funcionalidade press-and-hold específica do VaultMain
• Adicionadas propriedades: onMouseDown, onMouseMove, onMouseUp, onTouchStart, onTouchMove, onTouchEnd
• Implementado suporte a barra de progresso (showProgressBar) e indicadores de progresso (claimProgress, isBeingClaimed)
• Mantida funcionalidade original de saque por press-and-hold no VaultMain com visual consistente
• Cards de itens agora têm aparência idêntica em ambos contextos (MyVault e VaultMain)
• Overlay "SAQUEADO" vs "RESGATADO" diferenciado por contexto usando showProgressBar
• Removidos cards customizados duplicados, código mais limpo e manutenível

Chat Abandon Functionality (July 28, 2025)

• Implementada funcionalidade de abandono do chat com modal de confirmação
• Adicionado redirecionamento automático para tela inicial (vault-discovery) após confirmação
• Modal AbandonConfirmationModal já existia, integrado com navegação wouter
• Usuário agora pode sair do chat clicando em "Abandonar" → confirmar no pop-up → volta à tela inicial
• Funcionalidade integrada tanto no MainChatVault quanto na página chat-vault
• Navegação usando useLocation() do wouter para setLocation('/')
• Texto da descrição do modal otimizado para ser mais conciso e direto

Project Migration (July 13, 2025)

• Successfully migrated project from Replit Agent to Replit environment
• Verified all packages are installed and working correctly
• Confirmed server is running on port 5000 with proper client/server separation
• Validated security practices are implemented
• Project is ready for further development

System Architecture

Frontend Architecture

• Framework: React 18 with TypeScript
• Build Tool: Vite for fast development and optimized production builds
• Routing: Wouter for client-side routing
• State Management: TanStack Query (React Query) for server state management
• UI Framework: Radix UI components with shadcn/ui styling system
• Styling: Tailwind CSS with custom CSS variables for theming
• Animations: Framer Motion for smooth animations and transitions

Backend Architecture

• Runtime: Node.js with Express.js framework
• Language: TypeScript with ES modules
• API Style: RESTful API endpoints
• Data Access: Drizzle ORM for database operations
• Database: PostgreSQL (configured for Neon serverless)
• Session Management: Express sessions with PostgreSQL store

Data Storage

• Primary Database: PostgreSQL via Neon serverless
• ORM: Drizzle ORM with TypeScript-first approach
• Schema Management: Drizzle Kit for migrations
• Development Storage: In-memory storage implementation for local development

Key Components

Frontend Components

1. VaultCard: Interactive card component displaying vault information with hover effects and animations
2. VaultModal: Modal dialog for detailed vault information
3. VaultHeader: Application header with statistics and branding
4. VaultFilters: Filter controls for browsing vaults by different criteria
5. UI Components: Comprehensive set of reusable UI components from shadcn/ui

Backend Components

1. Storage Interface: Abstract interface defining data operations
2. Memory Storage: In-memory implementation for development
3. Route Handlers: Express route handlers for vault CRUD operations
4. Middleware: Request logging and error handling middleware

Shared Components

1. Schema Definitions: Drizzle schema definitions shared between client and server
2. Type Definitions: TypeScript types generated from database schema
3. Validation: Zod schemas for runtime validation

Data Flow

1. Client Requests: React components use TanStack Query to fetch data from API endpoints
2. API Processing: Express routes handle requests and interact with storage layer
3. Data Persistence: Storage layer abstracts database operations through Drizzle ORM
4. Response Handling: API responses are cached and managed by React Query
5. UI Updates: Components reactively update based on query state changes

Vault Management Flow

• List all vaults with filtering capabilities
• View individual vault details in modal
• Track vault statistics (attempts, winners, difficulty)
• Support for vault status updates

External Dependencies

Frontend Dependencies

• React Ecosystem: React, React DOM, React Router (Wouter)
• State Management: TanStack Query for server state
• UI Libraries: Radix UI primitives, Lucide React icons
• Styling: Tailwind CSS, Class Variance Authority
• Animation: Framer Motion
• Utilities: clsx, date-fns, cmdk

Backend Dependencies

• Server Framework: Express.js with TypeScript support
• Database: Drizzle ORM, Neon serverless PostgreSQL
• Session Management: express-session, connect-pg-simple
• Development: tsx for TypeScript execution, esbuild for bundling

Development Tools

• Build Tools: Vite, esbuild
• Type Checking: TypeScript with strict configuration
• Code Quality: ESLint configuration implied by shadcn/ui setup
• Database Tools: Drizzle Kit for schema management

Deployment Strategy

Development Environment

• Client: Vite dev server with HMR and React refresh
• Server: tsx for TypeScript execution with nodemon-like functionality
• Database: Local PostgreSQL or Neon development database
• Environment: NODE_ENV=development with development-specific middleware

Production Build

• Client Build: Vite builds optimized React application to dist/public
• Server Build: esbuild bundles server code to dist/index.js
• Database: Production PostgreSQL via Neon serverless
• Deployment: Node.js server serving both API and static files

Environment Configuration

• Database URL: Required via DATABASE_URL environment variable
• Build Process: Separate client and server build steps
• Static Serving: Express serves built client files in production
• Error Handling: Global error middleware for API routes

Replit Integration

• Development Banner: Replit development banner for external access
• Runtime Error Overlay: Vite plugin for better error handling
• Cartographer Plugin: Replit-specific development tools integration