React Template

English | Vietnamese

Introduction

A feature-based CMS React template designed to work seamlessly with the Clean Architecture .NET template.

Give a ⭐

If you find this helpful or learn something from it, feel free to give it a ⭐

Feature-Based Structure 🚀

A feature-based structure organizes code by business features or functional domains rather than by technical layers. Each feature folder contains all the related components, hooks, utilities, styles, and tests needed for that specific feature to function independently.

Pros

• High Cohesion - Related code stays together, making features easier to understand and modify.
• Scalability - Easy to add new features without affecting existing structure
• Team Collaboration - Multiple developers can work with minimal conflicts
• Maintainability - Changes are isolated to specific features

Cons

• Initial Complexity - Requires upfront planning for feature boundaries
• Potential Duplication - Risk of recreating similar components across features
• Unclear Boundaries - Some functionality may blur between features

📁 Project Structure

src/
├── assets/          # Static files (images, fonts, icons)
├── components/      # Reusable UI components
├── config/          # App configuration files
├── design-system/   # Design tokens and theme configuration
├── features/        # Feature-based modules
├── hooks/           # Custom React hooks
├── layouts/         # Page layout components
├── lib/             # Third-party library configurations
├── locales/         # Internationalization (i18n) translation files
├── notifications/   # Notification system utilities
├── routes/          # Routing configuration
├── services/        # API calls and external services
├── store/           # State management (Redux/Zustand)
├── styles/          # Global styles and CSS modules
├── types/           # TypeScript type definitions
├── utils/           # Helper functions and utilities
├── App.tsx          # Root application component
├── i18n.d.ts        # i18n TypeScript declarations
├── i18n.ts          # i18n configuration
├── index.css        # Global CSS styles
├── main.tsx         # Application entry point
└── vite-env.d.ts    # Vite environment type definitions

Features ✨

1. 🔒 Authentication – Login & Forgot Password
2. 👤 Profile Management – Update Profile & Change Password
3. 🛡️ Role Management
4. 👥 User Management
5. 🌐 Multi-language Support (i18n)
6. 🔍 Advanced Data Handling – Sorting, Searching, Filtering (LHS Bracket), Pagination (Offset & Cursor), fully compatible with the Clean Architecture .NET template
7. 📱 Fully Responsive UI – Optimized for all screen sizes

Some Screenshots 🔥

📦 Installation

1. Clone the repository

git clone https://github.com/minhsangdotcom/react.git
cd react

2. Install dependencies

npm install
# or
yarn --network-timeout 1000000000

3. Environment setup

Create a .env.development file in the root directory:

VITE_API_BASE_URL=http://localhost:8080/api/v1
VITE_HOST_PORT=3000
VITE_STORAGE_PREFIX=theTemplate_
VITE_DEFAULT_LANGUAGE=vi
VITE_SUPPORTED_LANGUAGES=en,vi

Note: http://localhost:8080/api/v1 points to the .NET backend template. Make sure your backend is running on this URL.

4. Run development server

yarn dev

The application will be available at http://localhost:3000

Tech Stack

• React - UI library
• TypeScript - Type-safe JavaScript
• Vite - Build tool and dev server
• React Router DOM - Client-side routing
• Redux Toolkit - State management
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Headless UI components
• React Hook Form - Form management
• Zod - Schema validation
• Axios - HTTP client
• i18next - Internationalization

License

This project is under MIT License.