A modern Vite + React starter template with:
- React 19 - UI library
- TypeScript - Type safety
- Vite 7 - Build tool & dev server
- Tailwind CSS 4 - Utility-first CSS framework
- Framer Motion 12 - Animation library
- Style Dictionary - Design token management
- SVGR - SVG to React component transformer
- React Router 7 - Client-side routing
- TanStack Query - Server state management
- Axios - HTTP client
- ESLint - Code linting
- Prettier - Code formatting
- MSW (Mock Service Worker) - API mocking
This template includes elegant framer motion example components and a complete setup for building production-ready applications.
This project uses node (>= 20) and a package manager (npm, yarn or pnpm). Go check them out if you don't have them locally installed.
Clone the repository and install dependencies:
$ git clone <repository-url>
$ cd nextworld-fe
$ pnpm install
# npm install
# yarn installLet's run the development server!
$ pnpm run dev
# npm run dev
# yarn run devTo rebuild design tokens from the design-tokens directory:
$ pnpm run build-token
# npm run build-token
# yarn run build-token$ pnpm run build
# npm run build
# yarn run buildWe've already implemented recommended configurations in
eslint.config.tsand.prettierrc. Feel free to edit them if you have your own preferences.
- ⚡️ Lightning Fast HMR with Vite
- 🎨 Design Tokens powered by Style Dictionary
- 🎭 Smooth Animations with Framer Motion
- 🎯 Type Safety with TypeScript
- 🚀 Server State Management with TanStack Query
- 🎪 API Mocking with MSW for development
- 🎨 Utility-First CSS with Tailwind CSS 4
- 📦 SVG as React Components with SVGR
- 🛣️ Client-Side Routing with React Router 7