Summit Finance: A Modern Open Source Invoicing Solution Built With Next.js, Drizzle Orm, And Tailwind Css

## Why We Built Summit: A Modern Open Source Invoicing Solution

As a small agency, finding the right financial management tool was a journey filled with disappointments. We've tried several options over the years:

• Akaunting: Comprehensive but we weren't familiar with PHP, making customizations challenging
• InvoiceNinja: Offered limited functionality for our specific workflow
• Crater: Nice interface but didn't fit our exact needs
• Twenty CRM: Too resource-intensive, consuming excessive CPU and RAM

Our requirements were simple: we just wanted a tool that helps us create quotations, send invoices through email, and automate payments. That's how Summit was born – a lightweight, modern invoicing solution built with technologies we love.

Summit: The Tech Stack Breakdown

Summit Finance is built with a modern JavaScript stack optimized for developer experience and performance:

Core Framework: Next.js (App Router)

Summit leverages Next.js with its App Router architecture, bringing several advantages:

• Server Components: Reducing client-side JavaScript
• Improved Routing: With nested layouts and loading states
• Enhanced Performance: Through automatic optimizations
• API Routes: Simplified backend functionality

The App Router's structured approach helps maintain a clean codebase even as the application grows in complexity.

Language: TypeScript

We chose TypeScript for the obvious benefits:

• Type Safety: Catching errors before they reach production
• Enhanced Developer Experience: Better autocomplete and IntelliSense
• Self-Documenting Code: Types serve as documentation
• Easier Refactoring: Making large-scale changes with confidence

For a financial application where accuracy is critical, TypeScript's strictness is a major advantage.

Database Layer: PostgreSQL + Drizzle ORM

Why PostgreSQL?

• Reliability: Rock-solid stability for financial data
• Advanced Features: JSON support, full-text search
• Data Integrity: Strong constraints and relationships
• Scalability: Handles growing datasets efficiently

Why Drizzle ORM?

Drizzle ORM is a relative newcomer in the TypeScript ORM space, but we chose it for several reasons:

// Example Drizzle schema definition 
export const invoiceSchema = pgTable('invoice', { 
  id: uuid('id').primaryKey().defaultRandom(), 
  invoiceNumber: text('invoice_number').notNull(), 
  clientId: uuid('client_id').references(() => clientSchema.id), 
  amount: numeric('amount').notNull(), 
  dueDate: timestamp('due_date').notNull(), 
  status: text('status') 
    .notNull() 
    .default('draft') 
    .check(sql`status in ('draft', 'sent', 'paid', 'overdue', 'cancelled')`), 
  createdAt: timestamp('created_at').defaultNow().notNull(), 
}); 

• Type Safety: First-class TypeScript support with minimal boilerplate
• Performance: Lightweight with no hidden N+1 queries
• Developer Experience: SQL-like syntax that feels natural
• Schema Management: Easy migrations and schema changes
• Query Building: Intuitive API for complex queries

UI Layer: Tailwind CSS + shadcn/ui

Why Tailwind CSS?

• Utility-First: Rapid UI development with minimal context-switching
• Consistency: Predefined design system scales
• Performance: Small bundle size with only the CSS you use
• Responsiveness: Built-in responsive design patterns

Why shadcn/ui?

shadcn/ui provides high-quality, accessible components built on Radix UI:

// Example shadcn/ui usage in Summit 
<Card> 
  <CardHeader> 
    <CardTitle>Invoice #INV-2023-0042</CardTitle> 
    <CardDescription>Due on April 30, 2023</CardDescription> 
  </CardHeader> 
  <CardContent> 
    <p className="font-medium">Client: Acme Inc.</p> 
    <p className="text-2xl font-bold">$1,250.00</p> 
  </CardContent> 
  <CardFooter className="flex justify-end"> 
    <Button variant="default">Mark as Paid</Button> 
  </CardFooter> 
</Card> 

