vite-blueprint 🚀

To install run the following Commands

➡️ npx vite-blueprint

A minimal yet powerful project starter for Vite + React, pre-configured with:

• ✅ TailwindCSS v4
• ✅ React Router
• ✅ Axios
• ✅ Clean & scalable folder structure
• ✅ TypeScript or JavaScript support
• ✅ Sample layout (Navbar, Footer, Pages)

Save hours of setup time and start building right away.

✨ Features

• 📁 Predefined folder structure: components, layout, pages, services, assets
• 🎨 TailwindCSS v4 integration using @tailwindcss/vite
• 🔁 React Router v6+ setup with layout routing
• 🌐 Axios with a base service (apiClient.js or apiClient.ts)
• 🧠 Choose between TypeScript or JavaScript
• 🧩 Includes basic Navbar, Footer, Home, and About pages

🚀 How to Use vite-blueprint

just run a single command using NPX.

1. 🛠️ Run with NPX

Use the following command to create a new project:

>> npx vite-blueprint

Then follow the prompts:

2. 📦 Enter Your Project Name

Type the name of the project you want to create.

3. 🧠 Select Project Variant (JavaScript or TypeScript)

Choose between a JavaScript or TypeScript template.

4. 📁 Navigate to Your Project Folder

Move into your new project directory.

5. 🧱 Folder Structure & Installed Packages

Here's what your scaffolded project looks like, including all dependencies.

cd my-app
npm run dev



🧱 Folder Structure
perl
Copy
Edit
my-app/
├── src/
│   ├── assets/
│   ├── components/        # Navbar, Footer
│   ├── layout/            # MainLayout
│   ├── pages/             # Home, About
│   ├── services/          # Axios setup
│   ├── App.tsx / App.jsx
│   ├── main.tsx / main.jsx
│   └── index.css
├── tailwind.config.js
├── vite.config.ts / js




📦 What's Installed
vite

react + react-dom

tailwindcss (v4 via @tailwindcss/vite)

react-router-dom

axios



🛠 Customization
You can easily extend this starter with:

Authentication

State management (Zustand, Redux, etc.)

API integration

Themes & dark mode

📄 License
MIT