System Architecture

Overview

Aria Healthcare is built on a modern, scalable architecture leveraging Next.js 16 for the frontend, Supabase for backend services, and a comprehensive suite of React libraries for an enhanced user experience.

Technology Stack

Frontend
Backend
UI/UX

Core Framework

Next.js 16.1.1 - React framework with App Router
React 18.3.1 - UI library with concurrent features
TypeScript 5.8.3 - Type-safe development

Key Features

Server-side rendering (SSR)
Static site generation (SSG)
App Router architecture
Automatic code splitting

Architecture Layers

1. Presentation Layer

The frontend is built with Next.js 16 using the App Router pattern for optimal performance and SEO.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Providers } from "./providers";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Aria Healthcare - The Future of Medical Records",
  description: "Transform your healthcare practice with Aria's AI-powered medical record management.",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

2. State Management Layer

React Query is used for efficient server state management with automatic caching, refetching, and synchronization.

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Analytics } from "@vercel/analytics/react";

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        {children}
        <Toaster />
        <Analytics />
      </TooltipProvider>
    </QueryClientProvider>
  );
}

React Query automatically handles caching, background refetching, and stale data management, reducing the need for manual state synchronization.

3. Data Layer

Supabase provides the backend infrastructure with PostgreSQL database, authentication, and real-time capabilities.

import { createClient } from '@supabase/supabase-js';

// Next.js environment variable handling
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || process.env.VITE_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || process.env.VITE_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  console.error('Missing Supabase environment variables');
}

// Singleton Supabase client instance
export const supabase = createClient(
  supabaseUrl || 'https://placeholder.supabase.co',
  supabaseAnonKey || 'placeholder',
);

4. Animation Layer

Framer Motion provides smooth, performant animations throughout the application.

"use client";

import { motion } from "framer-motion";

export const Hero = () => {
  return (
    <section className="relative min-h-screen flex items-center pt-20">
      <div className="container relative z-10 mx-auto px-4 py-20">
        <div className="max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="space-y-8"
          >
            <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold">
              Enhance your clinical workflows with
              <span className="text-primary"> EMR-integrated AI</span>
            </h1>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

Form Validation

Zod provides runtime type validation for forms and API data.

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const formSchema = z.object({
  name: z.string().min(1, { message: "Please enter your name." }),
  email: z.string().email({ message: "Please enter a valid email address." }),
  phoneNumber: z.string().min(5, { message: "Please enter a valid phone number." }),
  userType: z.enum(["doctor", "patient", "other"], {
    required_error: "Please select your main use case.",
  }),
  features: z.array(z.string()).refine((value) => value.length > 0, {
    message: "Please select at least one feature.",
  }),
});

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    name: "",
    email: "",
    phoneNumber: "",
    features: [],
  },
});

Styling Architecture

Tailwind CSS with custom design tokens for consistent theming.

import type { Config } from "tailwindcss";

export default {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}"
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
      colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          glow: "hsl(var(--primary-glow))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
      },
      backgroundImage: {
        "gradient-hero": "var(--gradient-hero)",
        "gradient-card": "var(--gradient-card)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

Performance Optimizations

Next.js Configuration

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [],
  },
  async redirects() {
    return [
      {
        source: "/:path*",
        has: [{ type: "host", value: "ariamed.ai" }],
        destination: "https://www.ariamed.ai/:path*",
        permanent: true,
      },
    ];
  },
}

export default nextConfig;

Key Optimizations

Server-side rendering for initial page load performance
Automatic code splitting to reduce bundle sizes
Image optimization with Next.js Image component
Font optimization with next/font
Analytics integration via Vercel Analytics and Speed Insights

Always ensure environment variables are properly configured for both development and production environments.

Component Architecture

The application follows a modular component structure:

src/
├── components/
│   ├── ui/              # Reusable UI primitives (Radix UI based)
│   ├── Hero-nextjs.tsx  # Landing page hero section
│   ├── Navbar-nextjs.tsx # Navigation component
│   ├── Footer-nextjs.tsx # Footer component
│   └── Solution.tsx     # Feature showcases
├── integrations/
│   └── supabase/
│       └── client.ts    # Supabase client configuration
├── hooks/
│   ├── use-toast.ts    # Toast notification hook
│   └── use-mobile.tsx  # Mobile detection hook
└── lib/
    └── utils.ts        # Utility functions

Development Workflow

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

Deployment

The application is optimized for deployment on Vercel with:

Automatic SSL certificates
Edge network distribution
Serverless functions
Analytics and monitoring
Preview deployments for pull requests

The architecture supports both server-side and client-side rendering patterns, enabling optimal performance for different use cases.

ABHA Integration

Technical

System Architecture

Overview

Technology Stack

Core Framework

Key Features

Database & Auth

API Layer

Component Libraries

State Management

Architecture Layers

1. Presentation Layer

2. State Management Layer

3. Data Layer

4. Animation Layer

Form Validation

Styling Architecture

Performance Optimizations

Next.js Configuration

Key Optimizations

Component Architecture

Development Workflow

Deployment

Build docs developers (and LLMs) love

ABHA Integration

Technical

​Overview

​Technology Stack

​Core Framework

​Key Features

​Database & Auth

​API Layer

​Component Libraries

​State Management

​Architecture Layers

​1. Presentation Layer

​2. State Management Layer

​3. Data Layer

​4. Animation Layer

​Form Validation

​Styling Architecture

​Performance Optimizations

​Next.js Configuration

​Key Optimizations

​Component Architecture

​Development Workflow

​Deployment

Build docs developers (and LLMs) love

Overview

Technology Stack

Core Framework

Key Features

Database & Auth

API Layer

Component Libraries

State Management

Architecture Layers

1. Presentation Layer

2. State Management Layer

3. Data Layer

4. Animation Layer

Form Validation

Styling Architecture

Performance Optimizations

Next.js Configuration

Key Optimizations

Component Architecture

Development Workflow

Deployment