create-dolcevite

⚡ Effortlessly scaffold modern React + Vite projects with Zustand, TanStack Query, Day.js, and Ant Design — all preconfigured for productivity.

create-dolcevite is a CLI tool that streamlines the process of creating a new React + Vite project with a pre-configured set of dependencies. Inspired by Reactivite, it helps you instantly start scalable React apps with clean architecture, efficient state and data management, elegant UI components, and zero setup hassle.

🚀 Features

• ⚡ Vite - Lightning-fast build tool and dev server
• ⚛️ React 19 - Latest React with modern features
• 📘 TypeScript - Full TypeScript support with strict configuration
• 🎨 Tailwind CSS v4 - Latest Tailwind with modern CSS features
• 🏪 Zustand - Lightweight state management
• � TanStack Query - Powerful data fetching and caching
• 📅 Day.js - Lightweight date library
• 🎨 Ant Design - Enterprise-grade UI components
• 🎯 ESLint - Code linting with modern configuration
• 📱 Responsive - Mobile-first responsive design
• 🎭 Icons - Comprehensive icon library support

📦 Installation

Using npx (Recommended)

npx create-dolcevite my-app
cd my-app
npm run dev

Using npm

npm create dolcevite my-app
cd my-app
npm run dev

Install in current directory

npx create-dolcevite .

🛠️ What's Included

Core Technologies

• React 19 - Latest React with concurrent features
• TypeScript - Strict type checking
• Vite - Fast build tool and dev server
• Tailwind CSS v4 - Utility-first CSS framework
• Zustand - Lightweight state management
• TanStack Query - Server state management
• Day.js - Lightweight date manipulation
• Ant Design - Enterprise UI components

Development Tools

• ESLint - Code linting with React and TypeScript rules
• TypeScript - Strict configuration for better code quality
• Path Aliases - Clean imports with @/ prefix
• Hot Reload - Instant updates during development

🚀 Quick Start

1. Create your project:

   npx create-dolcevite my-awesome-app
   cd my-awesome-app

2. Install dependencies (automatically done):

   npm install

3. Start development server:

   npm run dev

4. Open your browser and visit http://localhost:5173

📝 Available Scripts

In the generated project, you can run:

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

�️ Project Structure

The generated project follows this structure:

my-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── hooks/
│   ├── lib/
│   ├── pages/
│   ├── store/              # Zustand stores
│   ├── App.tsx
│   ├── main.tsx
│   └── global.css
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
└── eslint.config.js

🔧 Configuration

State Management with Zustand

Create stores in src/store/ for global state management:

import { create } from "zustand";

export const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Data Fetching with TanStack Query

Use TanStack Query for server state management:

import { useQuery } from "@tanstack/react-query";

export function useData() {
  return useQuery({
    queryKey: ["data"],
    queryFn: async () => {
      const res = await fetch("/api/data");
      return res.json();
    },
  });
}

Styling with Tailwind CSS

The project uses Tailwind CSS v4 with the new Vite plugin for optimal performance.

TypeScript

Strict TypeScript configuration is included with path aliases:

import { Button } from "@/components/Button";
import { useStore } from "@/store";

🎨 Customization

After creating your project, you can:

• Add more Ant Design components
• Extend Zustand stores for your app's state
• Configure TanStack Query with your API endpoints
• Customize Tailwind CSS theme in tailwind.config.js

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - feel free to use this tool for your projects.

🔗 Resources

• React Documentation
• Vite Documentation
• Tailwind CSS
• Zustand
• TanStack Query
• Ant Design
• Day.js
• TypeScript

👨‍💻 Author

Javid Salimov - GitHub

Happy coding! 🎉