https://github.com/sankeyangshu/lemon-mobile-react
A mobile web app template based on the React ecosystem. ๐ ไธไธชๅบไบ React ็ๆ็ณป็ป็็งปๅจ web ๅบ็จๆจกๆฟใ
https://github.com/sankeyangshu/lemon-mobile-react
axios daisy-ui echarts i18n-react i18next react tailwindcss tanstack-query tanstack-router template typescript zustand
Last synced: 3 days ago
JSON representation
A mobile web app template based on the React ecosystem. ๐ ไธไธชๅบไบ React ็ๆ็ณป็ป็็งปๅจ web ๅบ็จๆจกๆฟใ
- Host: GitHub
- URL: https://github.com/sankeyangshu/lemon-mobile-react
- Owner: sankeyangshu
- License: mit
- Created: 2023-04-11T12:48:17.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2026-01-23T02:54:38.000Z (2 months ago)
- Last Synced: 2026-01-23T19:43:25.590Z (2 months ago)
- Topics: axios, daisy-ui, echarts, i18n-react, i18next, react, tailwindcss, tanstack-query, tanstack-router, template, typescript, zustand
- Language: TypeScript
- Homepage: https://lemon-mobile-react.vercel.app
- Size: 2.05 MB
- Stars: 477
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
lemon-mobile-react
English / [็ฎไฝไธญๆ](./README.zh-CN.md)
A mobile web app template based on the React ecosystem.
[Docs](https://lemon-template-docs.vercel.app/mobile-react/) / [Feedback](https://github.com/sankeyangshu/lemon-mobile-react/issues)
---
## Introduction
๐๐๐ **lemon-mobile-react** is built using the latest technologies, including `React19`, `Vite7`, `TanStack Router`, `TanStack Query`, `Daisyui`, `Zustand`, `TypeScript`, and `Tailwindcss V4`. It integrates features like `Dark Mode`, system theme colors, and Mock data.
You can directly start developing your business logic on this template! Hope you enjoy it. ๐๐๐
> [!NOTE]
> If this project is helpful to you, please click the "Star" button in the top-right corner. Thank you!
## Preview
๐ [Click Demo](https://lemon-mobile-react.vercel.app) (Switch to mobile view on PC browsers)
## Other Templates
- [lemon-mobile-vue](https://github.com/sankeyangshu/lemon-mobile-vue) - A mobile web app template based on the Vue 3 ecosystem
- [lemon-mobile-uniapp](https://github.com/sankeyangshu/lemon-mobile-uniapp) - A mobile web app template based on the UniApp ecosystem
## Features
- โก๏ธ Developed with `React` + `Hooks`
- โจ Uses `Vite7` as the development and build tool (includes `Gzip` packaging, `TSX` syntax, proxy support, etc.)
- ๐ Fully integrates `TypeScript`
- ๐ฆ Uses `TanStack Router` for routing management, providing a type-safe routing system
- ๐ Uses `TanStack Query` for server state management, simplifying data fetching and caching
- ๐ Uses `Zustand` for state management, lightweight, simple and easy to use
- ๐ฆ `@reactuses/core` High quality and reliable React Hooks library
- ๐จ `Daisyui` component library
- ๐ `Tailwindcss` for instant atomic CSS engine
- ๐ Integrates multiple icon solutions
- ๐ Supports Dark Mode
- ๐ Multi-language support with `i18n`
- ๐ฅ Integrates `ECharts` for data visualization, with `useECharts` Hooks encapsulation
- โ๏ธ Uses `Vitest` for unit testing
- โ๏ธ `Axios` encapsulation
- ๐พ Local `Mock` data simulation support
- ๐ฑ Browser compatibility
- ๐ฅ `Gzip` compression for packaged resources
- ๐ก๏ธ First screen loading animation
- ๐ช Integrates `Eslint` code validation standards, with `Prettier` as the default code formatter
- ๐ Uses `simple-git-hooks`, `lint-staged`, and `commitlint` to standardize commit messages
## Prerequisites
Familiarity with the following concepts will help you use this template effectively:
- [React](https://react.dev/) - Familiar with `React` basic syntax
- [Vite](https://cn.vitejs.dev/) - Understand `Vite` features
- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) - Proficient in using `Zustand`
- [TypeScript](https://www.typescriptlang.org/) - Master basic `TypeScript` syntax
- [TanStack Router](https://tanstack.com/router/latest/docs/framework/react/overview) - Familiar with `TanStack Router` basic usage
- [Icones](https://icones.js.org/) - Recommended icon library for the project, but `SVG Icon` is also an option
- [Tailwind CSS](https://tailwindcss.com/) - High-performance and extremely flexible instant atomic CSS engine
- [@reactuses/core](https://reactuse.com/en-US/) - A high-quality and reliable React Hooks library
- [Daisyui](https://daisyui.com/docs/intro/) - Tailwind CSS plugin for faster, cleaner, and simpler Tailwind CSS development
- [ECharts6](https://echarts.apache.org/handbook/zh/get-started/) - Familiar with basic `ECharts` usage
- [Mock.js](https://github.com/nuysoft/Mock) - Understand basic `Mock.js` syntax
- [ES6+](http://es6.ruanyifeng.com/) - Proficient in `ES6+` syntax
## Environment Setup
Ensure the following tools are installed locally: [Pnpm](https://pnpm.io/), [Node.js](http://nodejs.org/), and [Git](https://git-scm.com/).
- Recommended to use [pnpm>=8.15.4](https://pnpm.io/), otherwise dependencies may not install properly, causing build errors.
- [Node.js](http://nodejs.org/) version requirement is `18.x` or above. Recommended: `^18.18.0 || >=20.0.0`.
## VSCode Extensions
If you use [VSCode](https://code.visualstudio.com/) (recommended), install the following extensions for improved development efficiency and code formatting:
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Tailwind CSS IntelliSense plugin
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - `.env` file highlighting
- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - Better error visualization
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - Maintain consistent coding styles across IDEs
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Script linting
- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All-in-one i18n support
- [JavaScript and TypeScript VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sankeyangshu.vscode-javascript-typescript-snippets) - Visual Studio Code snippets for JavaScript and TypeScript
- [React Collection VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sankeyangshu.vscode-react-collection-snippets) - A React Code Snippets Extension
## Usage
### Use the CLI
```bash
# Copy the command - 'project' is your project name
pnpm create lemon project -t mobile-react
```
### GitHub Template
[Use this template to create a repository](https://github.com/sankeyangshu/lemon-mobile-react/generate)
### Clone
```bash
# Clone the project
git clone https://github.com/sankeyangshu/lemon-mobile-react.git
# Enter the project directory
cd lemon-mobile-react
# Install dependencies - recommended to use pnpm
pnpm install
# Start the development server
pnpm dev
# Build for production
pnpm build
```
## Git Commit Guidelines
### Commit Standards
The project enforces Git commit messages using `simple-git-hooks` and `commitlint`, adhering to the widely adopted [Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) guidelines.
- `feat`: Add new features
- `fix`: Fix bugs
- `docs`: Documentation changes
- `style`: Code formatting (does not affect functionality, e.g., spacing, semicolons, etc.)
- `refactor`: Code refactoring (neither bug fixes nor new features)
- `perf`: Performance optimizations
- `test`: Add or update test cases
- `build`: Changes to build process or external dependencies (e.g., updating npm packages, modifying webpack configuration)
- `ci`: Changes to CI configuration or scripts
- `chore`: Changes to build tools or auxiliary libraries (does not affect source files or tests)
- `revert`: Revert a previous commit
## Community
You can use [issues](https://github.com/sankeyangshu/lemon-mobile-react/issues) to report problems or submit a Pull Request.
## Browser Support
- For local development, we recommend using the latest version of Chrome. [Download](https://www.google.com/intl/en/chrome/).
- The production environment supports modern browsers. IE is no longer supported. For more details on browser support, check [Can I Use ES Module](https://caniuse.com/?search=ESModule).
| [
](http://godban.github.io/browsers-support-badges/)IE | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
| :----------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## License
[MIT](./LICENSE) License ยฉ 2023-PRESENT [sankeyangshu](https://github.com/sankeyangshu)