Connect Drive

A full-stack EV charging station management platform featuring real-time communication between mobile clients, web administration, and backend services.

🏗️ Architecture Overview

Connect Drive is a monorepo consisting of three interconnected applications:

┌─────────────────┐
│   Mobile App    │ (React Native)
│   iOS/Android   │
└────────┬────────┘
         │
         │ REST/WebSocket
         │
    ┌────▼────────────────┐        ┌──────────────┐
    │   Backend Service   │◄──────►│  PostgreSQL  │
    │   (Feathers.js)     │        │   Database   │
    └────────┬────────────┘        └──────────────┘
         │
         │ REST/WebSocket
         │
┌────────▼────────┐
│  Web Backoffice │ (Vue.js)
│  Admin Panel    │
└─────────────────┘

🛠️ Tech Stack

Mobile Application (`/app`)

Framework & Runtime

React Native 0.80.2 - Cross-platform mobile development
React 19.1.0 - UI component library
TypeScript 5.0.4 - Type-safe development

Navigation & UI

React Navigation 7.x - Native navigation (Bottom Tabs + Native Stack)
NativeWind 4.1 - Tailwind CSS for React Native
React Native Reanimated 4.0 - Performant animations
Gorhom Bottom Sheet 5.2 - Native bottom sheet component

Maps & Location

React Native Maps 1.25 - Native map implementation
React Native Geolocation Service 5.3 - Precise location tracking
Google Places Autocomplete 2.5 - Location search

Authentication

Firebase Auth 22.4 - Multi-provider authentication
Google Sign-In 15.0 - Google OAuth integration
Apple Authentication 2.4 - Apple Sign-In (iOS)

State & Storage

Async Storage 2.2 - Persistent local storage
React Native Config 1.5 - Environment configuration

Backend Service (`/svc`)

Framework & Runtime

Feathers.js 5.0 - Real-time REST/WebSocket framework
Koa - Modern Node.js web framework
Node.js ≥23.11.0 - JavaScript runtime
TypeScript 5.9 - Type-safe backend development

Database

PostgreSQL - Primary relational database
Knex.js 3.1 - SQL query builder & migrations
pg 8.16 - PostgreSQL client

Authentication & Security

@feathersjs/authentication 5.0 - JWT-based authentication
@feathersjs/authentication-local - Local email/password strategy
@feathersjs/authentication-oauth - OAuth provider support

Communication

Socket.IO (via @feathersjs/socketio) - Real-time bidirectional communication
REST API (via @feathersjs/koa) - RESTful HTTP endpoints
@feathersjs/transport-commons - Unified transport layer

Schema & Validation

@feathersjs/schema - Data validation
@feathersjs/typebox - TypeScript schema validation

Logging

Winston 3.17 - Structured logging

Web Backoffice (`/web`)

Framework & Runtime

Vue.js 3.5 - Progressive JavaScript framework
TypeScript 5.8 - Type-safe development
Vite 7.0 - Fast build tool and dev server

State Management & Routing

Pinia 3.0 - Vue state management
Vue Router 4.5 - Application routing

Styling

Tailwind CSS 4.1 - Utility-first CSS framework
@tailwindcss/vite - Vite integration

API Communication

@feathersjs/feathers 5.0 - Feathers client
@feathersjs/socketio-client 5.0 - Real-time client
Socket.IO Client 4.8 - WebSocket client library

Testing

Vitest 3.2 - Fast unit testing framework
Vue Test Utils 2.4 - Vue component testing

🔌 Inter-Service Communication

Communication Protocols

1. REST API

All services expose and consume RESTful endpoints following Feathers service pattern:

// Standard CRUD operations
GET    /api/chargers         // Find all chargers
GET    /api/chargers/:id     // Get specific charger
POST   /api/chargers         // Create charger
PATCH  /api/chargers/:id     // Update charger
DELETE /api/chargers/:id     // Delete charger

2. WebSocket (Socket.IO)

Real-time bidirectional communication for live updates:

// Event-based communication
socket.emit('find', 'chargers', params)
socket.on('chargers created', (data) => { })
socket.on('chargers patched', (data) => { })
socket.on('chargers removed', (data) => { })

3. Channel-Based Broadcasting

Feathers channels enable targeted real-time updates:

// Backend publishes to specific channels
app.channel('anonymous')      // Public updates
app.channel('authenticated')  // Authenticated users only
app.channel('admins')         // Admin-only updates

Data Flow Examples

Mobile App → Backend

Mobile Client
  └─► Firebase Auth (OAuth)
       └─► Backend Service
            └─► JWT Token Generation
                 └─► Authenticated Session

Real-time Charger Updates

Admin Panel (Web)
  └─► Update Charger Status
       └─► Backend Service
            ├─► PostgreSQL (Persist)
            └─► Socket.IO Broadcast
                 ├─► Mobile App (Live Update)
                 └─► Other Web Clients (Live Update)

Location-Based Charger Discovery

