https://github.com/ryan-ahn/npm-remix-starter
remix 프로젝트 시작을 위한 NPM 패키지
https://github.com/ryan-ahn/npm-remix-starter
eslint-rules prettier-config remix typescript vite vitest
Last synced: 27 days ago
JSON representation
remix 프로젝트 시작을 위한 NPM 패키지
- Host: GitHub
- URL: https://github.com/ryan-ahn/npm-remix-starter
- Owner: ryan-ahn
- License: mit
- Created: 2024-05-16T03:33:53.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-29T20:51:07.000Z (over 1 year ago)
- Last Synced: 2025-01-22T04:43:07.930Z (over 1 year ago)
- Topics: eslint-rules, prettier-config, remix, typescript, vite, vitest
- Language: TypeScript
- Homepage:
- Size: 262 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ryan's Remix Awesome Starter
## Features
- [x] ⚙️ Small & Fast Bundler (Vite)
- [x] 🗝️ Typed Programming (TypeScript)
- [x] 🗄️ Database Design (Prisma)
- [x] 📙 Strict Codebase (ESLint & Prettier)
- [x] 🧪 Component Test Code (Vitest)
- [x] 📊 Test Coverage Measurement (Vitest)
- [x] 🧵 Built-in Component & Layouts
- [x] ✨ Reset Style Setup
- [x] ⚡️ Mixin Style Setup
- [x] 📍 Absolute Paths
- [x] 📫 Page SEO
## Frameworks
- **Bundler** : Vite
- **SSR** : Remix
- **Core** : React
- **Store** : Zustand
- **Test** : Vitest
- **Style** : Emotion
## Code Pattern
- **Static(public)**
- **Root(App)**
- ⎣ **constants** - static resource
- ⎣ **components** - atomic stateless components
- ⎣ **containers** - stateful components
- ⎣ **interface** - interfaces
- ⎣ **layouts** - layouts
- ⎣ **libs** - store, hooks, utils
- ⎣ **routes** - page routes
- ⎣ **styles** - style set
## Getting Started
### 1) Installation
```shell
npx remix-starter my-project
cd my-project
```
### 2) Run Project
```shell
npm run dev
```
### 3) Run Deploy
```shell
npm run build
```
## Using with Mixin
```javascript
// use mixin
import {
flexSet,
boxSet,
colorSet,
backgroundSet,
fontSet,
} from "@styles/mixin";
const Style = styled.div`
${theme.flexSet("center", "center", "column")};
${theme.boxSet("00px", "00px", "00px")};
${theme.colorSet("white", "black")};
${theme.backgroundSet("URL", "contain")};
${theme.fontSet(00, 000, 00)};
`;
```