🧩 @happyhyep/reacture

🇰🇷 한국어 | 🇺🇸 English

🇺🇸 English ver

A fully-configured starter template for React projects with TypeScript, Vite, TailwindCSS, ESLint, and Prettier.

Stop copying boilerplate. Start building faster with a single command.

✨ Features

• ✅ Vite-powered fast dev server
• ✅ TailwindCSS preconfigured
• ✅ ESLint + Prettier ready
• ✅ TypeScript + path aliases
• ✅ Folder structure and naming conventions enforced by ESLint
• ✅ Husky + lint-staged for safe commits
• ✅ Default .vscode/settings.json for team consistency

⚙️ Getting Started

🔧 Requirements

• Node.js >= 18.12.0
• pnpm >= 10

🚀 Create your project

mkdir my-app
cd my-app
npx @happyhyep/reacture
pnpm install
pnpm dev

pnpm not installed? Install it here

📝 Optional: Change project name

After installation, you can change the project name in package.json:

{
  "name": "your-project-name"
}

🧱 Folder Structure

my-app/
├── src/
│   ├── features/
│   ├── pages/
│   ├── shared/
│   └── App.tsx
├── .husky/
├── .vscode/
├── .prettierrc
├── eslint.config.js
├── tailwind.config.js
├── tsconfig.json
├── postcss.config.ts
└── vite.config.ts

📦 Installed DevDependencies

pnpm
vite
typescript
eslint
prettier
tailwindcss
husky
lint-staged
@vitejs/plugin-react
vite-tsconfig-paths
eslint-plugin-project-structure

🧑‍💻 Contributing

This template is open source! Feel free to suggest improvements or submit a PR.

🪪 License

MIT © 2025 happyhyep

🇰🇷 한국어 ver

React 프로젝트를 시작할 때마다 반복되는 설정 작업, 더는 필요 없습니다. 이 템플릿은 Vite, TypeScript, TailwindCSS, ESLint, Prettier가 완벽히 사전 구성되어 있어 단 한 줄 명령어로 프로젝트 세팅이 완료됩니다.

✨ 주요 기능

• ✅ Vite 기반 빠른 개발 환경
• ✅ TailwindCSS 사전 구성
• ✅ ESLint + Prettier 통합
• ✅ TypeScript + 경로 별칭(tsconfig.paths)
• ✅ ESLint 기반 폴더 구조 & 네이밍 컨벤션 검사
• ✅ 커밋 전 자동 검사(Husky + Lint-staged)
• ✅ .vscode/settings.json 기본 설정 포함

⚙️ 설치 방법

사전 조건

• Node.js 18.12 이상
• pnpm 10 이상

설치 명령어

mkdir my-app
cd my-app
npx @happyhyep/reacture
pnpm install
pnpm dev

pnpm이 없다면 설치 링크를 참고하세요.

📝 선택사항: 프로젝트 이름 변경

설치 후 package.json에서 프로젝트 이름을 변경할 수 있습니다:

{
  "name": "your-project-name"
}

🧱 템플릿 폴더 구조

my-app/
├── src/
│   ├── features/
│   ├── pages/
│   ├── shared/
│   └── App.tsx
├── .husky/
├── .vscode/
├── .prettierrc
├── eslint.config.js
├── tailwind.config.js
├── tsconfig.json
├── postcss.config.ts
└── vite.config.ts

📦 함께 설치되는 개발 도구

pnpm
vite
typescript
eslint
prettier
tailwindcss
husky
lint-staged
@vitejs/plugin-react
vite-tsconfig-paths
eslint-plugin-project-structure

🤝 기여 안내

오픈소스 프로젝트로 누구나 자유롭게 PR 및 피드백을 줄 수 있습니다. 더 좋은 개발 경험을 위해 함께 만들어나가요!

🪪 라이선스

MIT © 2025 happyhyep