Get Started- Complete documentation overview

Comprehensive list of helpful tools, services, and resources for building with ShipSafe.

Overview

This guide compiles external resources that can enhance your ShipSafe development experience, from design assets to development tools and services.

Categories:

  • Design resources and assets
  • Development tools and extensions
  • Analytics and monitoring services
  • Email services
  • Logo and asset generators
  • Learning resources

Design Resources

Free Illustrations

  • Undraw - Free SVG illustrations with customizable colors
  • Open Peeps - Hand-drawn illustration library
  • Humaaans - Mix-and-match illustrations
  • DrawKit - Free illustrations and icons
  • ManyPixels - Free illustrations gallery

Icons

Backgrounds and Patterns

Design Tools

  • Figma - Collaborative design tool (free tier available)
  • Canva - Easy graphic design tool
  • Coolors - Color palette generator
  • Contrast Checker - Accessibility contrast checker

Development Tools

Code Editors

  • Cursor - AI-powered code editor (recommended for ShipSafe)
  • VS Code - Popular code editor
  • WebStorm - Full-featured IDE

VS Code Extensions

Essential extensions for ShipSafe development:

  • Tailwind CSS IntelliSense - Autocomplete for Tailwind classes
  • ESLint - Code linting
  • Prettier - Code formatting
  • TypeScript and JavaScript Language Features - TypeScript support
  • Firebase - Firebase integration
  • GitLens - Git supercharged

Browser Extensions

  • React Developer Tools - React component inspector
  • Redux DevTools - Redux state inspector (if using Redux)
  • Lighthouse - Performance and accessibility auditing

API Testing

Analytics & Monitoring

Analytics

Error Tracking

  • Sentry - Error tracking and performance monitoring
  • LogRocket - Session replay and error tracking
  • Bugsnag - Error monitoring

Performance Monitoring

Email Services

Transactional Email

  • Resend - Modern email API (recommended)

    • Simple API
    • Good developer experience
    • Reasonable pricing
    • React email support

  • SendGrid - Email delivery service

    • Enterprise features
    • High deliverability
    • Analytics dashboard
    • Free tier: 100 emails/day

  • Postmark - Transactional email

    • High deliverability
    • Detailed analytics
    • Free tier: 100 emails/month

Email Testing

  • Mailtrap - Email testing service

    • Catch emails in development
    • Email preview
    • Free tier available

  • MailHog - Local email testing

    • Self-hosted
    • Great for development

Logo & Assets

Logo Generators

Favicon Generators

Image Optimization

Learning Resources

Framework Documentation

Firebase Resources

Stripe Resources

Styling Resources

Security Resources

Deployment & Hosting

Hosting Platforms

  • Vercel - Recommended for Next.js (used in ShipSafe)

    • Zero-config deployment
    • Automatic HTTPS
    • Edge functions
    • Free tier available

  • Netlify - JAMstack hosting

    • Continuous deployment
    • Form handling
    • Free tier available

  • Railway - Modern hosting platform

    • Easy deployment
    • Database hosting
    • Free tier available

Database Hosting

Testing Tools

Email Testing

API Testing

Performance Testing

Community & Support

ShipSafe Resources

  • ShipSafe Documentation - This documentation site
  • GitHub Repository - Source code and issues
  • Community Forum - Get help from the community

General Development

Quick Reference

Essential Tools for ShipSafe

Design:

  • Heroicons (icons)
  • Undraw (illustrations)
  • Haikei (backgrounds)

Development:

  • Cursor or VS Code (editor)
  • Tailwind CSS IntelliSense (extension)
  • React Developer Tools (browser extension)

Services:

  • Vercel (hosting)
  • Firebase (database/auth)
  • Stripe (payments)
  • Resend (emails)
  • Sentry (error tracking)

Learning:

  • Next.js Docs
  • Firebase Docs
  • Stripe Docs
  • Tailwind CSS Docs

Learn More

Pro Tip: Bookmark this page and refer to it when you need design assets, tools, or services for your ShipSafe project!