Project Structure

Recommended Structure

Here's the recommended project structure for PropTechUSA applications:

my-proptech-app/
├── src/
│   ├── app/                  # Next.js App Router
│   │   ├── api/              # API routes
│   │   │   ├── leads/
│   │   │   ├── webhooks/
│   │   │   └── ...
│   │   ├── dashboard/        # Dashboard pages
│   │   └── ...
│   ├── components/           # React components
│   │   ├── ui/               # Base UI components
│   │   ├── forms/            # Form components
│   │   └── charts/           # Data visualization
│   ├── lib/                  # Utilities & config
│   │   ├── proptech.ts       # SDK initialization
│   │   ├── utils.ts          # Helper functions
│   │   └── validations.ts    # Zod schemas
│   ├── hooks/                # Custom React hooks
│   └── types/                # TypeScript types
├── public/                   # Static assets
├── .env.local                # Environment variables
├── next.config.js
├── tailwind.config.js
└── package.json

Key Directories

/src/app/api

Server-side API routes that interact with the PropTechUSA SDK.

/src/lib

Shared utilities, SDK initialization, and configuration.

/src/components

Reusable React components organized by function.

Configuration Files

next.config.js

/* @type {import('next').NextConfig} /
const nextConfig = {
  experimental: {
    serverActions: true,
  },
  images: {
    domains: ['api.proptechusa.ai'],
  },
};

module.exports = nextConfig;

tailwind.config.js

module.exports = {
  content: ['./src/*/.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        proptech: {
          orange: '#d97757',
          dark: '#0a0a0f',
        },
      },
    },
  },
  plugins: [],
};