https://storybook-starterkit.vercel.app
- ⚡️ Next.js 14
- ⚛️ React 18
- 🛠️ TypeScript 5.1
- 🎨 TailwindCSS 3
- 💎 Prebuilt customizable components using TailwindCSS, Radix UI,React Aria
- 🚀 Tanstack Query for async state management (fetching, caching, synchronizing)
- 📋 React Hook Form + Yup
- 💾 Zustand for state management
- 📅 Day.js for datetime formatting
- 📁 Absolute Import and Path Alias — Import components using
@/prefix - 🔍 ESLint — To find and fix problems in your code
- 📝 Prettier — Format your code consistently
- 🌍 Internationalization (i18n) with next-international
├── components # global components used across the entire application
│ ├── button.tsx
│ └── input.tsx
├── common # shared/common feature like auth
│ └── auth
├── features # feature spesific code or components
│ ├── checkout
│ ├── login
│ ├── orders
│ ├── products
│ ├── profile
│ └── users
├── hooks # global hooks
├── layouts # layout components
├── lib # re-exporting different libraries preconfigured for the application
│ └── axios.ts
├── locales
│ ├── en.ts
│ └── id.ts
├── pages
├── public
├── services # all REST api
│ ├── login.ts
│ └── users.ts
├── styles # global style
├── types # shared types for entire application
└── utils # utils or helper
├── array.ts # use meaningfull name instead generic name
├── date-time.ts
├── math.ts
└── strings.ts
clone repo without commit history
git clone --depth=1 git@gitlab.badr.co.id:badr-interactive/starterkit-react-typescript.git my-project-namenpm installnpm run devexport default {
...
theme: {
extend: {
// adjust color to match brand color here
colors: {
primary: colors.sky,
secondary: colors.orange,
success: colors.emerald,
danger: colors.red,
info: colors.blue,
warning: colors.yellow,
gray: colors.gray, // choose your shade of grey (slate, gray, zinc, neutral, stone)
},
...
},
},
...
} npm run dev— Starts the application in development mode athttp://localhost:3000.npm run build— Creates an optimized production build of your application.npm start— Starts the application in production mode.npm run lint— Check code using ESLint.npm run lint:fix— Fix autofixable ESLint problem.npm run format:all— Format code using Prettier for all files.npm run format:dirty— Format code using Prettier for changed files only.npm run format:check— Check code format using prettier.
To import components or files, use the @ prefix.
// example
import { Button } from '@/components/Button'
// To import images or other files from the public folder
import avatar from '@/public/avatar.png'