The Journey to my Fullstack Scaffold: create smota-app

As a fullstack developer,I found myself spending more time bootstrapping projects than actually building them. A self-hosted app typically requires an OAuth system, a database and its adapters, UI components, and a multitude of configurations before I could even begin the core development process. This realization sparked the creation of a small CLI tool that could streamline the project scaffolding process. Thus, create smota-app@latest was born. The Hackathon Wake-Up Call I first tested my tool during a hackathon. However, I quickly encountered significant friction when dealing with the API. React Server Actions (RSA) required extensive integration with the client side, along with cumbersome hooks and Zod schemas for form validation. This complexity drained my motivation to handle the backend, leading me to showcase only the frontend during the event. This experience lit a fire within me to create the perfect fullstack setup, one that could handle API development efficiently while maintaining type safety and flexibility. Building the Perfect Stack Over the years, I explored nearly every frontend and backend framework. After extensive experimentation, I settled on Next.js and Server Actions. However, I soon realized the tight coupling of Server Actions with Vercel made it nearly impossible to migrate the backend to a separate repository or host it elsewhere. Additionally, since RSA isn't an API, building native apps that rely on the same backend would require extensive refactoring. Discovering tRPC I discovered tRPC through the T3 stack and was instantly captivated. tRPC provided the type safety of RSA while offering the flexibility to work with any backend solution. It enabled seamless app organization within a monorepo. However, I disliked the T3 stack’s naming conventions and its use of an older version of tRPC with React Query. So, I integrated tRPC with the latest Tanstack Query, following my own conventions and custom helpers. Choosing Drizzle and NeonDB for the Database For the database, I chose Drizzle ORM due to its speed and simplicity compared to Prisma. The migration process is less bloated, and Drizzle Studio is a cherry on top. While my stack is opinionated towards NeonDB, I plan to add options for PostgreSQL or SQLite in the future. Seamless Authentication with Auth.js Auth.js stood out as the best authentication system due to the control it offers over solutions like Clerk. I prefer building custom sign-in and sign-up pages, but I’ve included a small sign-in snippet for when I’m feeling lazy. Elevating the UI with Tailwind CSS and Shadcn Tailwind CSS 4, with its new theming capabilities, allows for rapid and flexible styling. Combined with Shadcn Canary, which provides pre-built UI components, the stack ensures a smooth and aesthetically pleasing user experience. The integration of these tools significantly reduces development time while maintaining a high level of customization. Effortless Hosting on Vercel Given the seamless integration with Next.js, Vercel remains the go-to platform for hosting this stack. The Final Stack Next.js 15 Tailwind CSS 4 (with new themes) Shadcn Canary for UI components TypeScript tRPC with Tanstack Query Drizzle ORM with NeonDB Auth.js How to Build a Project To create a new project using this stack, simply run the following command: pnpm create smota-app@latest Wrapping It Up create smota-app@latest is the result of my relentless pursuit of efficiency in fullstack development. It’s fast, flexible, and perfectly suited for building scalable, type-safe applications. With the power of this stack, I can now focus on building features rather than wrangling configurations.

Mar 16, 2025 - 10:43

The Journey to my Fullstack Scaffold: create smota-app

As a fullstack developer,I found myself spending more time bootstrapping projects than actually building them. A self-hosted app typically requires an OAuth system, a database and its adapters, UI components, and a multitude of configurations before I could even begin the core development process. This realization sparked the creation of a small CLI tool that could streamline the project scaffolding process. Thus, create smota-app@latest was born.

The Hackathon Wake-Up Call

I first tested my tool during a hackathon. However, I quickly encountered significant friction when dealing with the API. React Server Actions (RSA) required extensive integration with the client side, along with cumbersome hooks and Zod schemas for form validation. This complexity drained my motivation to handle the backend, leading me to showcase only the frontend during the event.

This experience lit a fire within me to create the perfect fullstack setup, one that could handle API development efficiently while maintaining type safety and flexibility.

Building the Perfect Stack

Over the years, I explored nearly every frontend and backend framework. After extensive experimentation, I settled on Next.js and Server Actions. However, I soon realized the tight coupling of Server Actions with Vercel made it nearly impossible to migrate the backend to a separate repository or host it elsewhere. Additionally, since RSA isn't an API, building native apps that rely on the same backend would require extensive refactoring.

Discovering tRPC

I discovered tRPC through the T3 stack and was instantly captivated. tRPC provided the type safety of RSA while offering the flexibility to work with any backend solution. It enabled seamless app organization within a monorepo. However, I disliked the T3 stack’s naming conventions and its use of an older version of tRPC with React Query. So, I integrated tRPC with the latest Tanstack Query, following my own conventions and custom helpers.

Choosing Drizzle and NeonDB for the Database

For the database, I chose Drizzle ORM due to its speed and simplicity compared to Prisma. The migration process is less bloated, and Drizzle Studio is a cherry on top. While my stack is opinionated towards NeonDB, I plan to add options for PostgreSQL or SQLite in the future.

Seamless Authentication with Auth.js

Auth.js stood out as the best authentication system due to the control it offers over solutions like Clerk. I prefer building custom sign-in and sign-up pages, but I’ve included a small sign-in snippet for when I’m feeling lazy.

Elevating the UI with Tailwind CSS and Shadcn

Tailwind CSS 4, with its new theming capabilities, allows for rapid and flexible styling. Combined with Shadcn Canary, which provides pre-built UI components, the stack ensures a smooth and aesthetically pleasing user experience. The integration of these tools significantly reduces development time while maintaining a high level of customization.

Effortless Hosting on Vercel

Given the seamless integration with Next.js, Vercel remains the go-to platform for hosting this stack.

The Final Stack

Next.js 15
Tailwind CSS 4 (with new themes)
Shadcn Canary for UI components
TypeScript
tRPC with Tanstack Query
Drizzle ORM with NeonDB
Auth.js

How to Build a Project

To create a new project using this stack, simply run the following command:

pnpm create smota-app@latest

Wrapping It Up

create smota-app@latest is the result of my relentless pursuit of efficiency in fullstack development. It’s fast, flexible, and perfectly suited for building scalable, type-safe applications. With the power of this stack, I can now focus on building features rather than wrangling configurations.