MERN Auth Example with 3D Animated UI 🚀

This repository is a modern MERN (MongoDB, Express, React, Node) example with registration, login, protected routes, JWT authentication, password hashing via bcrypt, and a stunning 3D animated user interface.

✨ New Features

🎨 3D Animations & Visual Enhancements

• Glassmorphism Design - Modern frosted glass effect with backdrop blur
• 3D Transforms - Perspective-based card rotations and hover effects
• Gradient Backgrounds - Dynamic animated gradients throughout the app
• Smooth Transitions - Cubic-bezier easing for premium feel
• Interactive Elements - Cards that respond to mouse movements
• Animated Stats Cards - Dashboard statistics with floating animations
• Product Cards - 3D tilt effect with parallax motion

📦 Enhanced Product Demo

• 25+ Demo Products - Expanded inventory with diverse categories
• Product Categories - Clothing, Electronics, Home, Sports, Footwear, Accessories, Stationery, Furniture
• Rating System - Star ratings for each product
• Stock Indicators - Color-coded stock levels (Low/Medium/High)
• Animated Table Rows - Staggered entrance animations
• Interactive Badges - Category and stock badges with hover effects

🎯 UI Components

• Animated Dashboard - Stats cards with gradient backgrounds
• Enhanced Table - Smooth hover effects with 3D depth
• Glassmorphic Auth Forms - Login/Register with frosted glass effect
• Custom ProductCard Component - 3D tilt on mouse movement

Folder Structure

• backend/ - Express + MongoDB API

  • server.js - app entry
  • config/db.js - mongoose connection
  • controllers/authController.js - register/login logic
  • models/User.js - user mongoose model
  • routes/auth.js - auth routes
  • .env - environment variables (PORT, CLIENT_ORIGIN)
  • package.json

• frontend/ - React app with 3D animations

  • public/
  • src/
    • pages/
      • Login.js - Animated login page
      • Register.js - Animated registration page
      • Dashboard.js - Dashboard with stats cards
      • Auth.css - Glassmorphic auth styles
      • Dashboard.css - 3D dashboard styles
    • components/
      • ProtectedRoute.js - Route protection
      • Table.js - Animated product table (25 products)
      • Table.css - 3D table animations
      • ProductCard.js - 3D product card component
      • ProductCard.css - Interactive card styles
    • api.js - axios instance
    • index.css - Global 3D animations & utilities
  • .env - environment variables (REACT_APP_API_URL)
  • package.json

Key Features

• ✅ Registration with fields: name, dob, email, password
• ✅ Password hashing with bcrypt
• ✅ JWT issued on success and returned along with user info
• ✅ Frontend stores token + user in localStorage
• ✅ Protected Dashboard route that requires a token
• ✅ CORS enabled for development
• 🎨 3D animated UI with glassmorphism
• 🎭 Smooth transitions and hover effects
• 📊 Interactive dashboard with animated stats
• 🛍️ 25+ demo products with ratings and categories

API

• POST /api/register
• POST /api/login

Response format (success):

{
  "success": true,
  "token": "...",
  "user": { "name": "...", "email": "...", "dob": "..." }
}

Setup

1. Backend

• cd backend
• copy .env.example to .env and set MONGO_URI and JWT_SECRET (and optionally CLIENT_ORIGIN)
• npm install
• npm run dev

2. Frontend

• cd frontend
• copy .env.example to .env if you want to change REACT_APP_API_URL
• npm install
• npm start

Notes

• This scaffold is intentionally minimal and made for learning. For production, secure environment variable management, stronger validation, HTTPS, refresh tokens, and more robust error handling are recommended.

  command lines to be give for the opening the localhost is This for backend: cd "c:\User\A\Machine testbackend"; npm run dev This for frontend: cd "c:\User\A\Machine testfrontend"; npm start