Skip to content

Add comprehensive frontend documentation#31

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/add-frontend-documentation
Draft

Add comprehensive frontend documentation#31
Copilot wants to merge 3 commits intomainfrom
copilot/add-frontend-documentation

Conversation

Copy link
Copy Markdown

Copilot AI commented Jan 19, 2026 •
edited
Loading

The frontend README contained only Vite template boilerplate. Added structured documentation covering architecture, development workflow, component APIs, styling conventions, API integration patterns, testing strategy, and code organization guidelines.

Documentation Structure

Core Documentation (docs/frontend/)

  • architecture.md - Component hierarchy, Context API state management (Auth/Theme), React Router v7 patterns, React Query integration
  • setup.md - Environment detection (runtime config, Codespaces, localhost), dev server, build pipeline, Docker workflow
  • components.md - API documentation for AuthContext, ThemeContext, Navigation, Products, ProductForm, AdminProducts with TypeScript interfaces and usage patterns
  • styling.md - Tailwind utility patterns, theme system (class-based dark mode), color palette, responsive breakpoints, component styling templates
  • api-integration.md - Base URL detection logic, React Query v3 patterns (with v4+ migration notes), error handling, Axios configuration
  • testing.md - Vitest + React Testing Library setup, component testing patterns, API mocking with vi.mocked(), coverage strategy
  • code-organization.md - Directory structure rationale, naming conventions (PascalCase components, camelCase utilities), state management patterns, feature organization

Updated

  • frontend/README.md - Replaced template with project overview, tech stack, route structure, links to detailed docs

Key Patterns Documented

API Configuration with Environment Detection

const getBaseUrl = () => {
  // 1. Runtime config (Docker/production)
  if (window.RUNTIME_CONFIG?.API_URL) return window.RUNTIME_CONFIG.API_URL;
  
  // 2. GitHub Codespaces auto-detection
  const match = hostname.match(/^(.*)-(\d+)\.app\.github\.dev$/);
  if (match) return `${protocol}://${match[1]}-3000.app.github.dev`;
  
  // 3. Local development fallback
  return `${protocol}://localhost:3000`;
};

Theme Context Pattern

// Persisted to localStorage, applies dark class to <html>
const { darkMode, toggleTheme } = useTheme();
<div className={darkMode ? 'bg-dark text-light' : 'bg-white text-gray-800'}>

React Query Data Fetching (v3)

const { data, isLoading, error } = useQuery('products', async () => {
  const { data } = await axios.get(`${api.baseURL}${api.endpoints.products}`);
  return data;
});

Notes

  • React Query v3 syntax documented with v4+ migration guidance for future upgrades
  • Mock authentication currently client-side only (checks @github.com domain for admin access)
  • No test files currently exist; documentation provides patterns for implementation
Original prompt

This section details on the original issue you should resolve

<issue_title>[Docs] Add comprehensive frontend documentation</issue_title>
<issue_description>## Objective
Create comprehensive documentation for the frontend application to improve maintainability and onboarding of new developers.

Details

The current frontend README only contains the default Vite + React + TypeScript template boilerplate. We need proper documentation that covers:

Required Documentation

  • Architecture Overview

    • Component structure and organization
    • State management approach (Context API usage)
    • Routing structure
    • API integration patterns

  • Setup and Development

    • Prerequisites and dependencies
    • Environment configuration
    • Development server commands
    • Build and deployment process

  • Component Documentation

    • Document key components in src/components/
    • Props and usage examples
    • Context providers (AuthContext, ThemeContext)
    • Admin components structure

  • Styling Guidelines

    • Tailwind CSS conventions used
    • Theme system documentation
    • Responsive design approach

  • API Integration

    • API client configuration (src/api/config.ts)
    • Error handling patterns
    • Authentication flow

  • Testing

    • Testing strategy and tools
    • How to run tests
    • Example test patterns

  • Code Organization

    • Folder structure explanation
    • Naming conventions
    • Best practices for new features

Dependencies

None

Notes

  • Consider creating separate documentation files for different aspects (e.g., docs/frontend/)
  • Update the current frontend/README.md to be more project-specific
  • Link to the main architecture documentation in docs/architecture.md where relevant
  • Include examples and code snippets where helpful</issue_description>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 2 commits January 19, 2026 13:15
@webmaxru
Add comprehensive frontend documentation
94301a2 
Co-authored-by: webmaxru <1560278+webmaxru@users.noreply.github.com>
@webmaxru
Address code review feedback - fix Vitest mocking, React Query versio…
fca577f 
…n notes, and error handling

Co-authored-by: webmaxru <1560278+webmaxru@users.noreply.github.com>
Copilot AI changed the title [WIP] Add comprehensive frontend documentation Add comprehensive frontend documentation Jan 19, 2026
Copilot AI requested a review from webmaxru January 19, 2026 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@webmaxru webmaxru Awaiting requested review from webmaxru

Assignees

@webmaxru webmaxru

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Docs] Add comprehensive frontend documentation

2 participants

@webmaxru