GoodGo Platform - Web Client
EN: Enterprise-grade web client for GoodGo microservices platform
VI: Web client cấp doanh nghiệp cho nền tảng microservices GoodGo
Features / Tính Năng
- ✅ Brand Identity System - Complete logo suite, favicons, and illustrations
- ✅ Design System - Professional design tokens with brand colors, gradients, and glassmorphism
- ✅ UI Component Library - Enhanced components with brand variants (Button, EmptyState, Loading States, Logo)
- ✅ Dark/Light Theme - Automatic theme switching with system preference
- ✅ Internationalization - Multi-language support (i18n ready)
- ✅ TypeScript - Full type safety
- ✅ Tailwind CSS 4 - Modern utility-first styling
- ✅ Next.js 14 - App Router with RSC
- ✅ Accessibility - WCAG 2.1 AA compliant
- ✅ PWA Ready - Progressive Web App support
Tech Stack
- Framework: Next.js 14 (App Router)
- Language: TypeScript 5+
- Styling: Tailwind CSS 4 (CSS-first)
- State Management: Zustand
- API Client:
@goodgo/http-client - Testing: Vitest + Playwright
- Component Development: Storybook
##Development / Phát Triển
# Install dependencies / Cài đặt dependencies
pnpm install
# Start dev server / Khởi động dev server
pnpm dev
# → http://localhost:3000
# Start Storybook / Khởi động Storybook
pnpm storybook
# → http://localhost:6006
# Build for production / Build cho production
pnpm build
# Type checking / Kiểm tra kiểu
pnpm typecheck
# Lint / Kiểm tra lỗi
pnpm lint
Environment Variables / Biến Môi Trường
Create .env.local file:
# API URL
NEXT_PUBLIC_API_URL=http://localhost/api/v1
Brand Assets / Tài Sản Thương Hiệu
Brand assets are located in /public/brand-assets/:
- Logos:
/brand-assets/logo/(full, icon, wordmark variants) - Icons:
/brand-assets/icons/(favicon) - Illustrations:
/brand-assets/illustrations/(empty state, error state)
Usage in components:
import { BrandLogo } from '@/components/ui/brand-logo';
import { BRAND } from '@/lib/brand-constants';
// Logo component
<BrandLogo variant="full" size="lg" />
// Brand constants
const primaryColor = BRAND.colors.primary.hex; // #3B82F6
UI Components / Components Giao Diện
BrandLogo
import { BrandLogo, BrandLogoLink } from '@/components/ui/brand-logo';
<BrandLogo variant="full" size="xl" />
<BrandLogoLink variant="icon" size="md" href="/" />
Button with Brand Variants
import { Button } from '@/components/ui/button';
<Button variant="brand">Get Started</Button>
<Button variant="glass">Learn More</Button>
Empty State
import { EmptyState, ErrorState } from '@/components/ui/empty-state';
<EmptyState
title="No items found"
description="Try adding some items"
action={{ label: 'Add Item', onClick: handleAdd }}
/>
Loading States
import {
BrandSpinner,
Skeleton,
SkeletonCard,
LoadingOverlay,
ProgressBar
} from '@/components/ui/loading-states';
<BrandSpinner size="lg" color="brand" />
<SkeletonCard />
<LoadingOverlay show={isLoading} message="Loading..." />
<ProgressBar value={progress} showLabel />
Design System / Hệ Thống Thiết Kế
Brand Colors
/* Primary (Blue) - Tech & Trust */
--brand-primary: #3B82F6;
/* Secondary (Purple) - Innovation */
--brand-secondary: #8B5CF6;
/* Accent (Cyan) - Energy */
--brand-accent: #06B6D4;
Tailwind Utilities
// Brand colors
<div className="bg-brand-primary text-white" />
<div className="bg-brand-gradient" />
// Glassmorphism
<div className="bg-glass-bg backdrop-blur-glass border-glass-border" />
// Brand shadows
<div className="shadow-brand hover:shadow-brand-lg" />
Project Structure / Cấu Trúc Dự Án
apps/web-client/
├── public/
│ └── brand-assets/ # Brand logos, icons, illustrations
├── src/
│ ├── app/ # Next.js App Router pages
│ ├── components/
│ │ └── ui/ # Reusable UI components
│ ├── lib/
│ │ └── brand-constants.ts # Brand helper functions
│ ├── styles/
│ │ └── theme.css # Design system tokens
│ ├── contexts/ # React contexts (Theme, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── providers/ # Provider components
│ └── stores/ # Zustand stores
└── tailwind.config.js # Tailwind configuration
Contributing / Đóng Góp
Please read CONTRIBUTING.md for details.
License / Giấy Phép
Proprietary - GoodGo Platform