Shadow2 UI

Shadow2 UI is an Expo / React Native banking demo application featuring check writing, a transaction register with running balance, and mock API integration. It targets web, iOS, and Android platforms.

---

Tech Stack

↑ Back to top

Layer	Technology
Framework	Expo ~54, React Native 0.81
Language	JavaScript (React 19)
Web	react-native-web
Mock API	json-server on port 3001

---

Features

↑ Back to top

• Login -- Simple authentication gate (any non-empty credentials)
• Home Screen -- Welcome landing page
• Banking -- Navigation hub to check writing and register
• Write Checks -- Form to create check transactions (negative amounts posted to /transactions)
• Transaction Register -- Full register with running balance, responsive layout (web table vs mobile cards)
• Edit/Delete Transactions -- Modal for modifying or removing transactions via PUT/DELETE
• Customers -- Placeholder for customer management
• Reporting -- Placeholder for financial reports
• Responsive Menu -- Web top bar with Banking hover submenu; mobile hamburger drawer

---

Project Structure

↑ Back to top

shadow2-ui/
├── App.js                # Root component with login gate and screen routing
├── WriteChecksScreen.js  # Check writing form
├── index.js              # Expo entry point
├── config.js             # API_BASE_URL resolution
├── src/
│   └── components/
│       ├── BankingScreen.js
│       ├── CustomersScreen.js
│       ├── EditTransactionModal.js
│       ├── HomeScreen.js
│       ├── LoginScreen.js
│       ├── Menu.js
│       ├── RegisterScreen.js
│       └── ReportingScreen.js
├── mocks/
│   ├── db.json           # Seed data (users, customers, accounts, transactions, reports)
│   ├── server.js         # json-server configuration
│   └── README.md         # Mock API documentation
├── assets/               # Icons and splash images
├── app.json              # Expo configuration
└── package.json

---

Running Locally

↑ Back to top

Prerequisites

• Node.js 18+
• Expo CLI (npx expo)

Install Dependencies

cd shadow2-ui
npm install

Start the Mock API

npm run mock:server
# or with file watching
npm run mock:watch

The mock API runs on http://localhost:3001 and serves REST endpoints from mocks/db.json.

Start the App

# Expo dev server (all platforms)
npm start

# Platform-specific
npm run web
npm run ios
npm run android

---

Mock API

↑ Back to top

The mock API uses json-server to provide full CRUD on these resources:

Endpoint	Description
GET /transactions	List all transactions
POST /transactions	Create a new transaction
PUT /transactions/:id	Update a transaction
DELETE /transactions/:id	Delete a transaction
GET /users	List users
GET /customers	List customers
GET /accounts	List accounts
GET /reports	List reports

Supports json-server query parameters like _sort, _order, _page, _limit.

Sample Transaction

{
    "id": "1",
    "date": "2025-06-01",
    "description": "Opening Balance",
    "amount": 10000,
    "type": "deposit",
    "category": "Transfer",
    "status": "cleared"
}

---

API Configuration

↑ Back to top

The config.js file resolves API_BASE_URL in this priority order:

1. EXPO_PUBLIC_API_URL environment variable
2. Expo Constants host IP (for Expo Go)
3. Platform defaults (localhost for web/iOS, 10.0.2.2 for Android emulator)

To override:

EXPO_PUBLIC_API_URL=http://192.168.1.100:3001 npm start

---

Navigation

↑ Back to top

Navigation is managed via manual screen state in App.js (not React Navigation). The Menu component renders:

• Web (width > 768px) -- Horizontal top bar with Banking hover submenu
• Mobile -- Hamburger icon opening a full-screen modal menu