ENET'Com Docs - Academic Resource Platform

Project Overview

ENET'Com Docs is a centralized academic resource platform I built to help students at the École Nationale d'Électronique et des Télécommunications de Sfax access course materials effortlessly. The platform serves over 4 engineering programs (GEC, GT, GII, IDSD) and LTIC and provides a modern, student-friendly interface with integrated productivity tools.

What started as a simple idea to organize scattered course materials evolved into a full-featured platform with Google Drive integration, a built-in Pomodoro timer, study music player, and an eye-friendly dark mode with animated galaxy background. The platform is fully responsive and optimized for mobile devices, where most students access their materials.

Key Technical Achievements

The Challenge: From Google Drive to Dynamic Web Content

The main challenge was transforming scattered Google Drive folders into an organized, accessible platform. I solved this through a two-phase approach:

Phase 1: Python Scraper - Drive to JSON

I built a Python scraper using the Google Drive API to recursively fetch all course folders and convert them into structured JSON files:

# Fetching and structuring drive data into JSON
def fetch_folder_structure(folder_id, service):
    files = service.files().list(
        q=f"'{folder_id}' in parents",
        fields="files(id, name, mimeType, webViewLink)"
    ).execute()
    return files.get('files', [])

Each program (GEC, GT, GII, IDSD, LTIC) got its own JSON file with the complete folder hierarchy, file names, and shareable links. This eliminated the need for real-time API calls on the frontend, drastically improving load times.

Phase 2: JavaScript Renderer - JSON to Interactive UI

The frontend dynamically renders these JSON files into an interactive file browser:

// Loading and rendering JSON data
fetch('js/GEC_1st_Year.json')
    .then(response => response.json())
    .then(data => renderFileStructure(data));

Additional Features

• Dark Mode System: Built with CSS custom properties and localStorage for persistence across sessions
• Animated Galaxy Background: Canvas-based particle system that activates in dark mode for an immersive experience
• Pomodoro Timer: Integrated productivity tool with music player to help students during study sessions
• Responsive Design: Mobile-first approach with smooth animations and touch-friendly navigation

Impact & Results

The platform has become an essential tool for ENET'Com students, serving 100+ course folders organized across 3 academic years for 5 engineering programs. With 70% mobile traffic and an average session duration exceeding 8 minutes, the platform demonstrates strong user engagement. The pre-generated JSON approach achieved Lighthouse scores of 90+ across all metrics.

Technologies Used

• Backend: Python with Google Drive API v3 for scraping and JSON generation
• Frontend: JavaScript, HTML5, CSS3
• Data Architecture: JSON-based static file serving for optimal performance
• Styling: CSS Custom Properties for theming
• Deployment: Vercel

Key Takeaways

This project demonstrates the power of combining Python for data processing with vanilla JavaScript for frontend rendering. By pre-processing Drive data into JSON files, I achieved fast load times without sacrificing functionality. The platform continues to serve hundreds of students and receives positive feedback for its intuitive design and helpful features.