Complete Management System

A modern React + TypeScript application built with Vite, featuring authentication, user management, and a comprehensive dashboard interface.

Features

• 🔐 Authentication System - Login, registration, password management
• 👤 User Profile Management - Profile editing, password changes, settings
• 🎨 Modern UI - Built with shadcn/ui components and Tailwind CSS
• 🌙 Dark/Light Theme - Theme switching with persistence
• 📱 Responsive Design - Mobile-first approach with collapsible sidebar
• 🔄 State Management - Zustand for global state, React Query for server state
• 🛡️ Type Safety - Full TypeScript implementation with Zod validation

Tech Stack

• Frontend: React 19, TypeScript, Vite
• Styling: Tailwind CSS, shadcn/ui components
• State Management: Zustand, TanStack React Query
• Routing: React Router v7
• Forms: React Hook Form with Zod validation
• HTTP Client: Axios with interceptors
• Icons: Lucide React, Remix Icons

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

# Clone the repository
git clone <repository-url>
cd Client

# Install dependencies
pnpm install

# Start development server
pnpm dev

Environment Variables

Create a .env file in the root directory:

VITE_API_URL=http://localhost:3000/api

Available Scripts

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm lint         # Run ESLint

Project Structure

src/
├── components/          # Reusable UI components
│   ├── forms/          # Form components
│   ├── layouts/        # Layout components
│   └── ui/             # shadcn/ui components
├── hooks/              # Custom React hooks
├── lib/                # Utilities and configurations
├── pages/              # Page components
├── providers/          # Context providers
├── routes/             # Route definitions
├── services/           # API services
├── stores/             # Zustand stores
└── types/              # TypeScript type definitions

Key Features

Authentication

• JWT-based authentication with refresh tokens
• Protected routes with automatic token refresh
• Password strength validation
• Form validation with real-time feedback

UI Components

• Responsive sidebar navigation
• Dynamic breadcrumbs
• Theme switching (light/dark)
• Toast notifications
• Modal dialogs and sheets

State Management

• Global auth state with Zustand
• Server state caching with React Query
• Automatic token management
• Optimistic updates

Development

Code Style

• ESLint configuration with TypeScript rules
• Prettier formatting with Tailwind plugin
• Consistent import organization

Type Safety

• Strict TypeScript configuration
• Zod schemas for runtime validation
• Type-safe API calls and responses

License

This project is licensed under the MIT License.