Inventory Manager Frontend

Tech Stack

• Framework: React 19.0.0
• Language: TypeScript 5.6.0
• Build Tool: Vite 6.0.0
• Styling: Tailwind CSS 4.2.2
• UI Components: Lucide React 1.8.0 (icons)
• Charts: Recharts 3.8.1
• Routing: React Router DOM 7.14.0
• Linting: ESLint 9.39.4 with TypeScript support
• Development: Vite React plugin, Tailwind CSS Vite plugin

Setup & Usage

Installation

npm install

Development

npm run dev

Starts Vite dev server with hot module replacement.

Build

npm run build

Produces optimized production build in dist/ directory.

Preview

npm run preview

Serves the production build locally for testing.

Type Checking

npm run typecheck

Runs TypeScript compiler without emitting files.

Linting

npm run lint          # Check for linting issues
npm run lint:fix      # Auto-fix linting issues

Project Structure

• src/App.tsx: Main application component with routing and authentication state
• src/components/dashboard/: Dashboard-related components (Sidebar, Navbar, Cards, Charts)
• src/components/products/: Products page component
• src/components/inventory/: Inventory page component
• src/components/reports/: Reports page component
• src/components/settings/: Settings page component
• src/components/AuthLayout.tsx: Authentication layout wrapper
• src/components/LoginForm.tsx: Login form component
• src/components/SignupForm.tsx: Signup form component
• src/components/AnimatedBackground.tsx: Canvas-based animated background with particles and orbs
• src/components/Toast.tsx: Toast notification component
• src/hooks/useToast.ts: Custom hook for toast management
• index.html: Entry point with loading screen and error handling

Key Features Explained

Authentication Flow

• Users start at login/signup screen
• Credentials stored in localStorage under currentUser
• Authenticated users access main dashboard
• Logout clears session and returns to login

Animated Background

• Particle system with physics-based movement
• Orbital glowing orbs with color gradients
• Mouse interaction detection
• Responsive to theme changes (dark/light)
• Performance optimized with particle count based on viewport

Error Handling

• Global error event listeners for runtime errors
• Unhandled promise rejection catching
• User-friendly error display with error details
• PostMessage integration for preview environment notifications

Toast System

• Success and error toast types
• Auto-dismiss functionality
• Stacked notification display

Notes

• The application uses localStorage for persistence (theme, authentication)
• Includes backup HTML file (index.html.bak) for version control
• Optimized for modern browsers with ES modules
• Tailwind CSS configured with Vite for fast development