Tech Stack

Monorepo architecture

This project uses a “monorepo” architecture. The advantages are numerous, but primarily:

• Ability to develop full-stack features without context switching, making a single PR for a complete feature
• Easier deployment: no need to synchronize multiple separate deployments
• Strong end-to-end typing, easier refactoring
• Simplified and unified tooling (linter, build, etc.)

Note

While this approach could cause problems on really large codebase, with a lot of developers making changes at the same time, it’s a good fit for small to medium-sized projects like we handle at Lonestone.

Full-stack typing

When working on a fullstack project, we found that having compile time error and warnings are a godsend, but this requires a strategy to sync the typings between the backend and the frontend.

After years using GraphQL, we went back to REST (you can find the reasoning in the Network Architecture page), but we kept most benefits of GraphQL: full typing, documentation, caching, etc.

Tech Stack

Frontend

• React 19 - JavaScript library for building user interfaces
• TypeScript - JavaScript with syntax for types
• Tailwind CSS - Utility-first CSS framework
• Shadcn UI - Reusable components built with Radix UI and Tailwind CSS
• React Router v7 - Declarative routing for React
• TanStack Query - Powerful asynchronous state management
• React Hook Form - React form management

Backend

• NestJS - Progressive Node.js framework
• TypeScript - JavaScript with syntax for types
• MikroORM - TypeScript ORM for Node.js
• Zod - TypeScript-first schema validation
• Better Auth - Authentication and authorization solution

Infrastructure

• Docker - Containerization platform
• PostgreSQL - Relational database management system
• MinIO - S3-compatible object storage
• DotenvX - Environment variables management

Project Structure

lonestone/
├── apps/                  # Main applications
│   ├── api/               # Backend API (NestJS)
│   ├── web-spa/           # Web SPA application (React)
│   └── web-ssr/           # Web SSR application (React)
├── packages/              # Shared packages
│   ├── ui/                # Reusable UI components (shadcn/ui)
│   ├── openapi-generator/ # OpenAPI client generator
│   └── schematics/        # Schematics used to generate code in API
├── docs/                  # Project documentation
└── .github/               # GitHub Actions workflows