UserHub - Professional User Management Platform

A modern, secure, and scalable user management system built with Next.js 15 frontend and ASP.NET Core backend. Features enterprise-grade authentication, profile management, and comprehensive security controls.

🌟 Features

🔐 Authentication & Security

• JWT Token Authentication - Secure token-based auth with automatic refresh
• Password Management - Reset, change, and strength validation
• Account Security - Deactivation, reactivation, and data protection
• CORS Protection - Configurable cross-origin resource sharing

👤 User Management

• Profile Management - Complete user profile with avatar support
• Account Settings - Comprehensive preference and privacy controls
• Dashboard - Intuitive user dashboard with activity tracking
• Responsive Design - Mobile-first, works on all devices

🎨 Modern UI/UX

• Framer Motion Animations - Smooth, professional animations
• shadcn/ui Components - Beautiful, accessible UI components
• Tailwind CSS - Utility-first styling with custom design system
• Dark/Light Mode Ready - Built for theme switching

🛠️ Developer Experience

• TypeScript - Full type safety throughout the application
• Next.js 15 - Latest features including App Router and Server Components
• ESLint & Prettier - Code quality and formatting
• Network Testing - Built-in connection diagnostics

🏗️ Architecture

Frontend (Next.js 15)

``` app/ ├── auth/ # Authentication pages │ ├── login/ # Login page with error handling │ ├── register/ # Registration with validation │ ├── forgot-password/ # Password reset request │ └── reset-password/ # Password reset form ├── dashboard/ # User dashboard ├── profile/ │ └── edit/ # Profile editing ├── settings/ │ ├── password/ # Password change │ └── deactivate/ # Account deactivation ├── test/ # Network diagnostics └── layout.tsx # Root layout with analytics

components/ ├── ui/ # shadcn/ui components ├── animated-page.tsx # Page transition animations ├── animated-card.tsx # Card animations ├── animated-button.tsx # Button interactions └── floating-elements.tsx # Background animations

lib/ ├── api-config.ts # API configuration & helpers └── utils.ts # Utility functions ```

Backend (ASP.NET Core)

Expected structure for your backend: ``` Controllers/ ├── AuthController.cs # Authentication endpoints └── UserController.cs # User management endpoints

Models/ ├── User.cs # User entity ├── LoginRequest.cs # Login DTO └── RegisterRequest.cs # Registration DTO

Services/ ├── AuthService.cs # Authentication logic └── UserService.cs # User management logic ```

🚀 Quick Start

Prerequisites

• Node.js 18+ - Download here
• .NET 8 SDK - Download here
• Git - Download here

1. Clone the Repository

```bash git clone cd user-management-ui ```

2. Install Dependencies

```bash npm install ```

3. Start the Frontend

```bash npm run dev ``` The frontend will start on http://localhost:3000 (or 3001 if 3000 is busy).

4. Configure Your Backend

Ensure your ASP.NET Core backend is configured with CORS:

// In Program.cs or Startup.cs
services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("http://localhost:3000", "http://localhost:3001")
              .AllowAnyMethod()
              .AllowAnyHeader()
              .AllowCredentials();
    });
});

// Use CORS
app.UseCors("AllowFrontend");