Skip to main content
AiVault is built with a modern, scalable tech stack optimized for real-time data and seamless user experience.

​
Core Technologies

Next.js 15

Latest App Router with React 19, server components, and streaming

Convex

Serverless database with real-time subscriptions and TypeScript support

Clerk

Authentication and user management with JWT integration

Tailwind CSS

Utility-first CSS framework (v4.1) with shadcn/ui components

​
Frontend Stack

​
Framework & UI

package.json
{
  "next": "^15.4.9",
  "react": "^19.2.1",
  "react-dom": "^19.2.1"
}
AiVault 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

​
AI Integration

package.json
{
  "@google/genai": "^1.17.0"
}
Google Gemini AI integration for:
  • Tool description generation
  • Content moderation
  • Search enhancements

​
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
The build script conditionally deploys Convex before building Next.js when CONVEX_DEPLOY_KEY is present.

​
Why This Stack?

Convex’s reactive queries automatically sync data changes to all connected clients without manual WebSocket management.
TypeScript across the entire stack (frontend, backend, database schema) prevents runtime errors and improves developer experience.
Hot reload, automatic deployments, built-in auth, and type-safe APIs reduce boilerplate and speed up development.
Serverless architecture scales automatically. No server management or database optimization required.

Build docs developers (and LLMs) love

Get started for freeTalk to us