happyviber — Code Should Spark Joy

Modern web dev is exciting exhausting

Sound familiar? You're not alone.

😵‍💫

React + Hooks + Context + Redux + Zustand

Just to show a button that says "Hello". Meanwhile, you've forgotten why you started coding in the first place.

🎨

class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500..."

Your HTML now looks like someone sneezed alphabet soup. Is this CSS? Is this a puzzle? Nobody knows.

📦

node_modules: 847MB

You wanted to center a div. Now you have 1,247 dependencies, 3 security vulnerabilities, and trust issues.

🔥

Supabase + Prisma + tRPC + Drizzle

Every week there's a new "simple" database solution. Your migrations have migrations now.

⚙️

tsconfig, next.config, tailwind.config, postcss.config...

Half your project is config files. The other half is trying to figure out why they're conflicting.

🤯

"use client" "use server" hydration mismatch

Server components, client components, partial hydration... remember when JavaScript just ran?

There's a happier way

At happyviber, we guide LLMs to generate code that's simple, fast, and maintainable. When AI writes vanilla code instead of framework spaghetti, everyone wins—especially the next LLM that has to work with it.

🍦

Vanilla Everything

Pure JavaScript. Real CSS. HTML that looks like HTML. Technologies that will work in 10 years, just like they work today.

✨

Beautiful by Default

Intuitive interfaces that feel natural. Design that delights users without drowning developers in complexity.

🎯

Simple Databases

SQLite, PostgreSQL, straightforward schemas. Data you can query with SQL you actually understand.

The Difference

😰 The "Modern" Way

import { useState, useEffect, useCallback } from 'react';
import { useQuery } from '@tanstack/react-query';
import { trpc } from '../utils/trpc';
import clsx from 'clsx';

export const Button = ({ variant = 'primary' }) => {
  const [isLoading, setIsLoading] = useState(false);
  const { data, isLoading: queryLoading } = 
    trpc.button.getConfig.useQuery();
  
  return (
    <button className={clsx(
      'px-4 py-2 rounded-lg transition-all',
      variant === 'primary' && 'bg-blue-500',
      isLoading && 'opacity-50 cursor-wait'
    )}>
      {queryLoading ? 'Loading...' : 'Click Me'}
    </button>
  );
};

😊 The happyviber Way

<button class="btn primary">
  Click Me
</button>

<style>
.btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}

.btn.primary {
  background: var(--brand-blue);
  color: white;
}
</style>

Code should spark joy, not spark confusion