Astro Svelte Source Base

Modern web application built with Svelte, Astro, and TailwindCSS.

🚀 Tech Stack

• Framework: Astro + Svelte
• Styling: TailwindCSS + shadcn-svelte
• State Management: TanStack Query (formerly React Query)
• Form Handling: React Hook Form + Zod
• HTTP Client: Axios

📁 Project Structure

src/ ├── assets/ # Static assets ├── components/ # UI components │ ├── ui/ # shadcn components │ ├── common/ # Shared components │ └── features/ # Feature-specific components ├── config/ # App configuration ├── hooks/ # Custom hooks │ └── queries/ # TanStack Query hooks ├── layouts/ # Page layouts ├── lib/ │ ├── api/ # API configuration │ ├── utils/ # Utility functions │ └── types/ # TypeScript types ├── pages/ # Astro pages ├── services/ # API services └── styles/ # Global styles

🛠️ Development

Prerequisites

• Node.js 18+
• npm/pnpm/yarn

Environment Variables

Copy .env.example to .env:

bash cp .env.example .env

Required environment variables:

• PUBLIC_APP_NAME: Application name
• PUBLIC_API_URL: Backend API URL
• PUBLIC_APP_ENV: Environment (development/staging/production)

See .env.example for all available options.

Installation

Install dependencies npm install Start development server npm run dev Build for production npm run build Preview production build npm run preview

🔑 Key Features

• 🎨 Modern UI with shadcn components
• 🔄 Efficient state management with TanStack Query
• 📝 Type-safe forms with Zod validation
• 🌐 API integration with Axios
• 🎯 Clean Architecture principles
• 📱 Responsive design
• 🔒 Type-safe environment variables

📚 Documentation

Component Usage

svelte

API Services

Services follow a repository pattern with TypeScript interfaces:

typescript interface IUserService { getUsers(): Promise<User[]>; getUserById(id: string): Promise; // ... }

Environment Types

Environment variables are type-safe and validated with Zod. See src/config/index.ts.

The build output will be in the dist/ directory.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Authors

• DevDuck - Initial work

🙏 Acknowledgments

• Astro
• Svelte
• TailwindCSS
• shadcn-svelte