React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname
    }
  }
});

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    "react-x": reactX,
    "react-dom": reactDom
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules
  }
});

"# base-react-v2"

React TypeScript Base Project

A modern React TypeScript project with best practices and common integrations.

Project Structure

src/
├── components/           # Reusable UI components
│   ├── layout/          # Layout components
│   ├── product/         # Product-related components
│   └── ui/              # Shadcn UI components
├── config/              # Configuration files
│   ├── minio.ts         # MinIO configuration
│   ├── socket.ts        # Socket.IO configuration
│   └── reactQuery.ts    # React Query configuration
├── hooks/               # Custom React hooks
│   ├── useAuth.ts       # Authentication hook
│   ├── useMinio.ts      # MinIO hook
│   ├── useProducts.ts   # Products hook
│   └── useSocket.ts     # Socket.IO hook
├── pages/               # Page components
│   ├── auth/           # Authentication pages
│   └── products/       # Product pages
├── services/           # API services
│   ├── auth.ts         # Authentication service
│   ├── base.ts         # Base API service
│   └── product.ts      # Product service
├── store/              # State management
│   ├── types.ts        # Store types
│   └── useStore.ts     # Zustand store
├── types/              # Global TypeScript types
├── utils/              # Utility functions
├── App.tsx             # Root component
└── main.tsx            # Entry point

Features

⚡️ Vite + React + TypeScript
🎨 Shadcn UI + Tailwind CSS
🔄 React Query for data fetching
🔌 Socket.IO for real-time features
📦 MinIO for file storage
📱 Responsive design
🔒 Authentication with JWT
🎯 TypeScript for type safety
🐶 Husky for git hooks
📝 Commitlint for commit message validation

Prerequisites

Node.js 18+
pnpm

Getting Started

Clone the repository:

git clone <repository-url>
cd react-base-ts

Install dependencies:

pnpm install

Create .env file:

VITE_API_URL=https://fakestoreapi.com

# MinIO Configuration
VITE_MINIO_ENDPOINT=localhost
VITE_MINIO_PORT=9000
VITE_MINIO_USE_SSL=false
VITE_MINIO_ACCESS_KEY=minioadmin
VITE_MINIO_SECRET_KEY=minioadmin
VITE_MINIO_BUCKET_NAME=products
VITE_MINIO_PUBLIC_URL=http://localhost:9000

# Socket.IO Configuration
VITE_SOCKET_URL=http://localhost:3000

Start development server:

pnpm dev

Available Scripts

pnpm dev - Start development server
pnpm build - Build for production
pnpm preview - Preview production build
pnpm lint - Run ESLint
pnpm format - Format code with Prettier

Key Dependencies

@tanstack/react-query - Data fetching and caching
axios - HTTP client
minio - Object storage
socket.io-client - Real-time communication
zustand - State management
zod - Schema validation
@hookform/resolvers - Form validation
react-hook-form - Form handling
react-router-dom - Routing
lucide-react - Icons
tailwindcss - Styling
shadcn-ui - UI components
husky - Git hooks
@commitlint/cli - Commit message linting

Commit Conventions

This project follows Conventional Commits specification. Commit messages should be formatted as follows:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Types

feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing tests
build: Changes to the build system
ci: Changes to CI configuration files and scripts
chore: Other changes that don't modify source or test files
revert: Reverts a previous commit

Examples

feat(auth): add login functionality
fix(api): handle network errors
docs(readme): update installation instructions
style(components): format code according to prettier

Best Practices

Use TypeScript for type safety
Follow functional programming patterns
Implement proper error handling
Use React Query for data fetching
Implement responsive design
Follow component composition patterns
Use proper naming conventions
Implement proper loading states
Handle edge cases
Use proper form validation
Follow commit conventions

Contributing

Fork the repository
Create your feature branch
Commit your changes following the commit conventions
Push to the branch
Create a Pull Request

License

This project is licensed under the MIT License.

Stream Platform Frontend (Customer)

A modern, responsive streaming platform frontend for customers built with React, TypeScript, and Vite.

Technologies Used

React 19: Modern UI library for building component-based interfaces
TypeScript: For type safety and better developer experience
Vite: Fast build tool and development server
TailwindCSS: Utility-first CSS framework for styling
Shadcn UI: Accessible and customizable UI components
React Query: Data fetching, caching, and state management for API calls
Zustand: Lightweight state management
i18next: Internationalization framework supporting multiple languages (English and Vietnamese)
React Router DOM: For client-side routing
Socket.IO: For real-time communication
HLS.js: To support HTTP Live Streaming video playback
MinIO: For object storage integration
Zod: Schema validation
React Hook Form: Form handling with validations
Swiper: For carousel/slider components
Axios: HTTP client for API requests

Project Structure

