Enterprise SaaS Template

Full-stack application template for rapid development of enterprise SaaS applications using React, ASP.NET Core, and SQL Server.

🚀 View Live Demo - Full-featured enterprise SaaS template with authentication, CRUD operations, and file management.

📋 Tabla de Contenidos

Características Principales
Características
Arquitectura
Stack Tecnológico
Inicio Rápido
Estructura del Proyecto
Documentación
Contribución
Licencia

✨ Características Principales

🎯 Production-Ready - Sistema completo de autenticación JWT con roles y permisos granulares
🔄 CRUD Unificado - Hooks reutilizables con TanStack Query para todas las operaciones
📁 Gestión de Archivos - Upload/download con validación y progress tracking
🎨 UI Moderna - Radix UI + Tailwind CSS v4 con tema claro/oscuro
🌐 i18n Ready - Soporte multiidioma con i18next
📊 Estado Optimizado - TanStack Query para server state + Zustand para UI state
🔐 Seguridad - BCrypt para passwords, validación con Zod, protección CSRF
🚀 Developer Experience - TypeScript, ESLint, Hot reload, y documentación completa

Características

Sistema CRUD Unificado

Hooks reutilizables con TanStack Query para operaciones CRUD
Paginación del servidor con búsqueda y filtros
Optimistic updates para mejor UX
Soporte para formularios multi-paso
Manejo de IDs compuestos

Autenticación y Autorización

JWT authentication con BCrypt
Role-based access control
Permisos por menú desde base de datos
Session validation
Bypass configurable para desarrollo (AUTH_ENABLED flag)

Gestión de Estado

TanStack Query v5 para server state
Zustand v5 para UI state
React Hook Form v7 + Zod v3 para validación
Error handling centralizado

Interfaz de Usuario

Radix UI components con Tailwind CSS v4
Tema claro/oscuro con next-themes
Responsive design
Internacionalización con i18next
Framer Motion para animaciones

Gestión de Archivos

Upload con progress tracking
Download con streaming
Validación de tipos MIME
Almacenamiento en servidor

Navegación

Menús dinámicos desde base de datos
Breadcrumbs automáticos
Lazy loading de rutas
Encriptación de parámetros URL

🏗️ Arquitectura

┌───────────────────────────────────────────────────┐
│                      FRONTEND (React)             │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐   │
│  │  Features  │  │   Shared   │  │  Layouts   │   │
│  │  (CRUD)    │  │ Components │  │ Navigation │   │
│  └────────────┘  └────────────┘  └────────────┘   │
│         │              │                │         │
│         └──────────────┴────────────────┘         │
│                        │                          │
│                   React Query                     │
│                   Zustand Store                   │
└─────────────────────────┬─────────────────────────┘
                          │ HTTP/REST
                          │ JWT Auth
┌─────────────────────────▼─────────────────────────┐
│                   BACKEND (ASP.NET Core)          │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐   │
│  │Controllers │  │    DAOs    │  │   Models   │   │
│  │  (API)     │  │ (Business) │  │   (DTOs)   │   │
│  └────────────┘  └────────────┘  └────────────┘   │
│         │              │                │         │
│         └──────────────┴────────────────┘         │
│                        │                          │
│                  Helper Library                   │
└─────────────────────────┬─────────────────────────┘
                          │ ADO.NET/Dapper
                          │ Stored Procedures
┌─────────────────────────▼─────────────────────────┐
│                   DATABASE (SQL Server)           │
│  ┌────────────┐  ┌────────────┐  ┌────────────┐   │
│  │   Tables   │  │    SPs     │  │   Views    │   │
│  │  (Master)  │  │ (Business) │  │ (Reports)  │   │
│  └────────────┘  └────────────┘  └────────────┘   │
└───────────────────────────────────────────────────┘

Principios de Diseño

