DEV Community: Setasena Randata

I Built a Typing Game to Help People Discover Open Source

Setasena Randata — Wed, 18 Feb 2026 18:15:07 +0000

I Love Open Source. Like, Really Love It.

Let me be honest,
I'm obsessed with open source.

We're living in the vibe coding era.

Psst...There's a time actually, where my client submit bug report to me, and honestly, opening claude code through my claude app from my phone, solves it, and I'm inside a mall toilet btw.

AI can now spin up a SaaS product in a weekend. Tools that used to take months to build? An afternoon with the right prompt. And in a world where anyone can ship anything, I believe open source is the answer.

Why? Because open source has something no AI-generated SaaS can replicate: community.

Community shapes the product. Community makes it mature. Community keeps it honest.

I'm always fascinated when I look at projects like Odoo — thousands of pull requests, hundreds of GitHub Actions workflows, an ocean of issues and discussions. Real people building real things together. It's just amazing.

That fascination is exactly why I built Codakey.

What is Codakey?

Codakey is a platform where you learn open-source projects by playing a typing game.

Pick any project, React, Next.js, Drizzle, whatever interests you, and play through an interactive journey of typing challenges and clicker gameplay built around real code from that project. Instead of passively reading docs, you type actual code, learn how projects are structured, and build muscle memory for real patterns.

You earn XP, level up, unlock upgrades, and compete on leaderboards. It's learning disguised as gaming.

The game feature is still a work in progress, but the platform is live. And here's the thing — I welcome all of you to submit your project. Seriously. Whether it's your weekend side project or a tool with 10k stars, submit it. Later on, I hope Codakey will help someone understand your project through a game experience — gamification, discovery, and real learning.

You can even build your own Arsenal — a personal collection of the open-source tools you love and use. Think of it as your curated open-source toolkit, tailored to you.

The Team

This is a project from me, Setasena, and my friend Rais.

And yes... if you visit Rais' site, you can tell. It's a game. The game is built by him, and I do the boring stuff, I guess? Frontend, backend, and infrastructure. Haha.

The Stack (for the Curious)

We're running:

Next.js 16 (App Router) + React 19 + TypeScript
Phaser 3 for the game engine
PostgreSQL + Drizzle ORM
Cloudflare (Pages, KV, Workers, Queues) for the entire infra
Tailwind CSS v4 + Framer Motion

Try It Out

If you have an open-source project you're proud of, submit it. Let's make it playable.

Open source isn't just code. It's people. And I want to build something that celebrates that.

Built with love and way too much typing.

Building Chalkboard: Open Source Billiard Hall Management

Setasena Randata — Tue, 13 Jan 2026 05:06:47 +0000

TL;DR: I built an open-source billiard hall management system with Next.js 15, React 19, and PostgreSQL. It handles everything from table sessions to F&B orders, payments, and analytics. Try it on Railway or run it with Docker.

The Problem

Running a billiard hall in Indonesia involves juggling multiple systems: table time tracking, F&B orders, payments, staff management, and inventory. Most solutions are either:

Expensive SaaS with monthly fees
Excel spreadsheets (yes, really)
Custom solutions that can't be easily replicated

I wanted to build something that any billiard hall could deploy and own their data, whether they're in Jakarta, Manila, or anywhere else.

Why Open Source?

At Kugie, our motto is "Scale Smarter, Not Harder." For small businesses, that means:

No vendor lock-in - Your data stays yours
Deploy anywhere - Railway, Docker, VPS, or even Windows standalone
Customize freely - Fork it and make it yours
Community-driven - Features that actual operators need

The Tech Stack

// The modern stack that just works
- Next.js 15 (App Router + React 19)
- TypeScript (because types save lives)
- Drizzle ORM + PostgreSQL
- Tailwind + Shadcn/ui
- NextAuth.js for authentication
- Bun for speed

Why These Choices?

Next.js 15 with App Router: Server components give us fast initial loads - crucial for operators checking tables on slower Indonesian internet.

Drizzle ORM: After dealing with Prisma's bulk query limitations at scale, Drizzle's SQL-like syntax and better performance won me over. Plus, Drizzle Studio is fantastic for database debugging.

