Ryan's Remix Awesome Starter

Features

• [x] ⚙️  Small & Fast Bundler (Vite)
• [x] 🗝️  Typed Programming (TypeScript)
• [x] 🗄️  Database Design (Prisma)
• [x] 🕋  Simple State Management (Zustand)
• [x] 📙  Strict Codebase (ESLint & Prettier)
• [x] 🧵  Built-in Component & Layouts
• [x] ✨  Reset Style Setup
• [x] ⚡️  Mixin Style Setup
• [x] 📍  Absolute Paths
• [x] 📱  Check Detection
• [x] 📫  Page SEO
• [ ] 🪄  Dark Mode

Frameworks

• Bundler : Vite
• SSR : Remix
• Core : React
• Store : Zustand
• 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

npx remix-starter my-project
cd my-project

2) Run Project

npm run dev

3) Run Deploy

npm run build

Using with Mixin

// 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)};
`