Feature-based organization: Módulos independientes por funcionalidad
Separation of concerns: Capas bien definidas (UI, Business, Data)
DRY (Don't Repeat Yourself): Componentes y hooks reutilizables
SOLID principles: Código mantenible y escalable
Convention over configuration: Defaults inteligentes

🛠️ Stack Tecnológico

Frontend (`01-Frontend/`)

Tecnología	Versión	Propósito
React	19.2	UI Framework
TypeScript	5.9	Type Safety
Vite	6.3	Build Tool
React Router	7.9	Routing
TanStack Query	5.90	Server State
Zustand	5.0	UI State
React Hook Form	7.63	Forms
Zod	3.25	Validation
Tailwind CSS	4.1	Styling
Radix UI	Latest	Components
i18next	25.5	i18n
Axios	1.12	HTTP Client
Framer Motion	11.18	Animations

Backend (`02-Backend/`)

Tecnología	Versión	Propósito
.NET	8.0	Framework
ASP.NET Core	8.0	Web API
C#	12.0	Language
Microsoft.Data.SqlClient	6.0	Database Access
JWT Bearer	8.0	Authentication
BCrypt.Net-Next	4.0	Password Hashing
Newtonsoft.Json	13.0	JSON Serialization

Database (`04-Database/`)

Tecnología	Versión	Propósito
SQL Server	2022	RDBMS
T-SQL	-	Stored Procedures

Development Tools

Tecnología	Propósito
pnpm	Package Manager
ESLint	Code Linting
Vitest	Unit Testing

🚀 Inicio Rápido

Prerequisitos

Node.js 20+
pnpm 9+
.NET 8.0 SDK
SQL Server 2022 o compatible

1. Clonar el Repositorio

git clone https://github.com/Enzo008/saas-template.git
cd saas-template

2. Configurar Base de Datos

-- Crear base de datos en SQL Server
CREATE DATABASE SaasTemplateDB;
GO

-- Ejecutar scripts en orden:
-- 1. 04-Database/Tables/TABLES_EN.sql
-- 2. 04-Database/StoredProcedures/*.sql
-- 3. 04-Database/TableTypes/*.sql

3. Configurar Backend

cd 02-Backend

# Copiar archivo de configuración
cp appsettings.example.json appsettings.Development.json

# Editar appsettings.Development.json con tu connection string
# "DefaultConnection": "Server=localhost;Database=SaasTemplateDB;..."

# Restaurar dependencias
dotnet restore

# Ejecutar
dotnet run

Backend: https://localhost:7001

4. Configurar Frontend

cd 01-Frontend

# Instalar dependencias
pnpm install

# Copiar variables de entorno
cp .env.example .env

# Editar .env con la URL del backend
# VITE_API_BASE_URL=https://localhost:7001

# Ejecutar en desarrollo
pnpm dev

Frontend: http://localhost:5173

📁 Estructura del Proyecto

saas-template/
├── 01-Frontend/                    # React application
│   ├── src/
│   │   ├── auth/                  # Authentication system
│   │   ├── features/              # Feature modules
│   │   │   ├── dashboard/        # Dashboard
│   │   │   ├── user/             # User management
│   │   │   ├── role/             # Role management
│   │   │   ├── form/             # Dynamic forms
│   │   │   ├── fileStorage/      # File management
│   │   │   ├── position/         # Position catalog
│   │   │   ├── repository/       # Repository catalog
│   │   │   └── identity-document/ # ID document catalog
│   │   ├── shared/               # Shared code
│   │   │   ├── components/       # Reusable UI components
│   │   │   ├── hooks/            # Custom hooks
│   │   │   ├── services/         # API services
│   │   │   └── utils/            # Utilities
│   │   ├── layout/               # App layouts
│   │   ├── navigation/           # Navigation system
│   │   └── config/               # App configuration
│   └── package.json
│
├── 02-Backend/                     # ASP.NET Core API
│   ├── Controllers/               # API Controllers
│   ├── Data/          # Data access layer
│   ├── Models/                    # DTOs and models
│   ├── Middleware/                # Custom middleware
│   └── saas-template.server.csproj
│
├── 03-Helper/                      # Shared utilities library
│   ├── Core/                      # Core types
│   ├── Database/                  # Database helpers
│   ├── Helpers/                   # Common helpers
│   └── Helper.csproj
│
├── 04-Database/                    # SQL Server scripts
│   ├── Tables/                    # Table definitions
│   ├── StoredProcedures/          # Stored procedures
│   ├── TableTypes/                # User-defined table types
│   └── Templates/                 # SP templates
│
├── 05-Planner/                     # Project planning
│   └── ESTANDAR-PLANNER.md
│
├── PROJECT_TEMPLATE_GUIDE.md       # Template usage guide
├── QUICK_START_CHECKLIST.md        # Quick start checklist
├── PROJECT_NAME_LOCATIONS.md       # Naming reference
└── saas-template.sln               # Visual Studio solution

📚 Documentación

🎯 Usar como Plantilla (NUEVO)

¿Quieres crear un nuevo proyecto usando esta plantilla?

📖 PROJECT_TEMPLATE_GUIDE.md - Guía completa paso a paso
✅ QUICK_START_CHECKLIST.md - Checklist rápido
📍 PROJECT_NAME_LOCATIONS.md - Dónde cambiar nombres
🤖 rename-project.ps1 - Script automático de renombrado

# Uso rápido del script
.\rename-project.ps1 -NewProjectName "project-contability" -NewProjectTitle "Sistema de Contabilidad"

🔓 Sistema de Bypass de Autenticación

AUTH_BYPASS_README.md - Cómo habilitar/deshabilitar auth

// Cambiar en: src/config/app.config.ts
export const AUTH_ENABLED = false;  // ← true para producción, false para prototipos

Documentación Principal

Frontend README - Guía completa del frontend
Backend README - Guía completa del backend

Configuración

Variables de Entorno

Frontend (.env):

VITE_API_BASE_URL=https://localhost:7001
VITE_APP_NAME=SaaS Template

Backend (appsettings.Development.json):

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=localhost;Database=SaasTemplateDB;..."
  },
  "Jwt": {
    "SecretKey": "your-secret-key-here",
    "Issuer": "saas-template-api",
    "Audience": "saas-template-client"
  }
}

Build

Frontend:

pnpm build

Backend:

dotnet publish -c Release

🤝 Contribución

Las contribuciones son bienvenidas. Para cambios importantes:

Fork el proyecto
Crea una rama para tu feature (git checkout -b feature/amazing-feature)
Commit tus cambios siguiendo los estándares del proyecto
Push a la rama (git push origin feature/amazing-feature)
Abre un Pull Request

Lee .windsurf/rules/github-workflow.md para conocer nuestros estándares de commits y workflow.

📄 Licencia

MIT License - ver LICENSE para más detalles.

👨‍💻 Autor

Enzo Gago Aguirre

⭐ Dale una estrella

Si este template te resultó útil, considera darle una ⭐ en GitHub. ¡Ayuda a otros desarrolladores a encontrarlo!

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
.github		.github
.windsurf/rules		.windsurf/rules
01-Frontend		01-Frontend
02-Backend		02-Backend
03-Helper		03-Helper
04-Database		04-Database
05-Planner		05-Planner
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
PROJECT_TEMPLATE_GUIDE.md		PROJECT_TEMPLATE_GUIDE.md
README.md		README.md
SECURITY.md		SECURITY.md
saas-template.sln		saas-template.sln

Folders and files

Latest commit

History

Repository files navigation