Fullstack Web App Boilerplate
Nextanzle.com is a useful starting point for fullstack web applications with authentication, user management, and a dashboard.
Feature Gallery
Background
After some time of working with React/Next.js in my dayjob, and practicing on small projects in my freetime, I found myself with a problem.
Nearly all of my side projects were hyperfocused on a single feature or a set of specific features. They had no authentication system, no user management, and no dashboard. They were all just POCs (Proof of Concept) projects.
These features are easily available from the many 'Boilerplate' projects out there for Next.js like: ShipFast, saas-starter, SaaS-Boilerplate, and more. However, I thought it would be a fun challenge to build my own.
So, the main goal with Nextanzle is to build a full set of production-ready features required for a SaaS application - ready to be reused in all my other side projects and any future projects.
This project started just as the initial wave of 'LLM generative AI' coding tools were becoming available. So it was also a fun opportunity to explore the capabilities of these tools, this was my first time creating a project with the assistance of AI tools.
The name Nextanzle is a combination of the names of the stack I was focused on practicing with for this project: 'Next', 'Tanstack', and 'Drizzle'. After spending a few days brainstorming for an available *.com domain name, this is the one that stuck!
Features Overview
The project is still a work in progress. I'm still expanding the feature set and refining the UI/UX, but I'm happy with the progress so far.
Public Pages: The five public/marketing pages all contain placeholder/template content.
Authentication: The signup page was built to provide the user with dynamic feedback about their inputs and full transparency about the validation rules. The session management is handled with a JWT server-side cookie.
Dashboard: The dashboard contains placeholder content. This is where projects which adopt Nextanzle would begin adding their own features.
Administration: The app has two simple admin pages, Users and Roles. These pages are protected by RBAC (Role-Based Access Control), only accessible to users with a role marked as 'admin' - which is a boolean flag in the database. The Users admin page provides CRUD operations for users on the app, and the Roles admin page provides CRUD operations for roles that the users can be assigned to.
Tech Stack
The tech stack for the project was chosen for it's popularity, ease of use, and massive community support.
The project is built with TypeScript and Next.js v15. Next.js is an extremely popular fullstack React framework, providing server-side rendering, static site generation, and API routes. It's a great choice for building a SaaS application, as it provides a lot of the features out of the box.
The frontend utilizes TailwindCSS for easy styling, Shadcn for UI components, and Tanstack Query for data fetching. The backend utilizes Drizzle ORM for database operations, and PostgreSQL for the database.
Zod is used for validating user inputs, and as the project grows, the Drizzle-Zod library will be used to generate types directly from the database schema. This is a great convenience, I highly recommend it!
The project began with a Neon database with a goal of evaluating that platform, but more recently Nextanzle has migrated to using a PostgreSQL 16 database. The data access layer uses a singleton Repository pattern which made the migration very straightforward.
The project is hosted on a VPS and deployed/managed with Coolify. Coolify is a great product that combines the convenience of a PaaS on a self-managed hosting solution.