Inventory Tracking System

🚀 Live Demo

A modern, responsive inventory management system built with React, Tailwind CSS, and advanced UI components for seamless inventory tracking and management.

✨ Features

• 🎨 Modern UI/UX: Built with Tailwind CSS for a clean, professional interface
• 📱 Fully Responsive: Mobile-first design that works perfectly on all devices
• 🔐 Authentication System: Secure login and registration with role-based access
• 👤 User Dashboard: Comprehensive dashboard for regular users
• ⚡ Admin Panel: Advanced admin interface for system management
• 🌙 Theme Support: Dark/Light theme toggle functionality
• 🎯 Interactive Navigation: Smooth scrolling and dynamic navigation elements
• ✨ Particle Effects: Eye-catching particle animations using tsparticles
• 🚀 Fast Performance: Optimized with Vite for lightning-fast development and builds
• 📊 Inventory Management: Complete CRUD operations for inventory items

🛠️ Tech Stack

• Frontend Framework: React 19.1.0
• Styling: Tailwind CSS 4.1.11
• Routing: React Router DOM 7.7.1
• Icons: React Icons 5.5.0
• Animations: tsparticles 2.12.0
• Scroll Effects: Locomotive Scroll 4.1.4
• Navigation: React Scrollspy Navigation
• Build Tool: Vite with Tailwind integration

📋 Components

Component	Description
Navbar	Responsive navigation bar with theme toggle
Login	User authentication and login form
Registration	New user signup with validation
Error Page	Custom 404 and error handling pages
User Dashboard	Main user interface for inventory operations
Admin Panel	Administrative controls and user management
Footer	Site footer with links and information
Theme Page	Theme customization and settings

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd inventory-tracking-system

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

4. Open your browser

   http://localhost:5173
   

📦 Package Details

Core Dependencies

{
  "react": "^19.1.0",
  "react-dom": "^19.1.0",
  "react-router-dom": "^7.7.1"
}

Styling & UI

{
  "tailwindcss": "^4.1.11",
  "@tailwindcss/vite": "^4.1.11",
  "react-icons": "^5.5.0",
  "react-icons-dom": "^1.0.1"
}

Animations & Effects

{
  "locomotive-scroll": "^4.1.4",
  "react-tsparticles": "^2.12.2",
  "tsparticles-slim": "^2.12.0",
  "react-scrollspy-nav": "^1.3.0",
  "react-scrollspy-navigation": "^2.0.6"
}

🏗️ Project Structure

inventory-tracking-system/
├── public/
├── src/
│   ├── components/
│   │   ├── Navbar.jsx
│   │   ├── Login.jsx
│   │   ├── Registration.jsx
│   │   ├── ErrorPage.jsx
│   │   ├── UserDashboard.jsx
│   │   ├── Admin.jsx
│   │   ├── Footer.jsx
│   │   └── ThemePage.jsx
│   ├── assets/
│   ├── utils/
│   ├── App.jsx
│   └── main.jsx
├── package.json
└── tailwind.config.js

🎯 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🌟 Key Features

Responsive Design

• Mobile-first approach with Tailwind CSS
• Adaptive layouts for all screen sizes
• Touch-friendly interface elements

User Experience

• Smooth animations and transitions
• Intuitive navigation with scrollspy
• Interactive particle backgrounds
• Theme customization options

Performance

• Fast development with Vite
• Optimized production builds
• Lazy loading and code splitting
• Efficient state management

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔧 Configuration

Tailwind CSS Setup

The project uses Tailwind CSS v4 with Vite integration for optimal performance and developer experience.

Particle Configuration

Customize particle effects in the tsparticles configuration to match your brand and design preferences.

📞 Support

For support and questions:

• Create an issue in the repository
• Check existing documentation
• Review component examples

🚀 Deployment

The application can be deployed on various platforms:

• Vercel: Connect your GitHub repository
• Netlify: Drag and drop build folder
• GitHub Pages: Enable in repository settings

---

Built with ❤️ using React and Tailwind CSS