Mobile App
  └─► User Location + Search Radius
       └─► REST/WebSocket Query
            └─► Backend Service
                 └─► PostgreSQL (PostGIS Query)
                      └─► Filtered Chargers
                           └─► Mobile App (Display on Map)

📊 Database Schema

Core Entities

Chargers

UUID-based identification
PostGIS POINT type for geolocation
Support for AC/DC charger types
Real-time availability tracking
Maintenance scheduling

Connectors

Connector types and standards
Power ratings and compatibility
Status monitoring

Users

Multi-provider authentication
Profile management
Session tracking

Messages

User communications
System notifications

🔐 Authentication Flow

┌─────────────┐
│ Mobile/Web  │
└──────┬──────┘
       │ 1. OAuth Login (Google/Apple) or Email/Password
       ▼
┌──────────────┐
│   Firebase   │ (Mobile) or Direct (Web)
└──────┬───────┘
       │ 2. Token/Credentials
       ▼
┌──────────────┐
│   Backend    │
│   Service    │
└──────┬───────┘
       │ 3. Verify & Generate JWT
       ▼
┌──────────────┐
│  Feathers    │
│     JWT      │
└──────┬───────┘
       │ 4. Authenticated Session
       ▼
┌──────────────┐
│   Client     │
│  (Protected) │
└──────────────┘

🚀 Getting Started

Prerequisites

Node.js: ≥18 (app), ≥23.11 (svc), ≥20.19 (web)
PostgreSQL: ≥12
React Native CLI
Xcode (for iOS)
Android Studio (for Android)

Backend Service Setup

cd svc
npm install

# Configure database
cp config/default.json config/local.json
# Edit local.json with your PostgreSQL credentials

# Run migrations
npm run migrate

# Start development server
npm run dev

# Server runs on http://localhost:3030
# WebSocket available on ws://localhost:3030

Mobile App Setup

cd app
npm install

# iOS setup
cd ios && pod install && cd ..

# Android setup (ensure Android SDK is configured)
npm run android

# iOS
npm run ios

Configuration

Add GoogleService-Info.plist (iOS) and google-services.json (Android)
Configure Firebase project for authentication
Set up Google Maps API key (see GOOGLE_MAPS_SETUP.md)

Web Backoffice Setup

cd web
npm install

# Start development server
npm run dev

# Build for production
npm run build

📁 Project Structure

connect-drive/
├── app/                    # React Native mobile application
│   ├── android/           # Android native code
│   ├── ios/              # iOS native code
│   └── src/
│       ├── components/   # Reusable UI components
│       ├── screens/      # Screen components
│       ├── navigation/   # Navigation configuration
│       ├── services/     # API service layer
│       ├── hooks/        # Custom React hooks
│       ├── providers/    # Context providers
│       └── i18n/        # Internationalization
│
├── svc/                   # Feathers.js backend service
│   ├── config/           # Environment configuration
│   ├── migrations/       # Database migrations
│   └── src/
│       ├── services/     # Feathers services (chargers, users, etc.)
│       ├── hooks/        # Service hooks (middleware)
│       └── socket/       # WebSocket configuration
│
└── web/                   # Vue.js web backoffice
    └── src/
        ├── components/   # Vue components
        ├── router/       # Vue Router configuration
        └── stores/       # Pinia stores

🧪 Testing

# Backend tests
cd svc
npm test

# Mobile app tests
cd app
npm test

# Web app tests
cd web
npm run test:unit

📝 API Documentation

Once the backend service is running, API documentation is available at:

REST API: http://localhost:3030/
WebSocket: Connect to ws://localhost:3030

🔧 Development

Environment Variables

Backend (svc/.env)

NODE_ENV=development
PORT=3030
DATABASE_URL=postgresql://user:pass@localhost:5432/connectdrive

Mobile (app/.env)

API_URL=http://localhost:3030
GOOGLE_MAPS_API_KEY=your_key_here

Web (web/.env)

VITE_API_URL=http://localhost:3030

📄 License

See LICENSE file for details.

👥 Authors

Eledi - Initial work - edyrkaj@gmail.com

Built with ❤️ for the EV charging community

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
app		app
svc		svc
web		web
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Connect Drive

🏗️ Architecture Overview

🛠️ Tech Stack

Mobile Application (/app)

Backend Service (/svc)

Web Backoffice (/web)

🔌 Inter-Service Communication

Communication Protocols

1. REST API

2. WebSocket (Socket.IO)

3. Channel-Based Broadcasting

Data Flow Examples

Mobile App → Backend

Real-time Charger Updates

Location-Based Charger Discovery

📊 Database Schema

Core Entities

🔐 Authentication Flow

🚀 Getting Started

Prerequisites

Backend Service Setup

Mobile App Setup

Web Backoffice Setup

📁 Project Structure

🧪 Testing

📝 API Documentation

🔧 Development

Environment Variables

📄 License

👥 Authors

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Mobile Application (`/app`)

Backend Service (`/svc`)

Web Backoffice (`/web`)

Packages