2nd/10_Wiki/Development/Homepage_React_Best_Practices.md

Homepage & React Development (GStack/Pretext Style)

This guide summarizes the best practices for building high-quality homepages and React components using the design-html logic from GStack.

1. Design finalization Workflow

• Approved Mockups: Always start with a visual reference (PNG/Screenshot).
• Component Inventory: Before coding, list all colors (hex), fonts (weights), and components.
• Realistic Content: Never use "Lorem Ipsum." Generate content that fits the product vision.

2. Dynamic Layouts (The Pretext Way)

• Fluidity: Text should reflow on resize, and container heights should adjust to content.
• Self-Sizing Cards: Use layout logic where cards size themselves based on internal content density.
• Tight-Fit Elements: For chat bubbles or specific UI elements, use "shrinkwrap" logic to minimize unused space.

3. React Component Best Practices

• Framework-Native with Hooks: Use React-native patterns combined with Pretext-style layout hooks for fluid UI.
• TypeScript First: Ensure all components are strongly typed.
• Zero Deps CSS: Prioritize vanilla CSS (or CSS Modules) for maximum control and zero overhead.
• Performance: Minimize re-renders by using optimized sub-components with specific selectors (e.g., useGameStore(s => s.score)).

4. Visual Polish (Premium Aesthetics)

• Typography: Use modern fonts (Inter, Roboto, Outfit) from Google Fonts.
• Micro-Animations: Add subtle transitions for hover states and interactive elements.
• Gradients & Shadows: Use harmonious, sleek dark mode palettes and subtle glassmorphism effects.

5. Deployment & PRs (The /ship way)

• Atomic Commits: Group changes by intent.
• Quality Gate: Run linting and tests before every PR creation.
• Documentation: Update CHANGELOG.md or a release doc immediately after shipping.