PostgreSQL: Battle-tested, great JSON support for flexible F&B item properties, and works everywhere - from Neon serverless to local Docker.

Key Features I'm Proud Of

1. Context-Aware F&B Orders

Orders can be:

Linked to table sessions
Standalone counter orders
Draft orders (for customers waiting for tables)

// The schema handles all three contexts elegantly
export const fnbOrders = pgTable("fnb_orders", {
  tableSessionId: uuid("table_session_id").references(() => tableSessions.id),
  paymentId: uuid("payment_id").references(() => payments.id),
  status: varchar("status", { length: 20 }).notNull().default("draft"),
  // draft → pending → completed
});

2. Flexible Deployment Options

Method	Best For	Setup Time
Railway	Cloud, zero config	2 minutes
Docker	Self-hosted VPS	5 minutes
Windows Standalone	Local with auto-update	10 minutes

3. Real-Time Analytics Without the Overhead

Pre-calculated analytics stored in order_analytics table:

Revenue by hour/day/month
Popular items and peak times
Staff performance tracking

No need for expensive analytics services - just PostgreSQL doing what it does best.

Challenges & Solutions

Challenge 1: Supporting Poor Internet Connectivity

Problem: Many billiard halls in Indonesia have unreliable internet.

Solution:

Optimistic UI updates with local state
Service Worker for offline capability (planned)
Windows standalone that works 100% locally

Challenge 2: Multi-Language Support

Problem: Staff might prefer Indonesian, but owners want English reports.

Solution: next-intl with route-based locales (/id/dashboard vs /en/dashboard)

// Clean separation of concerns
messages/
├── id/
│   ├── common.json
│   ├── dashboard.json
│   └── fnb.json
└── en/
    ├── common.json
    ├── dashboard.json
    └── fnb.json

Challenge 3: Complex Payment Flows

Problem: A single payment might include:

Multiple table sessions
Multiple F&B orders
Split payments
Tips

Solution: Consolidated payment model with JSON metadata:

export const payments = pgTable("payments", {
  totalAmount: numeric("total_amount", { precision: 10, scale: 2 }).notNull(),
  metadata: json("metadata"), // Flexible structure for complex scenarios
  paymentMethod: varchar("payment_method", { length: 50 }).notNull(),
});

What's Next?

I'm preparing to launch Chalkboard v1.0.3 widely. Planned features:

Mobile PWA for table-side ordering
Multi-location support for chains
Advanced inventory with supplier management
Membership system with loyalty points

Try It Yourself

Quick deploy:

Feedback welcome! Whether you run a billiard hall, arcade, or any time-based rental business, I'd love to hear if this could work for you.

Stop Fighting Sanity's Portable Text - Here's How to Use Markdown Instead

Setasena Randata — Sun, 05 Oct 2025 11:06:29 +0000

Let me tell you about the worst hour of my Tuesday.

I wrote a 2,000-word blog post in Notion. Beautiful formatting, perfect headings, code blocks, the works. Then I tried to publish it to my Sanity CMS.

One hour later, I was manually converting this:

## How to Use the API

Simply call the `fetchData()` function:

