Overview

Step-by-step guides to build features with ShipSafe.

These tutorials walk you through building real features using ShipSafe's architecture and patterns. Each tutorial includes concept explanations, code examples, and best practices.

What you'll learn:

How to build landing pages
How to implement authentication
How to create API routes
How to set up payments
How to work with databases
And much more!

Quick Start Tutorials

Ship in 5 Minutes

Build a complete landing page quickly:

Create a new page
Use template components
Customize content
Deploy your page

Time: ~5 minutes
Difficulty: Beginner
Perfect for: Quick demos, learning components

Static Page

Create SEO-optimized static pages:

Set up page metadata
Use Next.js App Router
Optimize for SEO
Add structured data

Time: ~15 minutes
Difficulty: Beginner
Perfect for: Marketing pages, blog posts

Core Feature Tutorials

User Authentication

Implement login and signup:

Set up Firebase Authentication
Create login/signup forms
Handle authentication state
Protect routes

Time: ~30 minutes
Difficulty: Intermediate
Perfect for: User accounts, protected content

API Routes

Create secure API endpoints:

Set up API routes
Add authentication
Validate inputs
Handle errors
Test endpoints

Time: ~25 minutes
Difficulty: Intermediate
Perfect for: Backend functionality, data processing

Protected Pages

Add authentication guards:

Use middleware for protection
Redirect unauthenticated users
Handle loading states
Server-side auth checks

Time: ~20 minutes
Difficulty: Intermediate
Perfect for: Dashboard pages, user-only content

Stripe Subscriptions

Set up recurring payments:

Configure Stripe products
Create checkout sessions
Handle webhooks
Manage subscriptions

Time: ~45 minutes
Difficulty: Advanced
Perfect for: SaaS subscriptions, recurring billing

Advanced Tutorials

Custom Components

Build reusable components:

Component architecture
TypeScript interfaces
Styling with Tailwind/DaisyUI
Best practices

Time: ~30 minutes
Difficulty: Intermediate
Perfect for: Extending the boilerplate, custom UI

Database Queries

Query Firestore effectively:

Read data
Write data
Query with filters
Pagination
Best practices

Time: ~25 minutes
Difficulty: Intermediate
Perfect for: Data operations, user data

Real-time Listeners

Set up real-time data sync:

Firestore listeners
React hooks for real-time
Cleanup and optimization
Error handling

Time: ~20 minutes
Difficulty: Intermediate
Perfect for: Live updates, chat features

Recommended Learning Path

Beginner Path

Start: Ship in 5 Minutes
Next: Static Page
Then: User Authentication
Finally: Protected Pages

Intermediate Path

Start: API Routes
Next: Database Queries
Then: Custom Components
Finally: Real-time Listeners

Advanced Path

Start: Stripe Subscriptions
Then: Build custom features using patterns from other tutorials

Tutorial Format

Each tutorial includes:

Overview - What you'll build and why
Prerequisites - What you need to know
Step-by-step instructions - Detailed walkthrough
Code examples - Real code from ShipSafe
Best practices - Tips and recommendations
Next steps - What to learn next

Tips for Success

Follow along - Type code yourself, don't just copy
Experiment - Try variations and see what happens
Read errors - Error messages are helpful
Check docs - Reference feature docs when needed
Ask questions - Use troubleshooting guide if stuck

Common Questions

Which tutorial should I start with?

Beginners: Start with Ship in 5 Minutes
Experienced: Start with API Routes or Authentication

How long do tutorials take?

Quick tutorials: 5-15 minutes
Core tutorials: 20-30 minutes
Advanced tutorials: 30-45 minutes

What if I get stuck?

Check Troubleshooting
Review relevant Feature Documentation
Check error messages carefully
Verify your setup matches prerequisites