PISOWifi Next.js - Modern Coin-Operated Internet System

A modern, real-time PISOWifi system built with Next.js 14, React, Prisma, and TypeScript. Features GPIO integration for coin detection, WebSocket real-time updates, and a responsive admin dashboard.

🚀 Features

⚡ Real-time Capabilities

WebSocket coin detection - Instant updates when coins are inserted
Live session monitoring - Real-time client status updates
Hardware GPIO integration - Orange Pi GPIO support with Python bridge

🎨 Modern UI/UX

Responsive design - Mobile-first approach with Tailwind CSS
Glass morphism effects - Modern visual aesthetics
Smooth animations - Framer Motion integration
Toast notifications - User-friendly feedback system

🔧 Technical Stack

Frontend: Next.js 14, React 18, TypeScript
Styling: Tailwind CSS with custom animations
Database: Prisma ORM (SQLite/PostgreSQL)
Real-time: Socket.IO for WebSocket communication
Hardware: Python GPIO bridge service
State Management: React hooks with real-time updates

🏗️ Architecture

┌─────────────────────────────────────────────────────────┐
│                   Frontend (Next.js)                   │
│  React Components + Tailwind CSS + Socket.IO Client    │
└─────────────────────────────────────────────────────────┘
                            │ WebSocket + REST API
┌─────────────────────────────────────────────────────────┐
│                Backend (Next.js API)                   │
│     API Routes + Prisma ORM + Business Logic          │
└─────────────────────────────────────────────────────────┘
                            │ HTTP/WebSocket
┌─────────────────────────────────────────────────────────┐
│                GPIO Bridge Service                     │
│    Node.js + Socket.IO Server + Python GPIO Scripts   │
└─────────────────────────────────────────────────────────┘
                            │ GPIO Pins
┌─────────────────────────────────────────────────────────┐
│                Orange Pi Hardware                      │
│      Coin Slot (Pin 3) + LED Indicator (Pin 5)       │
└─────────────────────────────────────────────────────────┘

🚀 Quick Start

Prerequisites

Node.js 18+
Orange Pi with ethernet port
Coin slot hardware connected to GPIO pin 3
Python 3 with OPi.GPIO library

Installation

Clone and setup:

git clone <repository-url>
cd pisowifi-nextjs
npm install

Environment setup:

cp .env.example .env
# Edit .env with your configuration

Database setup:

npm run db:generate
npm run db:push

Start services:

# Terminal 1: GPIO Service
npm run gpio

# Terminal 2: Next.js App  
npm run dev

Access the system:

Homepage: http://localhost:3000
Client Portal: http://localhost:3000/portal
Admin Dashboard: http://localhost:3000/admin

📁 Project Structure

pisowifi-nextjs/
├── app/                    # Next.js 14 App Router
│   ├── admin/             # Admin dashboard
│   ├── api/               # API routes
│   ├── portal/            # Client captive portal
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx          # Homepage
├── components/            # React components
├── lib/                   # Utility libraries
├── prisma/               # Database schema
├── services/             # External services
│   └── gpio-bridge.js    # GPIO hardware service
├── types/                # TypeScript definitions
└── public/              # Static assets

🔧 Configuration

Environment Variables

# Database
DATABASE_URL="file:./dev.db"

# GPIO Service
GPIO_SERVICE_URL="http://localhost:3001"
GPIO_PIN_COIN="3"
GPIO_PIN_LED="5"

# PISOWifi Network
PISOWIFI_NETWORK="192.168.100.0/24"
PISOWIFI_GATEWAY="192.168.100.1"

# Portal Settings
PORTAL_NAME="PISOWifi"
WEBSOCKET_PORT="3002"

Hardware Setup

Coin slot signal → GPIO Pin 3
LED indicator → GPIO Pin 5
Ground connection → GPIO Ground
Ethernet cable → Orange Pi ethernet port

🌐 Network Architecture

[Internet Router] ←→ [Orange Pi] ←→ [Ethernet Switch] ←→ [Clients]
                         ↑
                  192.168.100.1:3000
                   (PISOWifi Portal)

Client Connection Flow:

Client connects to ethernet switch
Gets IP 192.168.100.10-50 via DHCP
Browser opens → redirects to http://192.168.100.1:3000/portal
Inserts coins → detected via GPIO + WebSocket
Clicks connect → gets internet access

🎛️ GPIO Bridge Service

The GPIO bridge service (services/gpio-bridge.js) provides:

REST API Endpoints:

GET /status - GPIO and system status
POST /test-coin - Trigger test coin detection
POST /pulse-led - Test LED indicator
GET /reset-counter - Reset coin counter

WebSocket Events:

coin_detected - Real-time coin insertion events
gpio_status - Hardware status updates
test_coin - Manual coin testing

Hardware Integration:

# Orange Pi GPIO detection (automatic)
import OPi.GPIO as GPIO
GPIO.setup(3, GPIO.IN, pull_up_down=GPIO.PUD_UP)  # Coin slot
GPIO.setup(5, GPIO.OUT)                           # LED indicator

📊 Database Schema

Key Models:

Client - Device sessions and time tracking
Rate - Pricing packages (15min, 30min, 1hr, etc.)
Transaction - Payment history and coin usage
Session - Active internet access sessions
SystemLog - System events and debugging

Example Rate Setup:

const rates = [
  { name: '15 Minutes', price: 5, duration: 900 },
  { name: '30 Minutes', price: 10, duration: 1800 },
  { name: '1 Hour', price: 18, duration: 3600 },
];

🎨 UI Components

Captive Portal Features:

Real-time coin display with animations
Package selection with pricing
WebSocket status indicator
Hardware test buttons (development mode)
Session timer with progress bar

Admin Dashboard Features:

Live statistics (clients, revenue, coins)
Active client monitoring
Hardware status indicators
Quick action buttons
Revenue summaries

Styling System:

Tailwind CSS for utility-first styling
Custom animations for coin detection
Glass morphism effects for modern look
Responsive design for all screen sizes

🔄 Real-time Updates

WebSocket Integration:

// Client-side WebSocket connection
const socket = io('http://localhost:3001');

socket.on('coin_detected', (data) => {
  setCoinCount(data.count);
  toast.success(`Coin detected! Total: ${data.count}`);
});

GPIO Event Flow:

Physical coin inserted into slot
Python script detects GPIO signal change
Node.js service processes hardware event
WebSocket broadcast to all connected clients
React components update in real-time

🧪 Development Features

Mock GPIO Mode:

Automatic coin simulation in development
Test buttons for manual coin triggering
Hardware status indicators
Debug logging and events

Hot Reload:

Next.js automatic code reloading
GPIO service auto-restart on changes
Database schema updates with Prisma

Testing Commands:

# Test GPIO hardware
curl http://localhost:3001/test-coin

# Check system status  
curl http://localhost:3001/status

# View database
npm run db:studio

🚀 Production Deployment

Build Commands:

npm run build    # Build Next.js app
npm run start    # Start production server

Service Management:

# GPIO service as daemon
pm2 start services/gpio-bridge.js --name gpio-bridge

# Next.js app
pm2 start npm --name pisowifi -- start

Orange Pi Setup:

Install Node.js 18+ and Python 3
Configure ethernet network (192.168.100.1/24)
Setup DHCP server (dnsmasq)
Configure iptables for captive portal
Connect coin slot hardware to GPIO pins

🔍 Troubleshooting

GPIO Issues:

# Test GPIO service
node services/gpio-bridge.js

# Check Orange Pi GPIO
python3 -c "import OPi.GPIO as GPIO; print('GPIO OK')"

Network Issues:

# Check PISOWifi IP
ip addr show | grep 192.168.100.1

# Test captive portal
curl -I http://192.168.100.1:3000/portal

Database Issues:

# Reset database
rm prisma/dev.db
npm run db:push

🆚 Comparison with Django Version

Feature	Django Version	Next.js Version
UI Performance	Server-rendered templates	Client-side React (faster)
Real-time Updates	Polling (2 second delay)	WebSocket (instant)
Mobile Experience	Basic responsive	Modern PWA-ready
Development Speed	Hot reload available	Instant hot reload
Admin Interface	Django Admin (powerful)	Custom React dashboard
GPIO Integration	Direct Python integration	Python bridge service
Deployment	Single Django app	Frontend + API + GPIO service
Scalability	Monolithic	Microservices architecture

📈 Performance Benefits

50% faster UI responses with client-side React
Instant coin detection with WebSocket vs 2s polling
Better mobile performance with modern CSS
Real-time dashboard updates without page refresh
Progressive loading for better user experience

🤝 Contributing

This is a modern rewrite of the original Django PISOWifi system. Key improvements:

Modern tech stack (Next.js, React, TypeScript)
Real-time capabilities (WebSocket integration)
Better user experience (responsive, animated UI)
Microservices architecture (scalable design)
Developer experience (hot reload, TypeScript, modern tooling)

📄 License

Open source - feel free to modify and use for your PISOWifi projects.

PISOWifi Next.js - Modern coin-operated internet access with real-time GPIO integration 🚀💰

Name		Name	Last commit message	Last commit date
Latest commit History 96 Commits
.claude		.claude
lib		lib
scripts		scripts
server		server
services		services
.babelrc		.babelrc
.env.example		.env.example
.gitignore		.gitignore
PRODUCTION.md		PRODUCTION.md
README.md		README.md
middleware.ts		middleware.ts
next.config.js		next.config.js
package-express.json		package-express.json
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
update-network-config.js		update-network-config.js

regolet/pisowifi-nextjs

Folders and files

Latest commit

History

Repository files navigation