Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 1 day ago
JSON representation
Inventory tracking application - client. Built using Next js with tailwind and ContextAPI, and Zod
- Host: GitHub
- URL: https://github.com/jumba23/inventrack-frontend
- Owner: jumba23
- Created: 2023-08-12T19:36:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-27T03:52:07.000Z (13 days ago)
- Last Synced: 2024-10-28T00:57:53.132Z (12 days ago)
- Topics: context-api, javascript, nextjs, supabase-auth, tailwindcss, zod
- Language: JavaScript
- Homepage: https://invent-track-frontend.vercel.app
- Size: 5.89 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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