Skip to content

docs: upgrade README to premium standard #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sayed-Herzallah wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: upgrade README to premium standard #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 79 additions & 55 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,83 @@
Green Economy Dashboard 🌱
An intelligent system to track green economy indicators, analyze environmental policies, and generate analytical reports to support decision-making.

🚀 Overview

A comprehensive web-based dashboard project that connects the frontend to the backend. It also supports working with mock data when the server is unavailable to ensure uninterrupted workflow.

🛠 Tech Stack

Frontend: React.js

State Management: React Context API (for language, theme, and user)

Styling: CSS3 with animations (e.g., Fade-in)

API Client: Axios with custom hooks for handling endpoints

✨ Core Features

Dashboard: Visualize carbon emissions, trends, and sector distribution.

Projects Management: Comprehensive project list with status and progress tracking.

Smart Reports: AI-powered summaries with file download options.

Notifications: Live alerts for carbon levels and allowed thresholds.

Settings: Customize account data and system preferences.

📂 Project Structure

src/api/config.js: Main file for connecting to the backend URL.

src/data/mockData.js: Fallback data to keep the app running offline.

src/context/: Manage language, theme, and user information.

src/hooks/: Handle API requests automatically.

⚙️ Getting Started

Install dependencies:

# 💻 Green Energy Dashboard React Frontend

<div align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:0d1117,100:10b981&height=160&section=header&text=Green%20Energy%20Dashboard&fontSize=40&fontColor=ffffff&fontFamily=Outfit" width="100%" />
</div>

<div align="center">
<img src="https://img.shields.io/badge/React-v18-blue?logo=react&style=for-the-badge" alt="React" /> <img src="https://img.shields.io/badge/Vite-v4-purple?logo=vite&style=for-the-badge" alt="Vite" /> <img src="https://img.shields.io/badge/Axios-HTTP-blue?style=for-the-badge" alt="Axios" /> <img src="https://img.shields.io/badge/CSS3-Animations-blue?logo=css3&style=for-the-badge" alt="CSS3" /> <img src="https://img.shields.io/badge/License-MIT-green?style=for-the-badge" alt="License" />
</div>

لوحة **مؤشرات الطاقة والاقتصاد الأخضر** التفاعلية، تم تطوير الواجهة الأمامية بالكامل باستخدام React ومجمع Vite لتمثيل إحصائيات البيئة وتأثير انبعاثات الكربون بصورة رسومية مع تبديل اللغات والمظهر الليلي عبر React Context API.

An intelligent, high-fidelity responsive frontend dashboard designed to visualize sustainable energy telemetry, carbon metrics, and sectors distribution. Engineered in React 18, with asynchronous endpoints consumption, live carbon threshold warnings, and offline fallback mock data support.

---

## 🧬 Client Navigation & Auth State Flow

The app orchestrates private dashboard views and fallback handlers:

```mermaid
graph TD
User[Client Visitor] --> App{JWT Active?}
App -->|No| Login[LoginPage: Input credentials]
Login -->|Authenticate| App
App -->|Yes| Layout[AppLayout: Dashboard Container]
Layout --> Sidebar[Sidebar: Interactive Routes]
Sidebar -->|Select Page| Router{Router Switch}
Router --> Dashboard[DashboardPage: Telemetry Charts]
Router --> Projects[ProjectsPage: Status Registry]
Router --> Reports[ReportsPage: AI Summaries]
Router --> Notifications[NotificationsPage: Alerts Log]
Router --> Settings[SettingsPage: Preferences Editor]
```

---

## 🛠️ Technology Stack & Modules

* **UI Library**: **React 18** (Vite compiler layout).
* **State Management**: **React Context API** managing theme, language translations (RTL/LTR configurations), and authentication logs.
* **API Client**: **Axios** with custom telemetry hooks mapping.
* **Styling**: Modern **CSS3 variables** managing glassmorphic themes.

---

## 📂 Repository Module Layout

```text
green-energy-dashboard-react/
├── src/
│ ├── api/ # API connection configuration
│ ├── components/ # Sidebar layouts & Header status bars
│ ├── context/ # AppContext: Multilingual & Theme state
│ ├── hooks/ # useFetch & useDashboard custom state hooks
│ ├── pages/ # Dashboard, Projects, Reports, Settings UI
│ ├── App.jsx # Router & Layout orchestrator
│ └── main.jsx # Render entry point
├── index.html # HTML5 container
├── package.json # Client build specifications
└── vite.config.js # Vite compiler parameters
```

---

## 🚀 Local Setup & Run

### 📋 Prerequisites
* Node.js v18 or higher

### ⚙️ Quick Start Steps
```bash
git clone https://github.com/Green-Economy/Green-Energy-Dashboard-React.git
cd Green-Energy-Dashboard-React
npm install

Configure the backend URL:

Open src/api/config.js and update BASE_URL with your server URL.

Run the project:

# Configure your BASE_URL inside src/api/config.js
npm run dev
🤝 Contribution

Fork the repository and create a Pull Request for new features or bug fixes.
```

Follow the existing code style and documentation conventions.
---

Open an Issue for bugs or suggestions to help track improvements.
## 📄 License
Licensed under the **MIT License**.