Modern marketing and capability site for DevX Group LLC, a San Diego-based software and IoT engineering consultancy delivering custom software, AI/ML, and hardware solutions.

The application showcases the DevX Group portfolio, services, and lead-generation funnels. It uses the Next.js App Router to deliver fully typed, high-performance pages with animation-rich interactions and enterprise-ready privacy and legal coverage.

• Deployable to any Next.js-compatible platform, with defaults optimized for Vercel.
• Responsive layouts backed by Tailwind CSS theme tokens and IBM Plex typography.
• Built for accessibility, analytics visibility, and measurable performance.

• Next.js 15 App Router with route-level metadata and granular loading states.
• React 19 + TypeScript strict mode for dependable authoring and runtime safety.
• Tailwind CSS 4 design system with theme-green, theme-gold, and theme-purple palettes.
• Framer Motion, GSAP, and React Three Fiber for high-impact animation and 3D experiences.
• Calendly integration powering contact scheduling and lead capture flows.
• Sentry, Vercel Analytics, and Speed Insights for monitoring and observability.
• CCPA-compliant privacy policy and comprehensive terms of service content.

• Framework: Next.js 15.5.6 (App Router) on React 19.1.1
• Language: TypeScript (strict mode)
• Package manager: pnpm >= 10.19
• Runtime: Node.js >= 20.11 < 23

• Styling: Tailwind CSS 4.1 with IBM Plex Sans and IBM Plex Mono
• Components: Radix UI primitives, Lucide React icons
• Motion & 3D: Framer Motion, GSAP, Three.js, React Three Fiber
• Forms: React Hook Form + Zod validation

• Testing: Jest + Testing Library, Playwright E2E suites
• Monitoring: Sentry, Vercel Analytics, Vercel Speed Insights
• Communications: Nodemailer transport, Calendly widget

Source is organized for feature discoverability and shared layout consistency.

src/
├─ app/                       # App Router routes, layouts, and metadata
│  ├─ page.tsx                # Homepage
│  ├─ about/                  # About DevX Group
│  ├─ portfolio/              # Case studies and showcase
│  ├─ pricing/                # Pricing tiers
│  ├─ services/               # Service verticals (e.g., creative animation sections)
│  ├─ contact/                # Contact form + Calendly integration
│  ├─ privacy/                # CCPA-compliant privacy policy
│  └─ terms/                  # Terms of service
├─ common/                    # Global chrome (navbar, footer)
├─ components/                # UI primitives, animations, 3D, sections, services, etc.
├─ hooks/                     # Reusable React hooks
├─ lib/                       # Utilities and helpers
├─ data/                      # Structured content and copy
├─ styles/                    # Supplemental styling artifacts
└─ types/                     # Shared TypeScript definitions

tests/
├─ components/                # Jest component specs
├─ integration/               # Playwright integration flows
└─ qa/                        # QA automation and regression scripts

Path aliases (@/*, @animations/*, @layout/*, @sections/*, @3d/*) keep imports concise.

• Node.js >= 20.11 and < 23
• pnpm >= 10.19 (enable via corepack enable pnpm if needed)

git clone https://github.com/DevXGroup/DevX-WebApp.git
cd DevX-WebApp
pnpm install

pnpm dev

The development server runs on http://localhost:3002 with hot-module reloading.

• pnpm dev – start the Next.js development server (port 3002).
• pnpm lint – run ESLint (Next.js core-web-vitals preset).
• pnpm test / pnpm test:watch / pnpm test:coverage – execute Jest suites.
• pnpm build – create an optimized production build.
• pnpm start – serve the production bundle.
• pnpm size – audit bundle size limits.
• pnpm analyze – generate bundle analysis visualizations.

Create a .env.local file at the repository root for secrets and environment overrides. Use the NEXT_PUBLIC_ prefix for variables that must be exposed to the browser.

NEXT_PUBLIC_SITE_URL=https://www.devxgroup.io
SENTRY_AUTH_TOKEN=your_token_here
EMAIL_SMTP_USER=your_username
EMAIL_SMTP_PASSWORD=your_password

Keep credentials out of version control and configure hosting platforms with matching environment variables.

• Run pnpm lint before opening pull requests to enforce code quality.
• Use pnpm test for component tests and pnpm test:coverage for coverage tracking.
• Playwright scenarios in tests/integration/, tests/qa/, and tests/audit/ validate critical journeys—update or add specs when flows change.
• Respect server/client boundaries: default to server components and use "use client" only when required.
• Maintain accessibility (ARIA, focus management, reduced motion) to keep Jest and browser tests green.

• Strict TypeScript across the codebase; prefer explicit public interfaces.
• File naming: components in PascalCase.tsx, hooks in use-*.ts.
• Formatting enforced by Prettier (2 spaces, single quotes, no semicolons).
• Leverage shared path aliases instead of deep relative imports.
• Follow conventional commits (feat:, fix:, refactor:, chore:, docs:).
• Optimize performance with dynamic imports for heavy, browser-only modules.

pnpm build
pnpm start

The project targets Vercel out of the box but remains portable to any Next.js-compatible host. Ensure production environments mirror .env.local secrets and review analytics/error monitoring dashboards after release.

DevX Group LLC
San Diego, California
Website: https://www.devxgroup.io
Contact: Use the website contact form or Calendly links provided in-app for consultations

Distributed under the MIT License. See LICENSE for details.

• Max Sheikhizadeh (Principal Contributor)
• Ali Sheikhizadeh (Contributor)