Quick Start Guide - Fullstack Starter Pack

Quick Start Guide - Fullstack Starter Pack

Get up and running with the Fullstack Starter Pack in 10 minutes.

5-Minute Quickstart

1. Generate a Complete Project (2 minutes)

# Generate fullstack project with all features
/project-scaffold "Task Manager"

Generated:

• React frontend with TypeScript + Vite
• Express backend with TypeScript
• PostgreSQL database with Prisma
• JWT authentication
• Docker development environment
• CI/CD pipelines

2. Start Development Environment (2 minutes)

cd task-manager

# Start all services (frontend, backend, database)
docker-compose up -d

# Install dependencies
npm install

# Run database migrations
cd server && npx prisma migrate dev

3. Open in Browser (1 minute)

Frontend: http://localhost:5173
Backend API: http://localhost:3000
API Docs: http://localhost:3000/api/docs

Done! You now have a working fullstack application with authentication, database, and deployment ready.

Common Workflows

Frontend Development

Generate Component:

/component-generator "UserProfile with avatar, name, email, and edit button"

Generate Utilities:

/css-utility-generator --categories spacing,colors,flexbox

Get Architecture Help: Ask: "How should I structure state management for a shopping cart?" → React Specialist agent provides guidance

Backend Development

Generate API:

/express-api-scaffold "Blog API"

Design Database Schema:

/prisma-schema-gen "Blog with users, posts, comments, and tags"

Generate SQL Queries:

/sql-query-builder "Get top 10 products by sales with category info"

Authentication Setup

Add Auth to Existing Project:

cd your-project
/auth-setup jwt --features email-verification,password-reset

Result:

• JWT authentication with refresh tokens
• Email verification flow
• Password reset functionality
• Authentication middleware
• Protected routes

Deployment

Setup CI/CD: Ask: "Set up GitHub Actions for my Express app with tests and Docker deployment" → Deployment Specialist creates complete workflow

Generate Environment Config:

/env-config-setup --services database,redis,email

Plugin Reference

Commands (7)

Agents (8)

Example: Build a Blog in 10 Minutes

# 1. Generate project
/project-scaffold "Personal Blog"

# 2. Navigate and install
cd personal-blog
npm install

# 3. Start development
docker-compose up -d

# 4. Run migrations
cd server && npx prisma migrate dev

# 5. Generate auth
/auth-setup jwt

# 6. Generate blog components
/component-generator "BlogPostCard with title, excerpt, author, date"
/component-generator "CommentList with nested replies"

# 7. Design database schema
/prisma-schema-gen "Blog with users, posts, comments, tags, likes"

# 8. Generate SQL queries
/sql-query-builder "Get published posts with author info and comment count"

# 9. Setup environment
/env-config-setup --services database,redis,email

# 10. Deploy
# Push to GitHub → GitHub Actions deploys automatically

Result: Production-ready blog with authentication, comments, and deployment pipeline.

Tips & Best Practices

1. Start with Project Scaffold: Use /project-scaffold to generate complete structure, then customize.

2. Use Shortcuts: Type /cg instead of /component-generator for faster development.

3. Ask Agents for Guidance: Don't just generate code—ask agents for architecture advice and best practices.

4. Leverage Examples: All generated code includes examples and documentation.

5. Customize Output: Generated code is a starting point—modify to fit your needs.

Next Steps

1. Explore Use Cases: See docs/USE_CASES.md for real-world examples
2. Review Plugins: Check individual plugin documentation
3. Join Community: Discord server for support and feedback

Start building! You're ready to create production-grade fullstack applications.