Work detail

Context

Photovoltaic installations generate large volumes of energy data that, without proper presentation, are difficult to interpret:

• utility company
• grid operator
• inverter
• local storage

Solar centralizes and displays this information in a visual, coherent, and accessible way from a single web panel.

What it solves

The application allows:

• Visualize energy behavior by day, month, or year
• Compare production, consumption, and export/import
• Understand the energy balance immediately
• Manage data loads and backups (admin users)
• The interface adapts labels and controls based on the selected period.

All of this consumes data already normalized and consolidated by the backend API.

View architecture and component reuse

In the frontend there are three main views: Daily, Monthly, and Yearly.

All three reuse the same chart component (same chart type and visual base). What changes between views is:

• the period selector (date / month / year),
• the data aggregation (hours / days / months),
• and the labels and texts shown to the user.

The chart is the same; the difference is in data logic and period control.

Main features

Daily view

• Date selector
• Chart with 24 hourly values
• Energy flow visualization:
• photovoltaic production

Monthly view

• Month selector
• Chart with data aggregated by day
• Clear comparison of production and consumption over the month

Yearly view

• Year selector
• Chart with data aggregated by month
• Global view of annual energy behavior

Management and administration

Admin access enables additional functionality:

• Bulk CSV file uploads
• Backup downloads
• Basic data management from the web UI

The "Update profile" option is visible but currently shows a notice for feature under construction.

Backend API consumption

The frontend consumes the Solar API in three ways:

• POST /users/login — Daily endpoint
• GET /photovoltaics/date/:date — Monthly endpoint
• POST /photovoltaics/upload — Yearly endpoint
• GET /photovoltaics — Status endpoint

The API base URL is managed through environment variables (VITE_API_BASE_URL).

Security and access control

• User authentication
• Role-based access
• Protected admin functions
• Audit logging

Frontend security is aligned with the API, keeping responsibilities separated.

Architecture and tech stack

• Framework: Vue 3
• Build tool: Vite
• Routing: Vue Router
• UI: Vuetify
• Charts: ECharts (via vue-echarts)
• HTTP: Axios
• Mobile: Capacitor (base configuration included)

Mobile readiness

• Responsive layout
• Capacitor configuration
• Progressive enhancements

The project is prepared for mobile deployment if required.

Deployment

• Netlify hosting
• Automatic builds
• Custom domain

🔗 Live demo

🔗 GitHub repository (frontend)

What this project proves

This project demonstrates my ability to:

• Build real monitoring apps for photovoltaic data
• Design clear interfaces for complex energy flows
• Integrate multiple sources into one system
• Operate production software with stability
• Translate industrial data into user-friendly dashboards
• Apply governance and traceability to software

Project images