Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kariemseiam/geoegy
An innovative and responsive dashboard to discover, filter, and analyze places across Egypt. Featuring advanced search, interactive maps with Leaflet.js, real-time analytics, dark mode, and seamless data export—all wrapped in a sleek, modern design with RTL support.
https://github.com/kariemseiam/geoegy
accessibility data-analysis data-visualization es6-modules geojson javascript leaflet mapping openstreetmap places-data responsive-design web-development
Last synced: 6 days ago
JSON representation
An innovative and responsive dashboard to discover, filter, and analyze places across Egypt. Featuring advanced search, interactive maps with Leaflet.js, real-time analytics, dark mode, and seamless data export—all wrapped in a sleek, modern design with RTL support.
- Host: GitHub
- URL: https://github.com/kariemseiam/geoegy
- Owner: kariemSeiam
- Created: 2024-11-10T16:17:15.000Z (8 days ago)
- Default Branch: main
- Last Pushed: 2024-11-11T18:30:04.000Z (7 days ago)
- Last Synced: 2024-11-11T19:29:03.434Z (7 days ago)
- Topics: accessibility, data-analysis, data-visualization, es6-modules, geojson, javascript, leaflet, mapping, openstreetmap, places-data, responsive-design, web-development
- Language: JavaScript
- Homepage:
- Size: 71.3 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Geo-Egypt for Places in Egypt
**Discover, Analyze, and Explore Egypt's Places with Modern Elegance**
---
## 🎉 Introduction
Welcome to the **Geo-Egypt Dashboard for Places in Egypt** — an innovative, sleek, and user-friendly platform designed to revolutionize how you interact with place data across Egypt. Built with the latest design trends of 2024, this dashboard offers an unparalleled experience combining functionality with modern aesthetics.
---
## 🔥 Key Features
- **Advanced Filtering**: Effortlessly search and filter places by keywords, categories, governorates, ratings, and more.
- **Interactive Mapping**: Navigate through an integrated, responsive map powered by Leaflet.js.
- **Real-Time Analytics**: Stay informed with dynamic metrics displayed in an intuitive analysis bar.
- **Dark Mode**: Choose between light and dark themes to suit your visual preference.
- **Data Export**: Seamlessly export your filtered data in CSV format for external use.
- **Responsive Design**: Enjoy a flawless experience on any device, whether desktop, tablet, or mobile.
- **Accessibility First**: Designed with inclusivity in mind, including right-to-left language support.
---
## 🚀 Get Started in Minutes
### Prerequisites
- Modern web browser (Chrome, Firefox, Edge, Safari).
- (Optional) Node.js and npm for running a local server.
### Installation
1. **Clone the Repository**
```bash
git clone https://github.com/GeoEgy/GeoEgy.git
```
2. **Navigate to the Project Directory**
```bash
cd Geo-Egypt-dashboard
```
3. **Run the Dashboard**
- **Option A**: Open `index.html` directly in your browser.
- **Option B**: Start a local development server (for full module support):
```bash
npx http-server .
```
---
## 🎨 Live Preview
Experience the dashboard in action:
[Live Demo](https://yourdemo.link) - *Replace with your actual demo link.*
---
## 🛠️ Usage Guide
1. **Load Data**
- Click **"Upload Data"** to import your JSON dataset containing place information.
2. **Filter & Search**
- Utilize the search bar and filters to refine results based on:
- **Keywords**
- **Categories**
- **Governorates**
- **Minimum Ratings**
- **Availability of Phone Numbers or Websites**
3. **Analyze Data**
- Monitor key metrics such as total places, reviews count, and average ratings in the real-time analysis bar.
4. **Explore the Map**
- Toggle **"Map View"** to visualize places geographically.
- Interact with map markers for detailed information and navigation options.
5. **Export Data**
- Click **"Export Data"** to download the current dataset in CSV format.
6. **Customize Appearance**
- Switch between **Light** and **Dark** modes using the theme toggle button for optimal viewing comfort.
---
## ⚙️ Project Structure
Here's a breakdown of the project's files and directories:
```plaintext
Geo-Egypt-dashboard/
│
├── index.html # Core HTML structure
├── styles.css # CSS styles with variables for easy theming
├── script.js # Main JavaScript file
└── modules/ # Modular JavaScript components
├── analysisBar.js # Real-time analytics functions
├── events.js # Event listeners and handlers
├── exportData.js # Data export functionality
├── fileUpload.js # Data import and processing
├── filters.js # Data filtering logic
├── map.js # Map initialization and interaction
├── modals.js # Modal windows management
├── pricing.js # Pricing calculations (if applicable)
├── renderData.js # Rendering of data to the DOM
└── utils.js # Utility functions (e.g., debounce, theme toggle)
```
---
## 💻 Technologies and Tools
- **HTML5 & CSS3**: Semantic structure and modern styling.
- **JavaScript (ES6+)**: Clean, modular codebase with the latest ECMAScript features.
- **Leaflet.js**: Interactive and responsive mapping.
- **Font Awesome**: Extensive icon library for visual enhancement.
- **Google Fonts**: Crisp typography with the 'Cairo' font.
- **Accessibility Best Practices**: Ensuring an inclusive user experience.
---
## 🌐 Browser Compatibility
This dashboard is fully compatible with all modern browsers and is optimized for both desktop and mobile devices.
---
## 🤲 How to Contribute
We appreciate your interest in contributing! Here's how you can help:
1. **Fork the Repository**
Click on **Fork** at the top right corner of this page.
2. **Clone Your Fork**
```bash
git clone https://github.com/kariemSeiam/GeoEgy.git
```
3. **Create a New Branch**
```bash
git checkout -b feature/your-feature-name
```
4. **Make Your Changes**
Implement your feature or fix.
5. **Commit and Push**
```bash
git commit -m "Add new feature"
git push origin feature/your-feature-name
```
6. **Open a Pull Request**
Submit your pull request against the **main** branch with a detailed description.
---
## 📝 License
This project is released under the [MIT License](LICENSE).
---
## 📫 Get in Touch
Have questions or suggestions? We'd love to hear from you!
- **Email**: [[email protected]](mailto:[email protected])
- **LinkedIn**: [Kariem Seiam](https://www.linkedin.com/in/kariemseiam/)
- **GitHub**: [kariemSeiam](https://github.com/kariemSeiam)
---
## 🙌 Acknowledgments
A heartfelt thank you to all contributors and the following resources:
- **[OpenStreetMap](https://www.openstreetmap.org/)**: For providing open-source map data.
- **[Leaflet.js](https://leafletjs.com/)**: For the interactive mapping library.
- **[Font Awesome](https://fontawesome.com/)**: For the comprehensive icon library.
- **Community Contributors**: For their valuable input and support.
---
## 🌟 Final Thoughts
The Geo-Egypt Dashboard is more than just a tool — it's a gateway to exploring Egypt's vibrant places with ease and style. We are committed to continuous improvement and incorporating cutting-edge design philosophies to enhance your experience.
---