Stanq Template

Stanq Template is a Next.js starter project that bundles Shadcn UI, TypeScript, Auth.js (NextAuth), React Query, and Tailwind CSS into an installable App Router template. It is authored by Joshua Edo and available on GitHub under the MIT license.

What is Stanq Template?

Stanq Template is a React.js boilerplate built on the Next.js App Router. It comes preconfigured with Auth.js for authentication (including Google OAuth provider configuration), React Query for server-state management, and a Tailwind CSS styling layer built on Shadcn UI components and Radix primitives. The project is created by Joshua Edo and distributed as a GitHub template that you can install with npx create-next-app --example https://github.com/joshuaedo/stanq-template.

Key Features

• Next.js App Router — Uses the modern app/ directory structure for routing and layouts.
• Auth.js (NextAuth) setup — Pre-wired for Google OAuth, expecting NEXTAUTH_SECRET, NEXTAUTH_URL, GOOGLE_CLIENT_ID, and GOOGLE_CLIENT_SECRET environment variables.
• React Query — Included for data fetching, caching, and server-state synchronization.
• Shadcn UI + Radix — Includes copy-paste components and low-level primitives styled with Tailwind CSS.
• Tailwind CSS — Utility-first CSS framework configured for rapid styling.
• Dark mode with next-themes — Supports light/dark theme switching out of the box.
• Lucide icons — Features pixel-perfect SVG icons for UI elements.
• Custom hooks — Includes useDate, useDeviceSize, and useOnClickOutside hooks plus a cn class-merging utility.
• Code quality toolkit — Ships with TypeScript, Zod for validation, Prettier for formatting, and ESLint for linting.

Who is it for?

• Next.js developers who want a ready-made starter with auth, theming, and UI components without wiring them together themselves.
• SaaS builders who need Google OAuth login and a dashboard-ready component library to scaffold their product.
• Developers starting a new side project who want modern defaults (TypeScript, React Query, Tailwind) and a single command install via create-next-app.

What can you do with Stanq Template?

• Bootstrap a new app — Run npx create-next-app --example https://github.com/joshuaedo/stanq-template to scaffold a project with the full stack preconfigured.
• Add Google authentication — Configure your OAuth credentials in .env.local and use Auth.js to handle sign-in and session management.
• Fetch data with React Query — Use the included hooks and utilities to query external APIs (the example references a Ninjas API key for sample facts).
• Customize the UI — Edit Shadcn UI components and Tailwind classes to match your branding, and toggle dark mode via next-themes.

How does Stanq Template work?

The README provides four setup steps: create the project with the example URL, create a .env.local file with NextAuth and Google OAuth variables, run npm run dev, and then either remove the Hero.tsx file and fetchFacts() function or add your Ninjas API key to avoid errors. The app runs at http://localhost:3000.

FAQ

Is Stanq Template free?

Yes. Stanq Template is released under the MIT License, so you can use, modify, and distribute it freely.

What are the prerequisites to run Stanq Template?

You need Node.js and npm or Yarn installed on your machine. The template itself is installed via create-next-app.

What environment variables do I need to set?

Create a .env.local file in the project root with NEXTAUTH_SECRET, NEXTAUTH_URL, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and NEXT_PUBLIC_NINJAS_API_KEY. Replace the placeholders with your actual credentials.

Why am I getting errors about Hero.tsx or fetchFacts()?

The Hero.tsx component uses fetchFacts() which calls the Ninjas API. Either add your API key from api-ninjas.com or remove the Hero.tsx file and the fetchFacts() function to disable the errors.