Skip to main content

​
Tech Stack

This page details the technologies and libraries used in the Maybern frontend.

​
Core Technologies

TechnologyVersionPurpose
React18.xUI framework
TypeScript5.xType safety
Vite5.xBuild tool and dev server
pnpm9.6.0Package manager
Node.js20.11.1Runtime

​
UI and Styling

LibraryPurpose
Chakra UIComponent library with theming
EmotionCSS-in-JS (Chakra dependency)
Custom ThemeExtended Chakra theme

​
State Management

LibraryPurpose
TanStack Query v5Server state, caching, synchronization
React ContextGlobal app state (auth, customer)
React Hook FormForm state management

​
Routing

LibraryPurpose
React Router v6Client-side routing
Typesafe RoutesGenerated type-safe route paths

​
Data Display

LibraryPurpose
AG-Grid CommunityBasic data tables
AG-Grid EnterpriseAdvanced features (grouping, export)
AG ChartsChart visualizations
VisxCustom visualizations

​
Forms and Validation

LibraryPurpose
React Hook FormForm state and submission
YupSchema validation
ZodRuntime type validation

​
API Integration

LibraryPurpose
OrvalAPI client generation from OpenAPI
AxiosHTTP client
TanStack QueryRequest caching and state

​
Authentication

LibraryPurpose
StytchAuthentication provider
JWTToken-based auth

​
Testing

LibraryPurpose
VitestTest runner
React Testing LibraryComponent testing
Happy DOMBrowser environment simulation
StorybookComponent documentation and testing

​
Code Quality

ToolPurpose
ESLintCode linting
PrettierCode formatting
TypeScriptType checking

​
Build and Generation

ToolPurpose
ViteProduction builds
vite-nodeScript execution
OrvalAPI client generation
Custom generatorsMXL parser, routes

​
Key Dependencies

{
  "dependencies": {
    "react": "^18.x",
    "@chakra-ui/react": "^2.x",
    "@tanstack/react-query": "^5.x",
    "react-router-dom": "^6.x",
    "react-hook-form": "^7.x",
    "ag-grid-react": "^31.x",
    "axios": "^1.x"
  },
  "devDependencies": {
    "typescript": "^5.x",
    "vite": "^5.x",
    "vitest": "^1.x",
    "eslint": "^8.x",
    "@storybook/react": "^8.x"
  }
}

​
Browser Support

The application targets modern browsers:
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Frontend Overview

General frontend architecture.

Project Structure

Directory organization.