Technology Stack

Core technologies powering Dirly

Dirly is built with a modern, scalable tech stack optimized for real-time data and seamless user experience.

Core Technologies

Frontend Stack

Framework & UI

package.json

{
  "next": "^15.4.9",
  "react": "^19.2.1",
  "react-dom": "^19.2.1"
}

Dirly uses Next.js 15 with the App Router architecture, leveraging:

• React Server Components - Server-side rendering for optimal performance
• Streaming - Progressive page loading for faster perceived performance
• Route Groups - Organized route structure with layouts
• Parallel Routes - Concurrent data fetching

Styling & Animation

package.json

{
  "tailwindcss": "4.1.11",
  "@tailwindcss/typography": "^0.5.19",
  "framer-motion": "^12.34.4",
  "lucide-react": "^0.553.0"
}

• **Tailwind CSS v4 **- Latest version with improved performance
• shadcn/ui - Accessible component library built with Radix UI primitives
• Framer Motion - Smooth animations and transitions
• Lucide React - Beautiful icon library

Forms & Validation

package.json

{
 "react-hook-form": "^7.71.2",
 "@hookform/resolvers": "^5.2.2",
 "zod": "^4.3.6"
}

Forms use React Hook Form with Zod schema validation for type-safe form handling.

Backend Stack

Database & Backend

package.json

{
  "convex": "^1.32.0"
}

Convex provides:

• Serverless TypeScript backend
• Real-time data synchronization
• Built-in caching and optimistic updates
• Type-safe queries and mutations
• Automatic schema migrations

Authentication

package.json

{
  "@clerk/nextjs": "^6.39.0"
}

Clerk integration features:

• JWT-based authentication
• Social logins (Google, GitHub, etc.)
• User management dashboard
• Protected routes middleware
• Convex authentication sync

Email Service

package.json

{
  "resend": "^6.9.3"
}

Resend handles transactional emails for:

• Tool submission notifications
• Admin approval/rejection emails
• User communications

Development Tools

Testing

package.json

{
  "vitest": "^4.0.18",
  "@testing-library/react": "^16.3.2",
  "@testing-library/jest-dom": "^6.9.1",
  "jsdom": "^28.1.0"
}

Unit and integration testing with Vitest and React Testing Library.

Code Quality

package.json

{
  "eslint": "9.39.1",
  "eslint-config-next": "16.0.8",
  "typescript": "5.9.3"
}

• TypeScript 5.9 - Type safety across the entire stack
• ESLint - Code linting with Next.js config

Analytics

package.json

{
  "@vercel/analytics": "^1.6.1"
}

Vercel Analytics for performance monitoring and user insights.

Build & Deployment

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "if [ -n \"$CONVEX_DEPLOY_KEY\" ]; then npx convex deploy --cmd \"next build\"; else next build; fi",
    "start": "next start"
  }
}

Deployment flow:

1. Convex automatically deploys backend on push
2. Next.js builds with SSR/SSG optimizations
3. Vercel hosts the application with edge functions

Why This Stack?

1. Real-time Updates

Convex’s reactive queries automatically sync data changes to all connected clients without manual WebSocket management.

2. Type Safety

TypeScript across the entire stack (frontend, backend, database schema) prevents runtime errors and improves developer experience.

3. Developer Experience

Hot reload, automatic deployments, built-in auth, and type-safe APIs reduce boilerplate and speed up development.

4. Scalability

Serverless architecture scales automatically. No server management or database optimization required.