wojiangkuanglong/react-fresh-starter

A React project starter template

React Fresh Starter

English | 中文

This is a continuously updated React project starter template designed to streamline the process of initiating new projects. It provides a foundation with essential configurations and best practices, allowing you to focus on building your application without the hassle of setting up the basics.

📔 Table of Contents

• About the Project
  • Tech Stack
  • Environment Variables
• Getting Started
  • Prerequisites
  • Run Locally
  • Collaboration Debugging
  • Deployment
• Roadmap

🌟 About the Project

👾 Tech Stack

Technologies Used

• React: A JavaScript library for building user interfaces
• TypeScript: A typed superset of JavaScript
• pnpm: Fast, disk space-efficient package manager
• tailwindcss: Utility-first CSS framework
• Zustand: A small, fast, and scaleable state management for React
• React Query: Data fetching and caching library for React
• shadcn/ui: UI components library
• msw: Mocking HTTP requests during development and testing
• swagger-typescript-api: Generate TypeScript client for any API defined by OpenAPI Specification
• Storybook: frontend workshop for building UI components and pages in isolation
• react-i18next: Internationalization for react done right. Using the i18next i18n ecosystem.

Tools for Development

• vitest: Next generation testing framework powered by Vite
• react-testing-library: Simple and complete React DOM testing utilities that encourage good testing practices
• React Testing Library: A pluggable linter for JavaScript and TypeScript
• Prettier: Opinionated code formatter
• CommitLint: Linting for conventional commit messages
• Husky: Git hooks made easy
• Lint-Staged: Run linters on pre-committed files
• knip: Find unused files, dependencies and exports in your JavaScript and TypeScript projects
• ls-lint: An extremely fast file and directory name linter

🔑 Environment Variables

Reference the .env.example file in the env folder, and create .env.development and .env.production files

🧰 Getting Started

‼️ Prerequisites

This project uses pnpm as package manager

 npm install --global pnpm

🏃 Run Locally

Clone the project

  git clone https://github.com/wojiangkuanglong/react-fresh-starter.git

Go to the project directory

  cd react-fresh-starter

Install dependencies

  # node ^18.x.x，pnpm ^8.x.x
  pnpm install

Start the server

  pnpm start

or

  pnpm dev

Other

# Check for unused files, export, and manage dependencies
pnpm knip

# Generate components based on plop templates
pnpm generate

# Automatically generate API based on swagger.json, default location is src/services
pnpm api

# Automatically generate Mock data based on swagger.json, default location is src/__mocks__
pnpm mock

👋 Collaboration Debugging

• Testing Environment

  • Configure server proxy in vite.config.ts
  • Create a .env.development.local file in the env directory based on .env.example, with VITE_PROXY_TARGET set to the backend address.

• Production Environment

  Set VITE_PROXY_COOKIE, It is recommended to use whistle with Proxy SwitchyOmega browser extension.

🚩 Deployment

To deploy this project run

  pnpm release

1. Open an MR (Merge Request) against the 'publish' branch.
2. After successful deployment and completion of online regression, locally execute git checkout publish and pull the latest code.
3. Run pnpm run release to automatically update the CHANGELOG and create a tag based on commits.
4. Execute git push --follow-tags origin publish.
5. Initiate an MR from 'publish' to 'master' on Github.

🧭 Roadmap

• i18n
• storybook
• test