main goal

BS2B Frontend Development Guide Introduction This guide defines the frontend architecture, coding standards, and deployment workflows for the BS2B (Business-to-Business) ecosystem. Following these practices ensures code consistency, application performance, and seamless team collaboration. Core Tech Stack

Our frontend ecosystem is standardized on modern, predictable, and scalable technologies. Framework: React 18+ (Functional components with Hooks). Language: TypeScript 5+ (Strict mode enabled).

Build Tool: Vite (For fast bundling and hot module replacement).

State Management: Zustand (Global state) and TanStack Query / React Query (Server state).

Styling: Tailwind CSS (Utility-first styling) and Shadcn UI (Component primitives). Project Architecture

We use a modular, feature-based directory structure. This separates concerns and keeps the codebase maintainable as the application grows.

src/ ├── assets/ # Static files (images, icons, fonts) ├── components/ # Shared, global UI components (buttons, inputs) ├── config/ # Environment variables and global constants ├── features/ # Business logic grouped by domain │ ├── dashboard/ # Example feature │ │ ├── components/ │ │ ├── hooks/ │ │ ├── services/ │ │ └── types.ts ├── hooks/ # Shared custom React hooks ├── layouts/ # Page wrappers (AdminLayout, AuthLayout) ├── routes/ # Routing configuration and route guards ├── store/ # Global client-side state (Zustand stores) ├── utils/ # Helper functions and formatters ├── App.tsx # Root component └── main.tsx # Application entry point Use code with caution. Coding Standards TypeScript Strictness

Explicitly define return types for complex functions and hooks.

Avoid using any. Use unknown if a type is genuinely dynamic.

Utilize interfaces for object definitions and types for unions or intersections. Component Guidelines Use descriptive named exports instead of default exports.

Keep components small. Break them down if they exceed 200 lines of code.

Extract complex UI logic into feature-specific custom hooks. Place prop types directly above the component definition. Code Style Example

import React from ‘react’; interface UserProfileProps { userId: string; userName: string; isAdmin?: boolean; } export const UserProfile: React.FC = ({ userId, userName, isAdmin = false }) => { return (

); }; Use code with caution. State Management Strategy

To ensure optimal performance, we separate client-side state from server-side data cache.

Server State: Use TanStack Query for caching, synchronizing, and updating server state. Never manually duplicate API data into global client stores.

Client State: Use Zustand for lightweight, transient global UI state like sidebar toggles, theme settings, or active user sessions. Performance Optimization

Code Splitting: Lazy-load routes using React.lazy() and Suspense to minimize the initial bundle size.

Asset Optimization: Compress all images. Use SVGs for icons and illustrations.

Rerender Minimization: Memoize expensive calculations with useMemo and callback functions with useCallback only when profiling indicates a bottleneck. Git and Deployment Workflow Branching Model main / production: Stable release code. staging: Pre-production testing environment. development: Integration branch for new features.

Feature branches: Named as feature/ticket-number-short-description. Commit Messages We follow the Conventional Commits specification: feat: A new feature. fix: A bug fix. docs: Documentation changes.

style: Changes that do not affect the meaning of the code (formatting, missing semi-colons).

refactor: A code change that neither fixes a bug nor adds a feature. To tailor this guide further, let me know:

What backend API protocol does your team use? (REST, GraphQL, or gRPC?)

Do you have a preferred testing framework? (Jest, Vitest, or Playwright?)