A production-ready, enterprise-grade multi-tenant SaaS application built with the TanStack ecosystem at its full capability.

• React 18 with TypeScript (strict mode)
• Vite for blazing fast development
• TanStack Router - File-based routing with type-safe navigation
• TanStack Query - Advanced server state management
• TanStack Table - Fully controlled tables with server-side operations
• TanStack Virtual - Virtualized lists for performance
• TanStack Form - Type-safe forms with validation
• Zustand - Minimal UI state (auth, sidebar, theme only)
• TailwindCSS - Utility-first styling
• Zod - Runtime type validation

• Node.js with TypeScript
• Fastify - High-performance web framework
• Prisma ORM - Type-safe database access
• SQLite (dev) / PostgreSQL (prod)
• JWT - Access + Refresh token authentication
• Bcrypt - Password hashing

• File-based routing structure
• Nested layout routes with protected auth guard
• Route loaders integrated with TanStack Query
• Automatic route data prefetching
• Suspense and error boundaries per route
• Fully typed search params
• URL state synchronized with table filters
• Lazy-loaded route modules
• Route-level code splitting

• Query Key Factory pattern for centralized key management
• Typed query keys for type safety
• Strategic staleTime configuration
• Background refetch intervals for real-time data
• Dependent queries
• Parallel queries (dashboard stats)
• Infinite queries with cursor pagination (activity log)
• Optimistic updates with automatic rollback
• Partial cache updates
• Mutation pipelines
• Query cancellation
• Prefetch next-page pagination
• Global QueryClient configuration

• Fully controlled table state (no uncontrolled state)
• Server-side pagination
• Server-side sorting
• Server-side filtering
• Column visibility toggle
• Column ordering
• Column resizing
• Row selection with bulk actions
• URL state synchronization
• Custom cell renderers
• Integration with TanStack Virtual for large datasets

• Virtualized product lists (1000+ rows)
• Virtualized activity feed with infinite scroll
• Performance optimization for large datasets

• Modular architecture by feature
• Service layer for business logic
• Route layer for HTTP handling
• Middleware for cross-cutting concerns
• Centralized error handling

• Pagination abstraction
• Filtering abstraction with operators
• Sorting abstraction
• Prisma transactions for data integrity
• Inventory locking logic
• DTO validation with Zod
• Activity logging system

• Workspace isolation
• User roles (admin, user)
• Workspace-scoped data access

• Product CRUD with SKU validation
• Stock tracking
• Low stock alerts
• Atomic stock deduction

• Multi-item sales
• Automatic inventory deduction
• Transaction safety with rollback
• Sale history tracking

• Comprehensive audit trail
• Infinite scroll feed
• Real-time updates

├── backend/
│   ├── src/
│   │   ├── modules/          # Feature modules
│   │   ├── lib/              # Shared utilities
│   │   ├── middlewares/      # Request middleware
│   │   └── server.ts         # App entry
│   └── prisma/
│       └── schema.prisma     # Database schema
│
└── frontend/
    ├── src/
    │   ├── routes/           # File-based routes
    │   ├── lib/
    │   │   └── api/
    │   │       ├── queryKeys.ts    # Query Key Factory
    │   │       ├── queries/        # Query hooks
    │   │       └── mutations/      # Mutation hooks
    │   ├── components/
    │   │   ├── tables/       # Table components
    │   │   └── forms/        # Form components
    │   ├── store/            # Zustand stores
    │   └── types/            # TypeScript types
    └── package.json

cd backend
npm install
cp .env.example .env
npm run db:generate
npm run db:push
npm run db:seed
npm run dev

Backend runs on http://localhost:3000

cd frontend
npm install
npm run dev

Frontend runs on http://localhost:5173

• Email: admin@demo.com
• Password: password123

See DEPLOYMENT.md for detailed setup, deployment, and architecture documentation.

Centralized, typed query keys for precise cache invalidation:

export const queryKeys = {
  products: {
    all: ['products'] as const,
    lists: () => [...queryKeys.products.all, 'list'] as const,
    list: (filters) => [...queryKeys.products.lists(), filters] as const,
    detail: (id) => [...queryKeys.products.all, 'detail', id] as const,
  },
};

Immediate UI feedback with automatic rollback:

const mutation = useMutation({
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey });
    const previous = queryClient.getQueryData(queryKey);
    queryClient.setQueryData(queryKey, newData);
    return { previous };
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(queryKey, context.previous);
  },
});

All table state synchronized with URL:

/products?page=2&sort=price_desc&search=laptop&lowStockOnly=true

Atomic operations with automatic rollback:

await prisma.$transaction(async (tx) => {
  const sale = await tx.sale.create({ data });
  await tx.product.update({
    where: { id },
    data: { stock: { decrement: quantity } }
  });
});

• JWT access + refresh token authentication
• Password hashing with bcrypt
• Protected routes with auth middleware
• Role-based access control
• Workspace data isolation
• SQL injection prevention (Prisma)
• XSS protection

• Route-level code splitting
• Prefetch next page on pagination
• Virtualized lists for large datasets
• Stale-while-revalidate caching
• Background refetch for real-time data
• Optimistic updates for instant feedback
• Debounced search inputs

# Backend
cd backend
npm test

# Frontend
cd frontend
npm test

cd backend
npm run build
npm start

cd frontend
npm run build
npm run preview

This is a demonstration project showcasing enterprise-grade patterns with TanStack ecosystem.

MIT

• TanStack team for amazing libraries
• Prisma team for excellent ORM
• Fastify team for high-performance framework