Pennyzo Web

A modern React TypeScript web application for Pennyzo, built with Tailwind CSS and custom branding.

Features

• React 18 with TypeScript for type safety
• Tailwind CSS with custom color palette
• Responsive design with mobile-first approach
• Sticky navigation header
• Custom brand colors: deep-navy, brass, off-white, light-gray

Getting Started

1. Install dependencies:

   npm install
   

2. Start the development server:

   npm run dev
   

3. Open http://localhost:3000 to view it in the browser.

Custom Colors

The project includes a custom Tailwind color palette:

• deep-navy: #0A192F
• brass: #D4AF37
• off-white: #F8F8F8
• light-gray: #CCD6F6

Project Structure

src/
├── components/
│   ├── Header.tsx          # Main navigation header
│   ├── HeroSection.tsx     # Hero section with CTA
│   ├── FeaturesSection.tsx # Features grid with cards
│   ├── WhyPennyzoSection.tsx # Benefits section
│   └── Footer.tsx          # Footer with links and contact info
├── App.tsx                 # Main application component
├── index.tsx              # Application entry point
└── index.css              # Tailwind CSS imports

Available Scripts

• npm run dev - Runs the app in development mode with Vite
• npm run build - Builds the app for production
• npm run preview - Preview the production build locally

API Status Checking Scripts

• npm run api:check - Run basic API status check
• npm run api:check:extended - Run extended API status check with reports
• npm run api:check:verbose - Run extended check with verbose output
• npm run api:check:real - Run extended check with real credentials

Environment Configuration Scripts

• npm run env:dev - Configure for development environment (localhost:8000)
• npm run env:prod - Configure for production environment (api.pennyzo.com)
• npm run env:show - Show current environment configuration

Environment Setup

The application supports different environments with automatic API URL configuration:

Development Environment

npm run env:dev

• API URL: http://localhost:8000
• Enables debug mode and verbose logging

Production Environment

npm run env:prod

• API URL: https://api.pennyzo.com/api/v1/general
• Optimized for production usage

Manual Configuration

Create a .env file in the project root:

# Development
VITE_API_BASE_URL=http://localhost:8000
NODE_ENV=development

# Production
VITE_API_BASE_URL=https://api.pennyzo.com/api/v1/general
NODE_ENV=production

Backend Integration Guide

Base URL: Automatically configured based on environment (configurable via VITE_API_BASE_URL)

• HTTP client: src/lib/http.ts (handles JSON, form, and auth header)
• Auth state: src/context/AuthContext.tsx (stores JWT token, loads auth/me)
• Endpoints: src/lib/api/*
  • system.ts: /system/health, /system/
  • auth.ts: /auth/* (verify email/resend/login/me/forgot/reset/change)
  • registration.ts: /registration/* (register + rules + health)
  • users.ts: /users/* (profile/company/gst/upgrade/stats/membership-info)

UI flows → endpoints

• Registration modal WaitlistForm: POST /registration/register
  • Maps UI fields to API and enforces rules:
    • GST Registered → send gst_number, cin_number=null, pan_number=null
    • Non-GST PRIVATE_LIMITED/LLP → send cin_number, pan_number=null
    • Non-GST PARTNERSHIP/PROPRIETORSHIP/SOLE_INDIVIDUAL/OTHERS → send pan_number, cin_number=null
• Login modal LoginPage: POST /auth/login as application/x-www-form-urlencoded with username, password; then GET /auth/me.
• Forgot password button calls POST /auth/forgot-password with the entered email.

Types and config

• Types: src/types/api.ts
• Config: set VITE_API_BASE_URL in .env (see .env.example).

Quick health check

curl -X GET "https://api.pennyzo.com/api/v1/general/system/health"

Error handling

• Non-2xx responses are surfaced with error.message when provided by backend.
• Invalid token on auth/me clears stored token.