• Copy-Paste Components: No dependencies, just copy the code
• Customizable: Full control over the implementation
• Accessible: Built with accessibility in mind
• Beautiful Design: Professional and modern aesthetics

Authentication: NextAuth.js

NextAuth.js provides a comprehensive authentication solution:

• Multiple Providers: Email/password, OAuth, magic links
• Session Management: Secure, JWT-based sessions
• Role-Based Access: Team management with different permission levels
• Security: Built-in CSRF protection and security best practices

Form Handling: React Hook Form + Zod

This combination creates a powerful form system:

// Example form setup in Summit 
const formSchema = z.object({ 
  clientName: z.string().min(2, "Client name is required"), 
  amount: z.number().positive("Amount must be positive"), 
  dueDate: z.date().min(new Date(), "Due date must be in the future") 
}); 
 
const form = useForm<z.infer<typeof formSchema>>({ 
  resolver: zodResolver(formSchema), 
  defaultValues: { 
    clientName: "", 
    amount: 0, 
    dueDate: new Date() 
  } 
}); 

• Performance: Minimal re-renders with precise updates
• Validation: Type-safe schema validation with Zod
• Developer Experience: Intuitive API and great dev tools
• Accessibility: Built with accessibility in mind

Email: Resend

Resend provides a modern API for sending transactional emails:

• Developer-Friendly: Simple API with great TypeScript support
• Reliable Delivery: High deliverability rates
• Analytics: Track opens, clicks, and deliveries
• Templates: React-based email templates with JSX

Payments: Xendit

For those in Southeast Asia, Xendit offers comprehensive payment processing:

• Multiple Payment Methods: Cards, bank transfers, e-wallets
• Automated Reconciliation: Track payments against invoices
• Webhooks: Real-time payment notifications
• Secure: PCI-DSS compliant

File Storage: MinIO / S3

For receipt and document storage:

• Flexibility: Self-hosted MinIO or any S3-compatible service
• Scalability: Handles growing storage needs
• Performance: Fast uploads and downloads
• Security: Access control and encryption

Key Features That Make Summit Shine

Summit provides everything a small business needs for financial management:

• Complete Invoicing Workflow: Create, send, track, and receive payments
• Quoting System: Create quotes and convert to invoices when accepted
• Expense and Income Tracking: Complete financial overview
• Client Portal: Let clients view and pay invoices
• Team Collaboration: Role-based access for your team
• Financial Reporting: Get insights into your business finances
• Recurring Transactions: Automate recurring invoices

Why You Might Want to Try Summit

1. Familiar Tech Stack: If you're already comfortable with React/Next.js, you'll feel right at home
2. Self-Hosted: Keep your financial data under your control
3. Open Source: Customize it to fit your exact needs
4. Modern UX: Clean, responsive interface built with today's best practices
5. Lightweight: No bloat, just the features you need

Deploying Summit

Summit is designed to be easy to deploy, with one-click deployment options for platforms like Railway. The setup process is well-documented, and the environment variables are clearly explained.

If you're looking to try Summit, you can follow the comprehensive deployment guide available in the repository, which takes you through:

1. Setting up the database
2. Configuring MinIO for file storage
3. Connecting email services
4. Setting up payment processing

Future Plans

The project is actively maintained by the team at Kugie.app, with plans to add:

• More payment gateways beyond Xendit
• Enhanced reporting capabilities
• Mobile application
• Additional automation features

Conclusion

Summit represents a modern approach to invoicing and financial management, built with technologies that prioritize developer experience, performance, and user experience. If you've been frustrated with existing solutions, especially if you're already familiar with the React ecosystem, Summit might be exactly what you've been looking for.

Give Summit a try, and if you like it, consider contributing to the project! Open source thrives on community involvement, and your expertise could help make Summit even better.

Website
GitHub Repository
**Roadmap

Have you tried Summit or thinking about giving it a go? Let me know in the comments!