Skip to content

Conversation

@patelradhika
Copy link
Contributor

Purpose

Re-write the entire codebase to include basic template for Buildly setup.

Further info

  • React with Vite setup
  • Storybook
  • E2E testing
  • Claude integration

patelradhika and others added 11 commits August 20, 2025 18:09
- Upgrade React from 17.0.2 to 18.3.1 with createRoot API
- Upgrade Material-UI from v5.16.9 to v6.1.9
- Migrate React Router from v5 to v6 (Routes, Navigate, useNavigate)
- Replace React Query v3 with TanStack Query v5
- Update Grid components to new v6 size prop syntax
- Replace experimental theme APIs with stable versions
- Remove deprecated packages (react-hot-loader, @mui/styles)
- Add CLAUDE.md documentation for development guidance
- Update webpack configuration for React 18 compatibility
- Replace Enzyme with React Testing Library

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Remove all workbox/service worker related dependencies, configuration, and code:
- Remove workbox packages from dependencies
- Remove GenerateSW plugin from webpack config
- Delete serviceWorkerRegistration.js file
- Remove service worker registration from index.js
- Clean up generated service worker files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Implement version detection system to force users to refresh when new versions are deployed:
- Add versionChecker utility that polls /version.json every 30 seconds
- Integrate version checking into App component lifecycle
- Generate version.json during webpack build with current package version and timestamp
- Show user-friendly notification with auto-refresh options when version mismatch detected
- Handle network failures gracefully with console logging

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
…ith UI improvements

## Major Framework Updates
- Migrate from React Query v3 to TanStack Query v5 with new object syntax
- Fix React Router v6 compatibility issues in UserManagement nested routing
- Update all useQuery calls to use { queryKey, queryFn } syntax
- Update all useMutation calls to use object syntax

