ectasy663
ebb7fcaac8
- Add environment-based API URL configuration (dev: localhost:8000, prod: api.pennyzo.com) - Update PennyzoApiService to use centralized config with timeout settings - Fix API status checker scripts to load .env variables using dotenv - Add environment management scripts (set-env.ps1) with npm shortcuts - Create comprehensive configuration testing and validation tools - Add TypeScript definitions for Vite environment variables - Update all documentation with new environment configuration instructions - Install dotenv package for Node.js environment variable loading - All APIs now correctly use environment-appropriate URLs automatically
145 lines
4.1 KiB
Markdown
145 lines
4.1 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Start the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Open [http://localhost:3000](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
|
|
|
|
```bash
|
|
npm run env:dev
|
|
```
|
|
|
|
- API URL: `http://localhost:8000`
|
|
- Enables debug mode and verbose logging
|
|
|
|
### Production Environment
|
|
|
|
```bash
|
|
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:
|
|
|
|
```env
|
|
# 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.
|