Template Modern SaaS

Le template Modern SaaS offre une base solide pour créer des applications d'entreprise modernes avec un design épuré et des fonctionnalités avancées.

Caractéristiques

🎨 Design moderne

Interface utilisateur épurée et professionnelle
Animations fluides et micro-interactions
Thème sombre/clair automatique
Typographie optimisée pour la lisibilité

🚀 Performance

Optimisation Core Web Vitals
Chargement différé des composants
Mise en cache intelligente
Compression des assets

📱 Responsive

Design mobile-first
Adaptation parfaite sur tous les écrans
Navigation tactile optimisée
PWA ready

Installation

# Créer un nouveau projet
npx create-brikl-app@latest my-saas --template modern-saas

# Naviguer vers le projet
cd my-saas

# Installer les dépendances
npm install

# Démarrer le serveur de développement
npm run dev

Configuration

Variables d'environnement

# Base de données
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

# Authentification
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# OAuth Providers
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

# Stripe
STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_SECRET_KEY="sk_test_..."

# Email
SENDGRID_API_KEY="your-sendgrid-api-key"

Personnalisation du branding

// app/config/branding.ts
export const branding = {
  name: 'Mon Application SaaS',
  description: 'Description de votre application',
  logo: '/logo.png',
  favicon: '/favicon.ico',
  colors: {
    primary: '#3B82F6',
    secondary: '#6B7280',
    accent: '#10B981',
    background: '#FFFFFF',
    text: '#1F2937'
  },
  social: {
    twitter: 'https://twitter.com/yourapp',
    linkedin: 'https://linkedin.com/company/yourapp',
    github: 'https://github.com/yourapp'
  }
};

Structure du projet

my-saas/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   ├── register/
│   │   └── forgot-password/
│   ├── (dashboard)/
│   │   ├── dashboard/
│   │   ├── users/
│   │   ├── settings/
│   │   └── billing/
│   ├── api/
│   │   ├── auth/
│   │   ├── users/
│   │   └── billing/
│   └── globals.css
├── components/
│   ├── ui/
│   ├── forms/
│   └── dashboard/
├── lib/
│   ├── auth.ts
│   ├── db.ts
│   └── utils.ts
├── prisma/
│   └── schema.prisma
└── public/
    ├── images/
    └── icons/

Fonctionnalités incluses

Authentification

Inscription/Connexion par email
OAuth avec Google et GitHub
Authentification à deux facteurs
Gestion des sessions
Récupération de mot de passe

Tableau de bord

Widgets personnalisables
Graphiques avec Chart.js
Notifications en temps réel
Navigation latérale
Recherche globale

Gestion des utilisateurs

Profils utilisateur complets
Système de rôles et permissions
Gestion d'équipe
Invitations par email
Audit des actions

Facturation

Plans d'abonnement flexibles
Intégration Stripe complète
Factures automatiques
Gestion des paiements
Historique des transactions

Déploiement

Vercel (recommandé)

# Installer Vercel CLI
npm i -g vercel

# Déployer
vercel

# Configurer les variables d'environnement
vercel env add DATABASE_URL
vercel env add NEXTAUTH_SECRET
# ... autres variables

Autres plateformes

Le template est compatible avec :

Netlify
Railway
Heroku
AWS Amplify

Personnalisation avancée

Ajouter de nouvelles pages

// app/(dashboard)/analytics/page.tsx
export default function AnalyticsPage() {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Analytics</h1>
      {/* Votre contenu */}
    </div>
  );
}

Créer de nouveaux composants

// components/dashboard/AnalyticsWidget.tsx
export function AnalyticsWidget() {
  return (
    <div className="bg-white rounded-lg shadow p-6">
      <h3 className="text-lg font-semibold mb-4">Analytics</h3>
      {/* Votre widget */}
    </div>
  );
}

Support

Documentation : Documentation complète incluse
Communauté : Discord et GitHub Discussions
Support : Support par email pour les clients premium

Modern SaaS

On this page