# T-kash Soko by Telkom Kenya

## Overview

T-kash Soko is a landing page and web application for Telkom Kenya's merchant and consumer payment platform. The application serves as a marketing and informational website showcasing the T-kash Soko mobile app, which enables merchants to sell products/services, accept payments, manage inventory, and track business performance. Consumers can shop, pay bills, and send money through the platform.

The project is a full-stack TypeScript application with a React frontend and Express backend, following Telkom Kenya's brand design guidelines with orange and turquoise color themes.

## User Preferences

Preferred communication style: Simple, everyday language.

## System Architecture

### Frontend Architecture
- **Framework**: React 18 with TypeScript
- **Routing**: Wouter (lightweight client-side routing)
- **State Management**: TanStack React Query for server state
- **Styling**: Tailwind CSS with custom Telkom Kenya brand colors
- **Component Library**: shadcn/ui components built on Radix UI primitives
- **Build Tool**: Vite with path aliases (@/, @shared/, @assets/)

The frontend follows a component-based architecture with reusable UI components in `client/src/components/ui/` and page-specific components in `client/src/components/`. Pages are defined in `client/src/pages/` with a single Home page containing multiple marketing sections.

### Backend Architecture
- **Framework**: Express.js 5 running on Node.js
- **Language**: TypeScript with ESM modules
- **API Pattern**: RESTful routes prefixed with `/api`
- **Development Server**: Vite dev server with HMR integration
- **Production Build**: esbuild for server bundling, Vite for client

The server uses a modular structure:
- `server/index.ts` - Main application entry point with middleware setup
- `server/routes.ts` - API route definitions
- `server/storage.ts` - Data access layer with storage interface
- `server/vite.ts` - Vite dev server integration
- `server/static.ts` - Static file serving for production

### Data Storage
- **ORM**: Drizzle ORM with PostgreSQL dialect
- **Schema Location**: `shared/schema.ts` using Drizzle table definitions
- **Validation**: Zod schemas via drizzle-zod integration
- **Current Implementation**: In-memory storage (`MemStorage` class) for development
- **Database Config**: Drizzle Kit configured for PostgreSQL migrations

The storage interface (`IStorage`) abstracts data operations, allowing easy switching between memory storage and database implementations.

### Design System
- Custom Tailwind configuration with Telkom Kenya brand colors (orange #FF6B00, turquoise #00A8E1)
- CSS variables for theming with light mode defaults
- Inter font family via Google Fonts
- Consistent spacing using Tailwind utility classes

## External Dependencies

### Third-Party Services
- **Google Play Store**: Links to T-kash Soko mobile app download
- **Telkom Kenya Support**: Links to external help center and customer portal

### Key NPM Packages
- **UI Components**: Full shadcn/ui component library with Radix UI primitives
- **Forms**: react-hook-form with @hookform/resolvers and Zod validation
- **Date Handling**: date-fns
- **Icons**: lucide-react, react-icons
- **Carousel**: embla-carousel-react
- **Charts**: recharts

### Database
- **PostgreSQL**: Required for production (DATABASE_URL environment variable)
- **Drizzle Kit**: Database migration tooling via `npm run db:push`

### Development Tools
- **Vite Plugins**: @vitejs/plugin-react, @replit/vite-plugin-runtime-error-modal
- **TypeScript**: Strict mode with path aliases
- **Build**: tsx for development, esbuild for production server bundling