\`\`\`javascript
const data = await fetchData()
\`\`\`

Into this monstrosity:

{
  _type: 'block',
  style: 'h2',
  children: [{ _type: 'span', text: 'How to Use the API' }]
},
{
  _type: 'block',
  children: [
    { _type: 'span', text: 'Simply call the ' },
    { _type: 'span', text: 'fetchData()', marks: ['code'] },
    { _type: 'span', text: ' function:' }
  ]
},
{
  _type: 'code',
  language: 'javascript',
  code: 'const data = await fetchData()'
}

I literally said out loud: "There has to be a better way."

Turns out, there is.

Why Portable Text Makes You Want to Scream

Don't get me wrong - Sanity is fantastic. The headless CMS architecture is brilliant, the API is clean, and the real-time collaboration is 🔥.

But Portable Text? It's like they said:

"You know what developers love? Converting their perfectly good Markdown into deeply nested JSON objects by hand."

Nobody. Nobody said that.

The problem is that Portable Text is structured content. It's designed to be platform-agnostic, queryable, and transformable. Which is great! Until you actually have to write content in it.

The Solution: Markdown Plugin

Here's the good news: Sanity has a markdown plugin. Here's the bad news: nobody talks about it.

Let me show you exactly how to set it up in your Sanity project.

Step 1: Install the Plugin

cd your-sanity-studio

# Install the markdown plugin
npm install sanity-plugin-markdown easymde@2

That's it for installation. Now for configuration.

Step 2: Update Your Sanity Config

Open your sanity.config.ts and add the markdown schema to your plugins:

import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
import { markdownSchema } from 'sanity-plugin-markdown'

export default defineConfig({
  name: 'default',
  title: 'Your Project',

  projectId: 'your-project-id',
  dataset: 'production',

  plugins: [
    structureTool(),
    markdownSchema(), // 👈 Add this line
  ],

  schema: {
    types: [...yourSchemas],
  },
})

Step 3: Add Markdown Field to Your Schema

Now update your post schema to include a markdown content field:

import { defineField, defineType } from 'sanity'

export const postType = defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
      validation: (rule) => rule.required(),
    }),
    defineField({
      name: 'slug',
      type: 'slug',
      options: { source: 'title' },
    }),
    // 🎯 The magic field
    defineField({
      name: 'content',
      title: 'Content',
      type: 'markdown',
      description: 'Write your content in beautiful Markdown',
    }),
  ],
})

Step 4: Style the Editor (Optional but Recommended)

The default markdown editor is... functional. Let's make it nice:

# Install CSS dependencies
npm install easymde@2

Create sanity.css in your studio root:

@import 'easymde/dist/easymde.min.css';

/* Make it look less like 2010 */
.EasyMDEContainer .CodeMirror {
  border-radius: 8px;
  border-color: #e2e8f0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
}

.EasyMDEContainer .editor-toolbar {
  border-color: #e2e8f0;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
}

.EasyMDEContainer .editor-toolbar button {
  color: #475569;
}

.EasyMDEContainer .editor-toolbar button:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

Import it in your studio's main file.

What You Get

After this setup, your Sanity Studio has a proper markdown editor with:

✅ Live preview side-by-side
✅ Toolbar for formatting (no more memorizing markdown syntax)
✅ Code block support with syntax highlighting
✅ Image insertion
✅ Table support
✅ Full keyboard shortcuts

And here's the best part: it stores actual markdown text, not Portable Text JSON.

Rendering Markdown on Your Frontend

Now when you query your Sanity content, you get clean markdown strings:

// What you get from Sanity
const post = {
  title: "My Post",
  content: "## Introduction\n\nThis is **markdown**!"
}

To render it in your Next.js/React app:

npm install react-markdown remark-gfm rehype-raw rehype-sanitize

import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        className="prose prose-lg"
      >
        {post.content}
      </ReactMarkdown>
    </article>
  )
}

Boom. Clean, simple, no Portable Text serializers required.

Common Gotchas

Gotcha #1: "Unknown type: markdown"

If you see this error, you forgot to add markdownSchema() to your plugins array in sanity.config.ts.

Gotcha #2: Editor looks broken

Make sure you're importing the CSS. The easymde styles are required:

import 'easymde/dist/easymde.min.css'

Gotcha #3: Images not working

Markdown image syntax expects URLs:

![Alt text](https://example.com/image.jpg)

If you want to use Sanity's image CDN, you'll need to either:

Upload images separately and use the CDN URL
Stick with Portable Text for the image field
Use a mixed approach (markdown for content, separate image fields)

Why This Matters

Look, I get it. Portable Text is "the right way" to do structured content. But sometimes you just want to write a damn blog post without feeling like you're programming JSON.

Markdown gives you:

Speed - Write content at the speed of thought
Portability - Works everywhere, from GitHub to Notion
Simplicity - Everyone knows markdown
Less friction - Copy-paste actually works

Is it perfect? No. But it's a hell of a lot better than manually building nested block objects.

The Full Working Example

I've set up a demo repo with a complete working Sanity Studio using markdown:

# Clone the example
git clone https://github.com/yourusername/sanity-markdown-example
cd sanity-markdown-example

# Install and run
npm install
npm run dev

Schema included, styles configured, ready to customize.

But Wait - There's an Even Better Way

Here's where I drop the pitch.

If you're:

Writing lots of blog content
Managing multiple Sanity projects
Doing content work for clients
Tired of the content → CMS workflow

You might want to check out Terradium.

It's an AI-powered content platform I built that:

Generates SEO-optimized content using multi-agent AI
Automatically publishes to Sanity in markdown format
Handles the entire workflow from research to publishing

Here's the workflow:

You: "Write 5 blog posts about Next.js 15 features"
     ↓
Terradium AI:
  → Researches keywords
  → Generates outlines
  → Writes full articles
  → Optimizes for SEO
  → Publishes to your Sanity project
     ↓
You: Review and click publish (or let it auto-publish)

Time saved: ~5 hours per article
Cost: Transparent "electron" credits (~$0.50 per full article)
Result: Professional content in your Sanity CMS, ready to review

The free tier gives you 30 electrons (~5 full articles) to try it out. No credit card required.

Why I Built This

After manually creating hundreds of blog posts for clients, I realized:

The research phase is 80% the same every time
SEO optimization follows predictable patterns
Markdown → Sanity conversion should be automated
The "publish to CMS" step is pure busywork

So I automated all of it with AI agents.

Now I use Terradium to:

Generate client blog content in bulk
Create documentation faster
Populate demo projects with real content
Test Sanity schemas with actual articles

It integrates directly with your Sanity project (using the markdown setup we just configured!) and handles everything from keyword research to final publishing.

Try It Out

If you just spent an hour following this tutorial to set up markdown support, you're exactly the person who would benefit from Terradium.

👉 Try Terradium Free - 30 electrons included, no credit card

Use your newly configured Sanity + Markdown setup, connect your project credentials, and generate your first AI-powered blog post in ~10 minutes.

Wrapping Up

Whether you use the markdown plugin manually or automate it with Terradium, the key takeaway is:

You don't have to fight Portable Text.

Markdown is a perfectly valid option for Sanity CMS. It's faster to write, easier to migrate, and frankly, way more pleasant to work with.

Set it up once, and never manually convert content again.

Questions?

Drop them in the comments! I'm happy to help with:

Sanity + markdown setup issues
Frontend rendering questions
Migration from Portable Text to markdown
Terradium integration

And if you found this helpful, consider giving Terradium a try. The free tier is genuinely useful (I'm not just saying that - it's 10 full articles).

TL;DR: Sanity's Portable Text is pain. Install sanity-plugin-markdown, add markdownSchema() to your config, use type: 'markdown' in your schema. Write content like a normal person. Or automate the whole thing with Terradium and never write manually again.

Happy coding! 🚀

I Spent 6 Hours Per Blog Post Until I Built This AI Content Platform

Setasena Randata — Sun, 05 Oct 2025 10:53:13 +0000

Three months ago, I was billing clients $25-40 per blog post. Sounds great, right? Wrong.

Each post took me 4-6 hours of work:

1-2 hours researching keywords and competitors
2-3 hours writing and editing
1 hour (yes, ONE HOUR) manually converting Markdown to Sanity's Portable Text format

That last part? That's what broke me.

The Portable Text Problem

If you've ever worked with Sanity CMS, you know the pain. Portable Text is powerful, but converting content manually is soul-crushing:

{
  _type: 'block',
  children: [
    {
      _type: 'span',
      text: 'Just trying to format a simple paragraph...'
    }
  ]
}

Multiply that by 2000 words, add images, links, headings, and you're looking at serious time sink.

I tried existing tools. They either:

Broke on complex formatting
Didn't support Sanity properly
Required manual cleanup anyway
Cost more than they saved

So I built my own solution. Then I kept building.

Enter Terradium

What started as a "convert Markdown to Portable Text" script evolved into a full AI-powered content platform.

Here's what it does now:

1. AI Multi-Agent System

I implemented a multi-agent architecture where specialized AI agents handle different parts of content creation:

Master Coordinator - Plans the entire content strategy
SEO Research Agent - Uses Perplexity AI for real-time competitive analysis
Content Writer - Generates SEO-optimized articles
Content Improver - Reviews and enhances quality
Sanity Publisher - Handles the dreaded Portable Text conversion automatically

2. Content Planning at Scale

Instead of one-off articles, you can generate entire content strategies:

Input: "AI tools for developers"
Output: 12-article content plan with:
- Keyword research
- Topic clusters
- Publishing schedule
- SEO optimization

3. The Electron System

I got tired of unpredictable AI costs, so I built a transparent usage system:

Every operation costs "electrons"
Real-time balance tracking
No surprises in your bill
Mix subscriptions with one-time booster packs

Example: Full article with SEO research = 6 electrons (~$0.40-0.60 depending on your plan)

The Tech Stack

Built with modern tools developers actually want to use:

Frontend:

Next.js 15 with App Router
TypeScript (because we're not animals)
TailwindCSS v4
Shadcn/ui components

Backend:

Convex for real-time reactive database
Clerk for auth (JWT integration was smooth)

Key Feature:
Everything is real-time. You literally watch the AI agents work through each step. No black box, no waiting.

What I Learned Building This

1. Streaming AI Responses Are A Game-Changer

E.g., Using OpenAI's streaming API instead of waiting for complete responses:

const stream = await openai.chat.completions.create({
  model: "gpt-4",
  messages: [...],
  stream: true,
});

for await (const chunk of stream) {
  // Update UI in real-time
  updateProgress(chunk);
}

Users see progress immediately. Huge UX win.

2. Convex Made Real-Time Stupidly Easy

Coming from traditional REST APIs, Convex's reactive queries were mind-blowing:

const content = useQuery(api.content.get, { id });
// Automatically updates when data changes. That's it.

No websockets. No polling. No Redux hell.

3. AI Agents Need Guardrails

Early versions would go off the rails. The solution? Structured outputs and validation:

const schema = z.object({
  title: z.string().max(60),
  keywords: z.array(z.string()).min(3).max(10),
  outline: z.array(z.string()),
});

Now agents can be creative within constraints.

The Beta Launch

I'm launching Terradium in beta at terradium.io this week.

What works:
✅ AI content generation with multi-agent system
✅ Automatic Sanity CMS publishing
✅ Content planning and bulk generation
✅ Real-time progress tracking
✅ Transparent electron-based pricing

What's coming:

More CMS integrations (WordPress, Contentful)
Custom AI model support
Team collaboration features
Advanced analytics

Pricing Philosophy

I wanted pricing that doesn't feel like highway robbery:

Free tier: 30 electrons (~10 articles) to try it out
Fusion: $19/mo for 270 electrons (~90 articles)
Reactor: $49/mo for 800 electrons (~265 articles)

Plus one-time electron packs if you need a burst of content.

Compare that to hiring writers at $100-400 per article. Even if you use this for 10 articles a month, it pays for itself.

Try It Yourself

If you're:

Spending hours on content creation
Fighting with CMS formatting
Doing client content work
Running a dev blog or documentation site

Give Terradium a shot. The free tier is actually generous (30 electrons), and I'd love your feedback.

Beta access: terradium.io

Open Questions for the Community

I'm still figuring some things out:

Would you want this to work with static site generators (Hugo, Gatsby)?
Is the electron system intuitive or confusing?
What other CMS platforms should I prioritize?

Drop your thoughts in the comments. Seriously, I'm one developer trying to solve a real problem I had. Your feedback shapes where this goes.

TL;DR: Built an AI platform that turns 6-hour blog posts into 10-minute automated workflows. Uses multi-agent AI system, automatically converts to Sanity Portable Text, transparent electron-based pricing.

Hi! I'm tired finding a self hosted finance tool, so I make one.

Setasena Randata — Wed, 14 May 2025 12:41:07 +0000

Setasena Randata

May 14 '25

Summit Finance: A Modern Open Source Invoicing Solution Built with Next.js, Drizzle ORM, and Tailwind CSS

#webdev #programming #javascript #opensource

Comments 1

5 min read

Summit Finance: A Modern Open Source Invoicing Solution Built with Next.js, Drizzle ORM, and Tailwind CSS

Setasena Randata — Wed, 14 May 2025 12:37:50 +0000

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

Familiar Tech Stack: If you're already comfortable with React/Next.js, you'll feel right at home
Self-Hosted: Keep your financial data under your control
Open Source: Customize it to fit your exact needs
Modern UX: Clean, responsive interface built with today's best practices
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:

Setting up the database
Configuring MinIO for file storage
Connecting email services
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!