The Real Story Behind Shipkit

After 18 months of nights and weekends, our small team of developers built Shipkit to solve our own frustrations. Here's the unvarnished truth about what it does well and where we're still growing.

Getting Started Overview

Shipkit is designed to get you from zero to production as quickly as possible. Whether you're a solo developer or part of a team, the goal is the same: ship faster, ship better.

Where Shipkit Shines

Immediate Deployment

Start now, immediately, and add features as you need:

• Deploy immediately, with no setup required. No environment variables, no database, no configuration or code changes.
• Once you are ready, you can add these features as needed.

Modern Technology Stack

Shipkit is built with the latest tech:

• Next.js 15 App Router - battle-tested with 10k+ pageviews/month
• Authentication with AuthJS v5 - Supports 92(!) authentication providers
• Content Management (Payload & Builder) - Manage your content without code
• Email Infrastructure (Resend) - handling 500+ monthly transactional emails with pre-built templates
• AI-Powered Component generation - Generate components with AI
• MDX Documentation + Blogging - Write documentation in Markdown
• Checkout and Billing - Built-in checkout and billing with Lemon Squeezy
• Role-Based Access Control - Full user management with roles

Developer Experience

Code Quality

• TypeScript-first development
• Comprehensive ESLint and Prettier configuration
• Pre-commit hooks for code quality

Testing & Deployment

• Automated testing pipelines
• One-click Vercel deployment
• Environment management

Where We're Still Growing

Performance Optimization

While Shipkit is fast out of the box, we're continuously working on:

Bundle Size

• Tree-shaking improvements
• Dynamic imports optimization
• Asset optimization

Runtime Performance

• Server-side rendering enhancements
• Client-side hydration optimization
• Database query optimization

Feature Completeness

Upcoming Features

• Advanced analytics dashboard
• Multi-tenant architecture
• Advanced AI integrations

Architecture Deep Dive

Frontend Architecture

The frontend is built with modern React patterns and Next.js best practices.

Component Structure

• Atomic design principles
• Reusable component library
• Consistent design system

Backend Services

Authentication Flow

• NextAuth.js integration
• Multiple provider support
• Session management

Data Management

• Type-safe database queries
• Migration management
• Backup strategies

Conclusion

Shipkit represents our commitment to developer productivity. While we're proud of what we've built, we're even more excited about what's coming next.

Features Under Active Development:

• Mobile responsiveness (currently at 85% Lighthouse score)
• Documentation (contributions welcome!)
• Analytics uses PostHog, Vercel Analytics, and Google Analytics
• Comprehensive internationalization and localization support

Hard-Earned Lessons

3 Things We Wish We Knew Sooner:

1. Start with TypeScript strict mode (our migration took 3 painful weeks!)
2. Use Drizzle ORM instead of raw SQL queries for optimization and type safety
3. Implement error tracking early (we're building our own logging platform, Ship Log)

Your First Hour with Shipkit

Three ways to get started with Shipkit:

1. Deploy the site directly to Vercel without ever touching a line of code. This will create a copy of Shipkit and a brand new GitHub repository with all of the code.

2. If you are a developer, you can clone the repository yourself and deploy it anywhere you like. We also include a Docker setup for standardizing deployments across hardware.

git clone https://github.com/lacymorrow/shipkit.git
pnpm install

3. Download the Shipkit source code and deploy it anywhere you like.

Explore pre-built flows:

• Authentication: app/auth/
• Content Management: app/admin/
• Billing: app/billing/

Join Our Journey

We're building in public and would love your input:

• Weekly progress updates
• Open roadmap
• Developer Q&A sessions

Follow our GitHub | Join Discord | Read our docs

Real-World Implementation

Here's our actual auth configuration (src/server/auth.config.ts):

export const authOptions: NextAuthConfig = {
	debug: process.env.NODE_ENV !== "production",
	providers,
	pages: {
		error: routes.auth.error,
		signIn: routes.auth.signIn,
		signOut: routes.auth.signOut,
	},
}