Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jumba23/inventrack-frontend

Inventory tracking application - client. Built using Next js with tailwind and ContextAPI, and Zod
https://github.com/jumba23/inventrack-frontend

context-api javascript nextjs supabase-auth tailwindcss zod

Last synced: about 2 months ago
JSON representation

Inventory tracking application - client. Built using Next js with tailwind and ContextAPI, and Zod

Awesome Lists containing this project

README

        

# InvenTrack - Modern Inventory Management System

## Overview

InvenTrack is a comprehensive inventory management system built with Next.js 14, designed to help businesses efficiently track and manage their inventory, suppliers, and orders. The application features a responsive design that works seamlessly across desktop and mobile devices.

## Table of Contents

- [Key Features](#key-features)
- [Tech Stack](#tech-stack)
- [Architecture](#architecture)
- [State Management](#state-management)
- [Core Features](#core-features)
- [Security](#security)
- [Development Guide](#development-guide)
- [Mobile Support](#mobile-support)
- [Future Roadmap](#future-roadmap)

## Key Features

- 📊 Real-time inventory tracking and management
- 🏪 Comprehensive product and supplier management
- 📱 Responsive design with mobile-first approach
- 📈 Advanced reporting and analytics
- 🔄 POS system integration capabilities
- 🔐 Secure JWT-based authentication system
- 🔄 Real-time stock updates and notifications
- 📱 Progressive Web App (PWA) support (planned)

## Tech Stack

### Core Technologies

- **Framework:** Next.js 14.2.7
- **State Management:** Zustand with persistence
- **Styling:** Tailwind CSS + Material-UI (MUI)
- **Authentication:** Custom JWT with HTTP-only cookies
- **API Client:** Axios with interceptors
- **Form Management:** React Hook Form
- **Database:** Supabase

### Development Tools

- **Code Quality:** ESLint, Prettier
- **Testing:** Jest, React Testing Library
- **Build Tool:** Next.js built-in bundler
- **Package Manager:** npm/yarn

## Architecture

### Application Structure

```plaintext
frontend/
├── app/ # Next.js 14 app directory
│ ├── (auth)/ # Authentication routes
│ ├── dashboard/ # Dashboard views
│ ├── inventory/ # Inventory management
│ ├── suppliers/ # Supplier management
│ ├── orders/ # Order processing
│ └── reports/ # Analytics & reporting
├── components/ # Reusable components
│ ├── ui/ # Base UI components
│ ├── forms/ # Form components
│ └── layouts/ # Layout components
├── stores/ # Zustand state stores
├── utils/ # Utilities and hooks
└── context/ # React Context providers
```

### Authentication System

```typescript
// Authentication Flow
interface AuthFlow {
login: {
input: { email: string; password: string };
output: { token: string; user: User };
storage: "http-only cookie";
};
validation: {
middleware: "JWT verification";
protection: "RouteGuard component";
};
}
```

### State Management Architecture

```typescript
// Store Structure
interface StoreStructure {
products: ProductStore; // Product management
suppliers: SupplierStore; // Supplier management
profile: ProfileStore; // User profile & settings
ui: UIStore; // UI state (modals, alerts)
}
```

## State Management

### Zustand Store Implementation

```javascript
// Example Product Store
const useProductStore = create(
persist(
(set, get) => ({
products: [],
loading: false,
error: null,
filters: {
category: null,
search: "",
status: "all",
},
actions: {
setProducts: (products) => set({ products }),
updateFilters: (filters) =>
set({ filters: { ...get().filters, ...filters } }),
loadProducts: async () => {
set({ loading: true });
try {
const data = await fetchProducts();
set({ products: data, error: null });
} catch (error) {
set({ error: error.message });
} finally {
set({ loading: false });
}
},
},
}),
{
name: "product-storage",
storage: createJSONStorage(() => localStorage),
}
)
);
```

### Custom Hooks

```javascript
// Product Management Hook
export function useProduct() {
const { authState } = useAuth();
const store = useProductStore();

useEffect(() => {
if (authState.isAuthenticated && !store.loading) {
store.actions.loadProducts();
}
}, [authState.isAuthenticated]);

return {
...store,
// Additional computed properties
lowStockProducts: store.products.filter((p) => p.quantity <= p.minQuantity),
totalValue: store.products.reduce(
(sum, p) => sum + p.quantity * p.price,
0
),
};
}
```

## Error Handling System

```typescript
// Error Handling Structure
interface ErrorSystem {
types: typeof ERROR_TYPES;
handling: {
api: "Centralized API error processing";
ui: "Component-level error boundaries";
form: "Form-level validation errors";
};
display: {
toast: "Transient notifications";
modal: "Critical error dialogs";
inline: "Form validation messages";
};
}
```

## Development Guide

### Prerequisites

- Node.js (v18 or higher)
- npm or yarn
- Git

### Getting Started

```bash
# Clone and install
git clone [repository-url]
cd inventracker
npm install

# Environment setup
cp .env.example .env.local
# Edit .env.local with your configuration

# Development
npm run dev # Start development server
npm run lint # Run ESLint
npm run test # Run tests
npm run build # Production build
```

### Environment Configuration

```env
# Required environment variables
NEXT_PUBLIC_API_URL=your_api_url
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
NEXT_PUBLIC_APP_ENV=development

# Optional features
NEXT_PUBLIC_ENABLE_ANALYTICS=false
NEXT_PUBLIC_SENTRY_DSN=your_sentry_dsn
```

## Security Features

- **Authentication:** JWT with HTTP-only cookies
- **Route Protection:** Server-side middleware & client-side guards
- **Data Safety:** Input validation & sanitization
- **API Security:** CORS, rate limiting, request validation
- **Frontend Security:** XSS protection, CSP headers