GridPulse

Real-time IoT monitoring platform for smart grid infrastructure

A full-stack energy grid monitoring and management application built with Angular and Spring Boot. This project demonstrates modern enterprise development practices including containerization, database migrations, CI/CD pipelines, and comprehensive testing strategies.

🎥 Demo

Note: This project includes full deployment configuration for Railway (backend) and Vercel (frontend). Live deployment paused for cost optimization. See screenshots below or run locally with Docker.

Screenshots

🔐 Authentication

Login with Demo Credentials

Secure authentication with demo account access

📊 Dashboard & Monitoring

Dashboard Overview

Real-time device monitoring with key metrics

Interactive Map View

Geolocation tracking of all devices

Device clustering and selection

Map Filtering

Advanced filtering capabilities

🔋 Device Management

Device List

Paginated device inventory with search and filters

Device Details

Comprehensive device information including BMS, Meter, and Inverter data

📈 Analytics

Analytics Overview

Device performance metrics and trends

Device Selector

Multi-device comparison interface

Battery Health Monitoring

State of Health (SOH) and power dispatch metrics

Consumption Metrics

Energy consumption and production analysis

🚨 Alerts & Notifications

Alerts List

System alerts and warnings dashboard

Alert Details

Detailed alert information and resolution tracking

Notifications

Real-time notification center

🏢 Fleet Management

Fleets List

Organization-level fleet overview

Fleet Pagination

Paginated fleet browsing

Fleet Details

Individual fleet management and device assignment

👥 User Management & Settings

User Management

Role-based user administration

Profile Settings

User profile configuration

Security Settings

Password and authentication management

Profile Menu

Quick access navigation

💻 Run Locally

# Clone repository
git clone https://github.com/Ammari-Youssef/GridPulse.git
cd GridPulse

# Start all services with Docker
docker-compose up --build

# Access the application
# Frontend: http://localhost:4200
# Backend API: http://localhost:8080
# PostgreSQL: localhost:5432

Demo Credentials:

Email: youssef@gridpulse.io
Password: ysf@1234
Role: Admin (full access to all features)

🚀 Tech Stack

Frontend

Angular 19 - Modern web framework with standalone components
Angular Material - Material Design UI components
TailwindCSS 4 - Utility-first styling
Apollo GraphQL - Efficient API data fetching
Leaflet - Interactive map visualization
TypeScript - Type-safe development

Backend

Spring Boot 3.4.5 - Production-grade Java framework
PostgreSQL - Relational database
Liquibase - Version-controlled database migrations
Spring Security + JWT - Secure authentication & authorization
GraphQL - Flexible API query language
Maven - Dependency management & build automation

DevOps & Quality

Docker & Docker Compose - Containerization
GitHub Actions - CI/CD automation
JUnit & Mockito - Unit testing
Testcontainers - Integration testing with real databases
JaCoCo - Code coverage reporting
SonarQube - Static code analysis

🏗️ Project Structure

GridPulse/
├── backend/              # Spring Boot API (Java 17)
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/           # Application code
│   │   │   └── resources/
│   │   │       ├── db/changelog/  # Liquibase migrations
│   │   │       ├── application.yml
│   │   │       └── application-prod.yml
│   │   │       └── application-dev.yml
│   │   │       └── application-seed.yml
│   │   │       └── application-docker.yml
│   │   └── test/               # Unit & integration tests
│   ├── Dockerfile
│   └── pom.xml
├── frontend/             # Angular 19 SPA
│   ├── src/
│   │   ├── app/
│   │   │   ├── core/           # Services, guards, interceptors
│   │   │   ├── features/       # Feature modules
│   │   │   ├── shared/         # Shared components
│   │   │   └── layout/         # Layout components
│   │   ├── environments/       # Environment configs
│   │   └── assets/
│   ├── Dockerfile
│   ├── package.json
│   └── angular.json
├── docs/
│   ├── screenshots/      # Application screenshots
│   ├── DEPLOYMENT.md     # Deployment guide (Railway/Vercel)
│   ├── ARCHITECTURE.md   # Application system design
│   ├── API.md   # GraphQL API documentation
│   └── message-payloads/ # Alert message examples
├── .github/workflows/    # CI/CD pipelines
├── docker-compose.yml
└── README.md

⚡ Quick Start

Prerequisites

Node.js 18+
Java 17+
Maven 3.8+
Docker & Docker Compose

Development Setup

1. Clone the repository:

git clone https://github.com/Ammari-Youssef/GridPulse.git
cd GridPulse

2. Start with Docker (Recommended):

docker-compose up --build

3. Or run services separately:

Backend:

cd backend
mvn clean install
mvn spring-boot:run

Frontend:

cd frontend
npm install
ng serve

Access:

Frontend: http://localhost:4200
Backend API: http://localhost:8080/graphql
GraphiQL: http://localhost:8080/graphiql

🧪 Testing

Backend Tests

cd backend

# Run all tests
mvn test

# Run with coverage
mvn clean verify

# View coverage report
open target/site/jacoco/index.html

Frontend Tests

cd frontend

# Run unit tests
ng test

# Run with coverage
ng test --code-coverage

🔨 Building for Production

Docker Build

docker-compose up --build

Manual Build

Backend:

cd backend
mvn clean package -DskipTests
# Output: target/gridpulse-backend-*.jar

Frontend:

cd frontend
ng build --configuration production
# Output: dist/gridpulse/browser/

🚀 Deployment

This project includes full deployment configuration for:

Backend + Database: Railway
Frontend: Vercel

See docs/DEPLOYMENT.md for complete setup instructions.

✨ Key Features

✅ Real-time Monitoring - Live device status and metrics
✅ Interactive Maps - Geolocation tracking with clustering
✅ Advanced Analytics - Historical data visualization
✅ Alert Management - Configurable alerts and notifications
✅ Fleet Management - Organize devices into fleets
✅ User Management - Role-based access control (Admin/User)
✅ Responsive Design - Mobile-friendly interface
✅ GraphQL API - Efficient data fetching
✅ Database Migrations - Version-controlled schema changes
✅ Secure Authentication - JWT-based auth with refresh tokens

🔐 Environment Configuration

Local Development

Uses environment.development.ts (localhost)

Production

Uses environment.production.ts (deployed URLs)

See individual service READMEs for detailed configuration:

🐛 Troubleshooting

Port Conflicts

docker-compose down
# Edit docker-compose.yml to change ports
docker-compose up

Database Reset

docker-compose down -v
docker-compose up --build

Build Issues

# Backend
cd backend && mvn clean

# Frontend
cd frontend && rm -rf node_modules && npm install

📚 Documentation

Deployment Guide - Railway & Vercel deployment
API Documentation - GraphQL schema & queries
Architecture Overview - System design & tech stack

🤝 Contributing

This is a portfolio project demonstrating full-stack development capabilities. Feedback and suggestions are welcome!

Fork the repository
Create a feature branch
Commit your changes
Open a Pull Request

📄 License

This project is part of my portfolio and is available for educational purposes.

👤 Author

Youssef Ammari

Built with ❤️ to demonstrate modern full-stack development practices

Last Updated: January 2026

Name		Name	Last commit message	Last commit date
.github		.github
backend		backend
docs		docs
frontend		frontend
.dockerignore		.dockerignore
.gitignore		.gitignore
Makefile		Makefile
README.md		README.md
docker-compose.yml		docker-compose.yml

Latest commit

History

Folders and files

Repository files navigation