Prototype_svelte

Infrastructure monitoring dashboard built with Svelte, TypeScript, Tailwind CSS, and Vite. It allows visualization of devices, system metrics, alerts, and reports in a modern, responsive interface.

#css #d3 #javascript #pnpm #svelte #svelte-spa-router #tailwindcss #typescript #vite #lucide-sve

Need a Svelte website built?

Hire a professional Svelte developer today.

Demo Download

Prototype Svelte

This is a prototype of a Svelte app that I'm building to learn Svelte and TypeScript.

🧱 Tech Stack

Svelte 4
Vite 5
TypeScript
Tailwind CSS
Lucide Icons
svelte-spa-router
pnpm

📦 Requirements

Node.js ≥ 18
pnpm ≥ 8

🚀 Installation

pnpm install

🧪 Development

pnpm dev

Local development server runs by default at http://localhost:5173.

🛠 Available Scripts

Command	Description
`pnpm dev`	Start development server
`pnpm build`	Build the project for production
`pnpm preview`	Preview the production build
`pnpm check`	Type and diagnostics validation

🗂 Project Structure

src/
├── components/         # Reusable UI components
├── views/              # Views mapped by the router
├── stores/             # Global state using Svelte stores
├── utils/              # Utility/helper functions
└── App.svelte          # Root component

📦 Production Build

pnpm build

The production build is output to the dist/ directory. You can deploy this folder to any static hosting provider (Netlify, Vercel, GitHub Pages, etc).

Make sure to enable fallback routing to index.html if you're using SPA navigation.

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Need a Svelte website built?

Hire a professional Svelte developer today.