codeguide-starter-fullstack

🥈Silver

Codeguide Starter Fullstack is a boilerplate for AI coding agents, featuring Next.js 15, TypeScript, and database integration. It enables developers to quickly build modern web applications with authentication and dark mode support, reducing setup time and improving productivity.

139350Updated 3w ago

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/CodeGuide-dev/codeguide-starter-fullstack.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Initialize the project using the Codeguide Starter Fullstack template","action":"Run the initialization command in your terminal: `npx create-next-app@latest [PROJECT_NAME] --ts --eslint --app --src-dir --import-alias \"@/*\"`","tip":"Use the `--use-npm` flag if you prefer npm over other package managers"},{"step":"Configure your database connection","action":"Edit the `prisma/schema.prisma` file to match your database type (PostgreSQL, MySQL, SQLite) and update the connection string in `.env.local`","tip":"For production, use environment variables for sensitive data like database credentials"},{"step":"Set up authentication","action":"Configure your preferred auth method in `lib/auth.ts` and update the provider settings in `app/api/auth/[...nextauth]/route.ts`","tip":"The template includes NextAuth.js with Prisma adapter for database sessions"},{"step":"Implement dark mode","action":"Use the `DarkModeContext` component in your layout files and apply Tailwind dark mode classes to your components","tip":"Test dark mode in both light and dark system preferences to ensure proper contrast ratios"},{"step":"Add your core features","action":"Create new pages, API routes, and components following the existing structure. Use the provided example as a reference for integrating with the database and authentication","tip":"Leverage the TypeScript types generated by Prisma for type-safe database operations"}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/CodeGuide-dev/codeguide-starter-fullstack

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a production-ready Next.js 15 full-stack application using the Codeguide Starter Fullstack template. Initialize the project with TypeScript, set up [DATABASE_TYPE] database integration, and implement [AUTH_METHOD] authentication. Include dark mode support and [SPECIFIC_FEATURE] as a core functionality. Provide the complete project structure, configuration files, and a working example of [ENDPOINT_OR_PAGE].

Example Output

```bash
# Project initialization
npx create-next-app@latest my-fullstack-app --ts --eslint --app --src-dir --import-alias "@/*"
cd my-fullstack-app

# Install dependencies
npm install @prisma/client @next-auth/prisma-adapter next-auth bcryptjs zod react-hook-form @hookform/resolvers
npm install -D prisma tailwindcss postcss autoprefixer @types/bcryptjs @types/node

# Initialize Prisma with PostgreSQL
npx prisma init
# Configure database connection in prisma/schema.prisma
npx prisma generate
npx prisma db push

# Setup NextAuth.js
# Create app/api/auth/[...nextauth]/route.ts with Google OAuth provider
# Configure auth options in lib/auth.ts

# Create dark mode context in lib/context/DarkModeContext.tsx
# Implement Tailwind dark mode classes in tailwind.config.js

# Create a sample page: app/dashboard/page.tsx
'use client'
import { useSession } from 'next-auth/react'
import { redirect } from 'next/navigation'

export default function DashboardPage() {
  const { data: session } = useSession()
  
  if (!session) redirect('/login')
  
  return (
    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
      <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
      <p className="mt-4 text-gray-600 dark:text-gray-300">Welcome, {session.user?.name}!</p>
      <div className="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
        <h2 className="text-xl font-semibold text-gray-800 dark:text-white">Recent Activity</h2>
        <ul className="mt-4 space-y-2">
          <li className="text-gray-600 dark:text-gray-300">• Project X updated</li>
          <li className="text-gray-600 dark:text-gray-300">• Task Y completed</li>
        </ul>
      </div>
    </div>
  )
}

# Create API route: app/api/user/route.ts
import { NextResponse } from 'next/server'
import { getServerSession } from 'next-auth'
import { authOptions } from '@/lib/auth'

export async function GET() {
  const session = await getServerSession(authOptions)
  
  if (!session) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
  }
  
  return NextResponse.json({
    user: {
      id: session.user.id,
      name: session.user.name,
      email: session.user.email
    }
  })
}

# Complete project structure:
my-fullstack-app/
├── app/
│   ├── (auth)/login/page.tsx
│   ├── api/
│   │   ├── auth/[...nextauth]/route.ts
│   │   └── user/route.ts
│   ├── dashboard/page.tsx
│   └── layout.tsx
├── lib/
│   ├── auth.ts
│   ├── context/
│   │   └── DarkModeContext.tsx
│   └── prisma.ts
├── prisma/
│   └── schema.prisma
├── public/
├── src/
├── tailwind.config.js
├── tsconfig.json
└── package.json

# Environment variables (.env.local):
DATABASE_URL="postgresql://user:password@localhost:5432/mydb"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
```