EcoSpot: A Collaborative Ecological Platform

Today marks the final day of our second project during this first year of engineering at ESPRIT. I am incredibly happy that it concluded well, and to mark this milestone, I am documenting the work through this technical article. I am really looking forward to the next phase in the future: transitioning from this web-based implementation to recreating and expanding the platform as a mobile application!

Project Overview

EcoSpot was born from the need to address the fragmented nature of ecological data and the lack of a centralized platform for environmental insights in Tunisia. The website serves as a unified hub to tackle several key challenges:

• Information Fragmentation: Ecological issues and data are often dispersed across unreliable or disconnected sources.
• No Reporting Mechanism: Citizens lack a centralized platform to submit tickets or report on-the-ground ecological problems.
• Low Visibility for Action: There is no single place to track environmental problems or discover events organized by nature-focused NGOs.
• Lack of Local Research: Deeply researched information regarding Tunisian advancements in the ecological field is difficult to access for the general public.

By centralizing these elements, EcoSpot provide a comprehensive environment where users can monitor ecological trends, engage with NGO initiatives, and stay informed through credible local research.

Technologies

• Backend: Doctrine ORM, Symfony 6.4 (MVC architecture).
• Database: MySQL.
• AI Integration: OpenRouter API, DeepFace (Python), ResponsiveVoice.js, and Nominatim API.
• Frontend: AJAX and Symfony UX.

Team Division

The implementation was divided between four team members:

• Mohamed Dhia Aouina (Me) : Developed the user interface, the homepage, and the blog engine with multi-lingual support.
• Wiem Jouini : Implemented the authentication system, user registration workflows, and general user management.
• Mohamedaziz Gasmi: Built the backend logic for event creation, organization, and NGO-led event management.
• Ghassen Ben Fraj : Managed the ticketing system and the achievement logic.

Academic Supervisor:

• Imen El Hakim : Our professor who supervised our development progress and guided the team throughout the project.

My Contributions

Technologies

• Integrated AIs:
  • OpenRouter API: AI models for automatic SEO, title, and metadata.
  • ResponsiveVoice.js: Text-to-speech API for reading articles aloud.
• Bundles:
  • knp-paginator-bundle: Handles data list pagination.
  • knplabs/knp-time-bundle: Formats dates as readable "time ago" strings.
• API Integrations:
  • Google Translate API: Handles the backend translation logic.
  • Unsplash API: In-app searching and fetching of copyright-free images.
  • TinyMCE API: Rich Text Editor for full-featured article creation.

1. General Interface

• Translation Engine: Built a custom TranslationService wrapping Google Translate API.
• Caching Mechanism: Integrated cache with translating queries (caching for 1 week) to reduce latency and API calls.
• Dynamic Language Switcher: Created the LanguageController storing the target locale (en, fr, ar).

2. Article Creation & Validation

• AI Integration: Integrated OpenRouter API models directly into the pipeline to auto-generate titles, relevant SEO data, and meta tags based on the writer's content.
• Content Validation: Enforces strict submission rules to maintain quality, completely preventing duplicate article titles and outright blocking invalid content like number-only inputs.
• Rich Media Editing: Supported by the TinyMCE API and Unsplash API hook for users to browse and attach copyright-free images immediately while drafting.

3. Multi-Lingual Blog System

• AI Accessibility Integration: Added built-in Text-to-Speech functionality using the ResponsiveVoice API to read articles aloud, vastly improving accessibility.
• Content Translation: Ensured that the entire blog experience is multi-lingual by seamlessly translating article posts, their titles, and all related user comments on the fly.
• Article Discovery: Advanced querying supporting granular searches by categories, tags, writers, and string-matching.
• Cross-Lingual Searching: Connected the Search Engine directly to the "TranslationService". If a visitor searches in French or Arabic, their query is translated dynamically and matched seamlessly against the core English database.
• Reactions & Engagement: Built a seamless AJAX-powered reaction system allowing authenticated users to Like or Dislike articles.
• Comments Management: Established an interactive, secure commenting block tied natively to the user session, featuring a dedicated moderation panel for admins to curate and ensure accountable community discussions.
• Pagination: Structured the UI effectively using knplabs/knp-paginator-bundle.

4. Quality Assurance & Performance

• Static Analysis: Achieved Level 8 on PHPStan with zero issues.
• Database Optimization: Integrated doctrine-doctor to monitor queries and optimize database interactions.
• Unit Testing: Implemented automated unit tests to secure core logic and prevent regressions during development.
• Fast Performance: The combination of caching, optimized queries, and efficient AJAX interactions resulted in a highly performant application.