## User Management Fixes
- Fix UserManagement page routing with wildcard paths (/*) for nested routes
- Enable full-width tables for better data visibility with viewport-width styling
- Add proper permission-based route protection for admin/global admin access
- Fix data loading and display issues in Users and UserGroups components

## UI/UX Improvements
- Fix TopBar logo click navigation to dashboard with proper accessibility
- Prevent TopBar logo compression with object-fit styling
- Position login page links (Forgot Password/Register) at opposite container ends
- Implement fixed copyright footer with semi-transparent background and blur effect
- Add appropriate page padding to prevent content overlap with fixed footer

## Code Quality & Standards
- Comprehensive ESLint fixes across entire codebase (25+ issues resolved)
- Replace window.confirm with custom notification for version updates
- Remove debug console statements while preserving error logging
- Add proper accessibility attributes and keyboard navigation support
- Convert arrow function components to function declarations per style guide

## Documentation Updates
- Update CLAUDE.md with current technology stack (React 18, Material-UI v6, etc.)
- Add critical TanStack Query v5 migration guidelines
- Document permission system and routing patterns
- Include version management and full-width styling techniques

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Migrate from Webpack to Vite for faster development and builds
- Upgrade to React 19 with TypeScript support
- Implement dual environment variable system (local dev + Docker runtime)
- Add comprehensive testing setup (Vitest + Playwright + Storybook)
- Replace ESLint legacy config with flat config format
- Add Docker multi-stage build with Nginx serving
- Remove legacy Buildly-specific components and dependencies
- Add modern component architecture with co-location pattern
- Implement OAuth environment variables support
- Configure port 3000 for development server
- Add comprehensive project documentation (README + CLAUDE.md)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
… theme system

This comprehensive update transforms the template into a production-ready React 19 application with:

🔐 Authentication System:
- OAuth authentication with TanStack Query integration
- Zustand store for persistent auth state with token management
- Protected routing with automatic redirects
- Login page with password visibility toggle

🎨 Theme System:
- Light/Dark/System theme modes with CSS custom properties
- Automatic OS preference detection and switching
- Theme toggle component with current state indication
- Buildly brand colors (primary: #1B5FA3, secondary: #F9943B)

🔧 Architecture Updates:
- Migrated from REACT_APP_ to VITE_ environment variables
- Enhanced Docker runtime environment injection
- Updated documentation with comprehensive CLAUDE.md
- Modern routing with React Router v7 and protected routes

✨ UI/UX Improvements:
- Buildly branding with light/dark logo variants
- Copyright footer on unauthenticated routes
- Clean dashboard with theme-aware header
- Responsive design patterns

📁 Project Structure:
- Organized component co-location pattern
- Dedicated stores, pages, and API layers
- Updated favicon and assets
- Removed legacy React assets

All changes maintain production readiness with proper TypeScript typing,
testing setup, and Docker containerization support.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
…ensive documentation

Major UI and architecture improvements:

- Add TopBar component with gradient background matching login page design
- Implement ThemeToggle with pill-shaped design and hover tooltips
- Create UserMenu with profile icon trigger and dropdown functionality
- Add UserManagement page with clean interface ready for future features
- Remove all Storybook template files and stories
- Add comprehensive code comments to key components
- Update README.md with current architecture and authentication flow
- Enhance CLAUDE.md with detailed component documentation and recent changes

Component Features:
- TopBar: Gradient background, theme-aware logo switching, responsive design
- ThemeToggle: Icon-only design with light/dark/system options and tooltips
- UserMenu: Circular profile trigger with glass morphism dropdown effects
- UserManagement: Clean slate interface with header and empty content area

Authentication & Navigation:
- OAuth flow with protected routes and automatic redirects
- Theme system integration with CSS custom properties
- Responsive design across all screen sizes
- Accessibility considerations with proper ARIA labels

Documentation & Code Quality:
- Added comprehensive comments explaining component features and architecture
- Updated project documentation to reflect current state
- Enhanced developer guidance with implementation patterns and recent changes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
…n and password reset

Added comprehensive authentication system with full user lifecycle support:

**Authentication Features:**
- User registration with email verification requirement
- Password reset via secure email links with token confirmation
- Email verification system for new user accounts
- Form validation and comprehensive error handling
- Immediate redirect patterns without artificial delays

**Global UI Systems:**
- Global notification system with toast notifications
- Global loading overlay with contextual messages
- Multi-type notifications (success, error, warning, info)
- Persistent notifications across page navigation
- Auto-dismiss with manual close options

**API Integration:**
- Complete authentication API with all endpoints
- TanStack Query mutations for all auth operations
- Promise-based mutation handling for reliable state management
- Comprehensive error handling with user-friendly messages
- Integrated loading states with global loader system

**New Pages and Components:**
- Register page with grouped form fields and validation
- ForgotPassword page with API integration
- ResetPasswordConfirm page with URL parameter handling
- VerifyEmail page with automatic verification and redirect
- GlobalNotification component with animations
- Custom hooks for notification and loader management

**Documentation:**
- Updated README.md with complete feature overview
- Enhanced CLAUDE.md with implementation details
- Comprehensive authentication flows documentation
- Updated project structure and file organization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
…stem

- Add complete user management system with tabbed interface (Users and User Roles)
- Implement conditional API updates with sequential processing for organization and user fields
- Add user invitation system with bulk email functionality
- Create EditUserModal for user status, organization, and role management
- Add InviteUsersModal for multi-user email invitations
- Implement read-only UserRolesTab with permissions matrix display
- Remove edit/delete functionality from user roles table per requirements
- Add comprehensive error handling with user-friendly notifications
- Remove all console debugging statements for production readiness
- Create CODING_STYLE.md with mandatory development patterns and conventions
- Update README.md with complete user management documentation
- Update CLAUDE.md with implementation details and mandatory workflow
- Establish pre-commit checklist requiring documentation updates

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Add complete API layer testing (auth.test.ts, users.test.ts)
- Add Zustand store testing (authStore.test.ts, themeStore.test.ts)
- Add React component testing (ThemeToggle.test.tsx, UserMenu.test.tsx)
- Add utility function testing (env.test.ts, userRoles.test.ts, constants.test.ts)
- Add custom hooks testing (useLoader.test.ts, useNotification.test.ts)
- Add integration testing (integration.test.tsx) for complete user flows
- Update README.md with comprehensive test architecture documentation
- Update CLAUDE.md with detailed test implementation status
- Follow all established coding standards and patterns from CODING_STYLE.md
- Implement proper mocking strategies for DOM APIs, fetch, timers, localStorage
- Add TypeScript interfaces and comprehensive error scenario testing
- Ensure production-ready test quality with proper cleanup and assertions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
…ing standards

Updated the pull request template to include:
- Type classification for different change types
- Testing requirements (unit, E2E, manual)
- Code quality checklist aligned with CODING_STYLE.md
- Documentation update requirements
- Screenshots section for UI changes
- General PR readiness checklist

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@patelradhika patelradhika self-assigned this Aug 29, 2025
@patelradhika patelradhika added the enhancement New feature or request label Aug 29, 2025
@patelradhika patelradhika requested a review from glind August 29, 2025 11:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants