A modern, full-stack web application boilerplate built with SvelteKit 5, Prisma, and Foundation Sites. This template provides a solid foundation for building scalable web applications with authentication, database integration, and modern UI components.
- 🚀 Svelte 5 via SvelteKit - Latest version with improved reactivity and performance
- 🎨 Foundation Sites - Professional UI framework with responsive grid system
- 🔐 Authentication - JWT-based authentication system (not yet implemented)
- 📝 Prisma ORM - Type-safe database queries and migrations
- 📧 Contact Form - Integrated contact form with SendGrid and reCAPTCHA
- 🎯 TypeScript - Full type safety throughout the application
- 🎨 TailwindCSS - Utility-first CSS framework
- 📱 Responsive Design - Mobile-first approach with Foundation Sites
- 🔍 SEO Ready - Built-in meta tags and SEO optimization (not yet implemented)
- 🧪 Testing - Playwright for E2E and Vitest for unit testing
- Node.js (v18 or higher), althrough I prefer Bun.
- MySQL database
- SendGrid account (for contact form)
- Google reCAPTCHA v3 keys
-
Clone the repository:
git clone https://github.com/maietta/SvelteKit-Prisma-Foundation-Boilerplate.git cd SvelteKit-Prisma-Foundation-Boilerplate
-
Install dependencies:
npm install
-
Set up environment variables:
cp .env.example .env
Edit
.env
with your configuration values. -
Set up the database:
npx prisma migrate dev
-
Start the development server:
npm run dev
Create a .env
file with the following variables:
# Database
DATABASE_URL="mysql://user:password@localhost:3306/dbname"
# Authentication
JWT_SECRET="your-secret-key"
# Contact Form
SENDGRID_API_KEY="your-sendgrid-api-key"
EMAIL_DESTINATION="[email protected]"
EMAIL_REPLY_TO="[email protected]"
# reCAPTCHA
PUBLIC_RECAPTCHA_V3_SITE_KEY="your-site-key"
RECAPTCHA_V3_SECRET_KEY="your-secret-key"
├── src/
│ ├── lib/
│ │ ├── components/ # Reusable UI components
│ │ ├── foundation/ # Foundation Sites configuration
│ │ └── utils/ # Utility functions
│ ├── routes/
│ │ ├── (auth)/ # Authentication routes
│ │ ├── (dashboard)/ # Protected dashboard routes
│ │ └── contact/ # Contact form route
│ └── app.html # Base HTML template
├── prisma/
│ └── schema.prisma # Database schema
└── static/ # Static assets
npm run dev
- Start development servernpm run build
- Build for productionnpm run preview
- Preview production buildnpm run check
- Type-check the codebasenpm run test
- Run E2E testsnpm run test:unit
- Run unit testsnpm run lint
- Lint the codebasenpm run format
- Format the codebase
This project can be deployed to various platforms:
- Vercel
- CapRover (Recommended)
- Coolify (Also a great recommendation)
- Any Node.js hosting platform
For Vercel deployment:
- Push your code to GitHub
- Import the project in Vercel
- Set up environment variables
- Deploy
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.