src/
├── assets/               # Static assets (images, videos, etc.)
├── components/           # Reusable UI components
│   ├── app/              # Application-specific components
│   │   ├── carosel/      # Carousel components
│   │   ├── categoryCard/ # Category card components
│   │   ├── channelCard/  # Channel card components
│   │   ├── header/       # Header components
│   │   ├── sidebar/      # Sidebar components
│   │   └── streamCard/   # Stream card components
│   ├── base/             # Base components for app structure
│   │   ├── error/        # Error boundary components
│   │   ├── loading/      # Loading indicators
│   │   ├── notification/ # Notification components
│   │   └── theme/        # Theme provider and related components
│   └── ui/               # Shadcn UI components
├── config/               # Configuration files
│   ├── i18Config.ts      # i18next configuration
│   ├── minioConfig.ts    # MinIO configuration
│   ├── reactQueryConfig.ts # React Query configuration
│   └── socketConfig.ts   # Socket.IO configuration
├── constants/            # Application constants
├── guards/               # Authentication and route guards
├── hooks/                # Custom React hooks
│   ├── useAuth.ts        # Authentication hook
│   ├── useChannelQuery.ts # Channel data fetching hook
│   ├── useMinio.ts       # MinIO hook
│   └── useProducts.ts    # Products hook
├── layouts/              # Layout components
│   └── mainLayout.tsx    # Main application layout
├── lib/                  # Utility functions
├── pages/                # Page components
│   ├── auth/             # Authentication pages
│   ├── chanel/           # Channel pages
│   │   ├── components/   # Channel-specific components
│   │   └── pages/        # Different channel views
│   ├── home/             # Home page
│   ├── video/            # Video playback page
│   └── watching/         # Live streaming page
├── router/               # Routing configuration
├── services/             # API services
│   ├── app/              # Application services
│   ├── auth/             # Authentication services
│   └── base/             # Base API service
├── store/                # State management (Zustand)
│   ├── slices/           # Store slices for different features
│   └── types.ts          # Store types
└── types/                # TypeScript type definitions

Folder Details

`src/components/`

Contains all reusable components divided into three categories:

app/: Application-specific components that are used across different pages
- Example: ChannelCard.tsx renders channel preview cards on the home page
base/: Core components that handle app structure and behavior
- Example: ErrorBoundary.tsx catches and displays errors in components
ui/: Shadcn UI components that provide the base design system
- Example: button.tsx defines the button component with various styles

`src/config/`

Configuration files for various libraries and services:

i18Config.ts: Sets up internationalization with support for English and Vietnamese
- Example: Defines translation keys like channel.followers as "followers" in English and "người theo dõi" in Vietnamese
reactQueryConfig.ts: Configures React Query for data fetching

`src/hooks/`

Custom React hooks for reusable logic:

useChannelQuery.ts: Hook for fetching channel data and managing mutations
- Example: Provides functions like followChannel and unfollowChannel while managing loading states

`src/pages/`

All the main pages of the application:

chanel/: Channel-related pages
- pages/: Different views for a channel (Home, About, Videos, Schedule)
- components/: Channel-specific components like Header
- Example: Channel.tsx is the parent component that handles data fetching and routing

`src/store/`

State management using Zustand:

slices/: Store slices divided by feature
- Example: channelSlice.ts manages channel-related state like following status
types.ts: Type definitions for the store

`src/services/`

API services for data fetching:

app/: Application-specific services
- Example: channel.ts handles API calls for channel data
auth/: Authentication services
base/: Base API service with common functionality

Internationalization (i18n)

The application supports multiple languages with translations managed through i18n:

English (default)
Vietnamese

Translation keys are organized by feature (e.g., channel, error, common) and used throughout the application with the useTranslation hook.

Routing

React Router DOM is used for client-side routing with routes configured based on features:

channelRouter.tsx: Manages routes for channel pages (/channel/:username)
homeRouter.tsx: Configures the home page route
loginRouter.tsx: Handles authentication routes

State Management

The application uses a combination of:

Zustand: For global app state (authentication, channel data, etc.)
React Query: For server state management and data fetching

Getting Started

Clone the repository:

git clone <repository-url>
cd stream-platform-fe-customer

Install dependencies:

pnpm install

Create .env file with necessary configurations (refer to .env.example)
Start development server:

pnpm dev

Available Scripts

pnpm dev: Start development server
pnpm build: Build for production
pnpm preview: Preview production build
pnpm lint: Run ESLint
pnpm format: Format code with Prettier

Features

⚡️ Fast development and build with Vite
🌐 Multilingual support (English and Vietnamese)
🎨 Modern UI with Shadcn UI and TailwindCSS
📱 Fully responsive design
🔌 Real-time communication with Socket.IO
📹 Video streaming with HLS.js
🔒 Authentication system
📦 Efficient state management with Zustand and React Query

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.cursor/rules		.cursor/rules
.husky		.husky
public		public
src		src
.dockerignore		.dockerignore
.gitignore		.gitignore
.prettierrc		.prettierrc
Dockerfile		Dockerfile
README.md		README.md
commitlint.config.js		commitlint.config.js
components.json		components.json
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
index.html		index.html
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

React + TypeScript + Vite

Expanding the ESLint configuration

React TypeScript Base Project

Project Structure

Features

Prerequisites

Getting Started

Available Scripts

Key Dependencies

Commit Conventions

Types

Examples

Best Practices

Contributing

License

Stream Platform Frontend (Customer)

Technologies Used

Project Structure

Folder Details

src/components/

src/config/

src/hooks/

src/pages/

src/store/

src/services/

Internationalization (i18n)

Routing

State Management

Getting Started

Available Scripts

Features

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

`src/components/`

`src/config/`

`src/hooks/`

`src/pages/`

`src/store/`

`src/services/`

Packages