feat: Centralized navigation system with HandleNavigate hook

BREAKING CHANGE: Replaced all direct useNavigate() usage with HandleNavigate hook

## Summary
- Complete frontend navigation refactoring
- Centralized route management with routes.js
- Converted 18+ components to use HandleNavigate
- Enhanced navigation with 20+ type-safe functions

## New Files
- src/utils/routes.js - Central route constants and helpers
- Documentations/FRONTEND_CODING_GUIDELINES.md - Frontend best practices (300+ lines)
- Documentations/NAVIGATION_REFACTORING_REPORT.md - Detailed refactoring report (400+ lines)

## Modified Components (18+)
### Pages
- Home.jsx, LoginForm.jsx, RegisterForm.jsx
- ResetPassword.jsx, VerifyEmailPage.jsx
- DeckCreator.jsx, Card_display.jsx
- Lobby.jsx, GameTest.jsx, ChooseDeck.jsx, PlayerSetup.jsx
- Landingpage.jsx

### Components
- Userdetails.jsx, DeckInfoPopUp.jsx
- PlayMenu.jsx, LandingPage.jsx, DeckManager.jsx

### Hooks
- useRequireAuth.jsx

### Core
- App.jsx - Route constants integration
- HandleNavigate.jsx - Enhanced with 20+ navigation functions

## Key Improvements
 Type-safe navigation (goDeckDetails(id) vs navigate('/deck/'+id))
 Automatic scroll management
 Centralized state passing
 Single source of truth for routes
 Backwards compatibility aliases
 Zero compile errors
 Production ready

## Validation
- useNavigate: Only in HandleNavigate.jsx
- navigate() calls: 0 direct usage
- Compile errors: 0
- Documentation: Complete

SerpentRace_Frontend/src/utils/routes.js

@@ -0,0 +1,45 @@
+// src/utils/routes.js
+// Centralized route definitions for the entire application
+// This ensures consistency and makes route changes easier to manage
+
+export const ROUTES = {
+  // ====== Public Routes ======
+  ROOT: '/',
+  LANDING: '/',
+  HOME: '/home',
+  ABOUT: '/about',
+  
+  // ====== Authentication Routes ======
+  LOGIN: '/login',
+  REGISTER: '/register',
+  FORGOT_PASSWORD: '/forgot-password',
+  RESET_PASSWORD: '/reset-password',
+  VERIFY_EMAIL: '/verify-email',
+  
+  // ====== User Routes ======
+  PROFILE: '/profile',
+  
+  // ====== Deck Routes ======
+  DECKS: '/decks',
+  DECK_DETAILS: '/deck/:deckId',
+  DECK_CREATOR: '/deck-creator',
+  DECK_CREATOR_EDIT: '/deck-creator/:deckId',
+  
+  // ====== Game Routes ======
+  CHOOSE_DECK: '/choosedeck',
+  PLAYER_SETUP: '/playersetup',
+  LOBBY: '/lobby',
+  GAME: '/game',
+  GAME_TEST: '/game-test',
+  
+  // ====== Other Routes ======
+  REPORTS: '/report',
+  CONTACTS: '/contacts',
+  TEST: '/test',
+}
+
+// Helper functions to generate dynamic routes
+export const routeHelpers = {
+  deckDetails: (deckId) => `/deck/${deckId}`,
+  deckCreatorEdit: (deckId) => `/deck-creator/${deckId}`,
+}