A lightning-fast React starter template for modern web applications
Vitkd - Speed up your development workflow
- ⚡️ React 19 - Latest React features and improvements
- 🦾 TypeScript - Type-safe development
- 🎨 Tailwind CSS - Utility-first CSS framework
- 👑 Atomic Design - Scalable component architecture
- 🗂 Relative imports - Clean import paths
- 😃 Hero icons - Beautiful hand-crafted SVG icons
- ☁️ Vercel deployment - Zero-config hosting
- 📝 ESLint - Code linting for React/Hooks & TypeScript
- 💅 Prettier - Code formatting
- 🎯 TypeScript - Type safety
- 🚀 Vercel - Zero-config deployment
- React 19.0.0
- React DOM 19.0.0
- Framer Motion 12.10.0
- Hero Icons 2.1.5
- TypeScript 5.6.3
- Vite 5.4.10
- Tailwind CSS 3.4.14
- ESLint 9.13.0
- Prettier 3.3.3
- Vitest 3.1.3
- Testing Library 14.2.1
src/
├── app/ # Application routes and pages
├── components/ # React components following Atomic Design
│ ├── atoms/ # Basic building blocks
│ ├── molecules/ # Combinations of atoms
│ └── organisms/ # Complex UI components
├── hooks/ # Custom React hooks
└── test/ # Test setup and utilities
- Node.js >= 18
- Yarn >= 1.22.5
yarn devThe development server runs on http://localhost:3000
# Type checking
yarn typecheck
# Linting
yarn lint
# Formatting
yarn format# Run tests
yarn test
# Run tests with coverage
yarn test:coverageyarn buildThe build output will be in the dist directory.
Create a .env file in the root directory:
VITE_API_URL=your_api_urlThis project follows Conventional Commits:
<type>(<scope>): <description>
[optional body]
[optional footer]
- Follow TypeScript strict mode
- Use functional components with TypeScript
- Follow Atomic Design principles
- Write tests for new features
- Maintain 80%+ test coverage
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
- React Hooks rules
- TypeScript strict mode
- React Refresh rules
- Custom rules for code quality
- Single quotes
- Trailing commas
- 2 spaces indentation
- 80 characters line length
- Strict mode enabled
- Path aliases configured
- Modern JavaScript features
- React JSX support
The project supports modern browsers as defined in the browserslist configuration:
> 0.2%
not dead
not IE 11
Create a repo from this template on GitHub
npx degit imkuldeepahlawat/vitkd my-vitkd-app
cd my-vitkd-app
yarn # If you don't have yarn installed, run: npm install -g yarn- Update
nameandauthorinpackage.json - Update author name in
LICENSE - Update title in
index.html - Replace favicon in
public - Update manifest in
public - Customize this README
Start the development server:
yarn devVisit http://127.0.0.1:3000/
Create a production build:
yarn buildThe build output will be in the dist directory.
- Go to Vercel
- Import your repository
- Follow the prompts
- Your app will be live in minutes
If pre-commit hooks aren't working:
husky installThis command should run automatically after installing dependencies.
This template was created to streamline the React development process. It includes:
- Modern tooling and best practices
- Optimized development workflow
- Production-ready configuration
- Clean, maintainable code structure
Feel free to customize and maintain your own version!
This project is inspired by and built upon the excellent work of Josep Vidal, particularly his vital template. I've extended and customized it to create Vitkd, adding our own improvements while maintaining the core principles of modern React development.
This project is licensed under the MIT License - see the LICENSE file for details.