Technology Stack

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Fireinthebellyy/ftb-web/llms.txt

Use this file to discover all available pages before exploring further.

​

Core Framework

​

Next.js 15

• App Router: File-system based routing with layouts and nested routes
• React Server Components: Reduced client-side JavaScript for better performance
• Server Actions: Type-safe server mutations
• Turbopack: Fast development builds (experimental)
• Image Optimization: Automatic image optimization with next/image
• Font Optimization: Web font optimization with next/font

• Full-stack framework with API routes
• Excellent SEO support with SSR and SSG
• Built-in performance optimizations
• Great developer experience
• Large ecosystem and community

​

Language & Runtime

​

TypeScript 5

• Interface-based type definitions
• Explicit function parameters and return types
• Type inference from Zod schemas
• Generic type parameters for reusable components

​

React 19

• React Server Components
• Server Actions
• Improved Suspense
• Concurrent rendering
• Automatic batching

​

Database & ORM

​

PostgreSQL

• Provider: Neon (Serverless PostgreSQL)
• Connection: @neondatabase/serverless (^1.0.1)
• Features: ACID compliance, complex queries, full-text search

​

Drizzle ORM

• SQL-like syntax with TypeScript types
• Zero runtime overhead
• Migration generation with drizzle-kit (^0.31.2)
• PostgreSQL-specific features (arrays, JSONB, enums)

import { db } from "@/lib/db";
import { opportunities } from "@/lib/schema";
import { eq } from "drizzle-orm";

// Type-safe query
const opportunity = await db
  .select()
  .from(opportunities)
  .where(eq(opportunities.id, opportunityId))
  .limit(1);

​

Authentication

​

Better Auth

• Email/Password: With email verification
• OAuth Providers: Google, LinkedIn
• Session Management: Cookie-based sessions
• Database Adapter: Drizzle ORM integration
• Role-Based Access: Custom user roles

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

export const auth = betterAuth({
  database: drizzleAdapter(db, { provider: "pg", schema }),
  emailAndPassword: { enabled: true },
  socialProviders: {
    google: { clientId: "...", clientSecret: "..." },
    linkedin: { clientId: "...", clientSecret: "..." },
  },
});

​

Styling & UI

​

Tailwind CSS 4

• Just-in-Time (JIT) compilation
• Custom design tokens
• Dark mode support
• PostCSS integration (@tailwindcss/postcss ^4)
• Animation library: tw-animate-css (^1.3.0)

​

Radix UI

• @radix-ui/react-dialog - Modals and dialogs
• @radix-ui/react-dropdown-menu - Dropdown menus
• @radix-ui/react-select - Select inputs
• @radix-ui/react-tooltip - Tooltips
• @radix-ui/react-tabs - Tab interfaces
• And 20+ more component primitives

• Unstyled, accessible components
• Full keyboard navigation
• ARIA attributes built-in
• Flexible styling with Tailwind

​

Additional UI Libraries

• Lucide React (^0.542.0): Icon library with 1000+ icons
• Framer Motion (^12.23.12): Animation library
• next-themes (^0.4.6): Dark mode support
• Sonner (^2.0.7): Toast notifications
• cmdk (^1.1.1): Command palette
• vaul (^1.1.2): Bottom sheet drawer

​

Forms & Validation

​

React Hook Form

• Uncontrolled components for better performance
• Built-in validation
• TypeScript support
• Easy integration with Zod

​

Zod

import { z } from "zod";

const loginSchema = z.object({
  email: z.string().email("Invalid email"),
  password: z.string().min(8, "Password too short"),
});

type LoginInput = z.infer<typeof loginSchema>;

• @hookform/resolvers (^5.2.1): Connect Zod with React Hook Form

​

Payments

​

Razorpay

• Payment collection
• Order management
• Webhook handling
• Subscription billing
• Refunds and settlements

​

File Storage

​

Appwrite

• User avatar uploads
• Document storage (resumes, certificates)
• Image optimization
• Access control and permissions

​

Email

​

Resend

• Transactional emails
• Email verification
• Password reset emails
• React email templates (@react-email/components ^0.5.0)

​

Data Fetching & State Management

​

TanStack Query (React Query)

• Automatic caching
• Background refetching
• Optimistic updates
• Pagination and infinite queries
• Devtools for debugging

import { useQuery } from "@tanstack/react-query";

const { data, isLoading, error } = useQuery({
  queryKey: ["opportunities"],
  queryFn: () => fetch("/api/opportunities").then(res => res.json()),
});

​

Tables & Data Display

​

TanStack Table

• Sorting, filtering, pagination
• Row selection
• Column visibility
• Virtualization support

​

Content & Markdown

​

React Markdown

• react-markdown: Markdown parser
• remark-gfm (^4.0.1): GitHub Flavored Markdown
• rehype-highlight (^7.0.2): Syntax highlighting
• gray-matter (^4.0.3): Frontmatter parsing

​

Rich Text Editor

​

Utilities

​

Core Utilities

• clsx (^2.1.1): Class name composition
• tailwind-merge (^3.4.0): Merge Tailwind classes intelligently
• class-variance-authority (^0.7.1): Component variants
• date-fns (^4.1.0): Date manipulation
• dayjs (^1.11.13): Date parsing and formatting

​

Utility Function: cn()

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

​

Testing

​

Vitest

• Vite-powered testing
• Jest-compatible API
• UI mode: @vitest/ui (^2.1.8)
• React Testing Library: @testing-library/react (^16.0.1)
• JSDOM: jsdom (^25.0.1)

npm run test        # Run tests
npm run test:ui     # Run with UI

​

Analytics & Monitoring

​

Vercel Analytics

• Page views and user sessions
• Web Vitals tracking
• Real-time metrics

​

Code Quality

​

ESLint

• eslint-config-next (15.3.2)
• @eslint/eslintrc (^3)

​

Prettier

• prettier-plugin-tailwindcss (^0.6.14): Sort Tailwind classes

​

Husky

​

Additional Libraries

​

Media & Interactions

• embla-carousel-react (^8.6.0): Carousel component
• react-dropzone (^14.3.8): File upload
• input-otp (^1.4.2): OTP input component
• react-resizable-panels (^3.0.3): Resizable layouts

​

Charts & Visualization

• recharts (^2.15.4): Charting library for data visualization

​

Content Management

• Sanity Client (@sanity/client ^7.3.0): Headless CMS integration
• Open Graph Scraper (open-graph-scraper ^6.10.0): URL metadata extraction

​

Social Sharing

• next-share (^0.27.0): Social media share buttons

​

Sanitization

• DOMPurify (dompurify ^3.3.1): HTML sanitization for XSS protection

​

Development Tools

• TypeScript (^5): Static type checking
• tsx (^4.20.3): Execute TypeScript files
• @vitejs/plugin-react (^4.3.4): Vite React plugin

​

Browser Compatibility

• Modern evergreen browsers (Chrome, Firefox, Safari, Edge)
• ES2020+ features
• CSS Grid and Flexbox
• JavaScript modules

​

Package Manager

• npm (default)
• yarn
• pnpm
• bun

​

Next Steps

• Set up your Local Development Environment
• Understand the System Architecture
• Explore the API Reference for backend endpoints