Skip to content

SvelteKit Template for CapRover deployments. Includes Foundation, Tailwind, Prisma and SendGrid wired Contact Form examples. Zod implimented.

License

Notifications You must be signed in to change notification settings

maietta/SvelteKit-Prisma-Foundation-Boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SvelteKit Prisma Foundation Boilerplate

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.

Features

  • 🚀 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

Prerequisites

  • Node.js (v18 or higher), althrough I prefer Bun.
  • MySQL database
  • SendGrid account (for contact form)
  • Google reCAPTCHA v3 keys

Getting Started

  1. Clone the repository:

    git clone https://github.com/maietta/SvelteKit-Prisma-Foundation-Boilerplate.git
    cd SvelteKit-Prisma-Foundation-Boilerplate
  2. Install dependencies:

    npm install
  3. Set up environment variables:

    cp .env.example .env

    Edit .env with your configuration values.

  4. Set up the database:

    npx prisma migrate dev
  5. Start the development server:

    npm run dev

Environment Variables

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"

Project Structure

├── 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

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run check - Type-check the codebase
  • npm run test - Run E2E tests
  • npm run test:unit - Run unit tests
  • npm run lint - Lint the codebase
  • npm run format - Format the codebase

Deployment

This project can be deployed to various platforms:

  • Vercel
  • CapRover (Recommended)
  • Coolify (Also a great recommendation)
  • Any Node.js hosting platform

For Vercel deployment:

  1. Push your code to GitHub
  2. Import the project in Vercel
  3. Set up environment variables
  4. Deploy

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some 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.

Acknowledgments

About

SvelteKit Template for CapRover deployments. Includes Foundation, Tailwind, Prisma and SendGrid wired Contact Form examples. Zod implimented.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published