Slideforge : Un Outil de Génération de Présentations HTML

Dans le cadre de ma deuxième année de BUT Informatique à l’IUT Aix-Marseille, j’ai eu l’opportunité de développer Slideforge, un outil de génération de présentations HTML basé sur ReactJS. L’objectif était de créer une application simple et modulable permettant de concevoir des présentations dynamiques avec une structure de code claire et maintenable.

Fonctionnalités Principales

Création de présentations personnalisées grâce à des composants React.
Navigation fluide entre les diapositives avec des ancres.
Intégration de composants variés : titres, images, listes, paragraphes, blocs de code, etc.
Design adaptatif grâce à TailwindCSS.

L’Idée Derrière Slideforge

L’objectif de Slideforge était simple : créer un outil permettant de générer des présentations HTML dynamiques et personnalisables. Mais au-delà de cet objectif, il s’agissait de concevoir une application modulaire, performante et facile à maintenir. J’ai choisi ReactJS pour sa flexibilité et sa puissance dans la gestion des interfaces interactives.

Défis et Solutions

Un des principaux défis a été de structurer l’application de manière à ce que chaque composant soit réutilisable et facilement extensible. J’ai ainsi développé une architecture modulaire avec des composants tels que Deck, Slide, Title, et bien d’autres. L’intégration de TailwindCSS m’a permis de maintenir un design épuré et responsive sans sacrifier la rapidité de développement.

Pour optimiser les performances, j’ai utilisé Vite pour la compilation rapide du code et SWC pour la transpilation, ce qui a considérablement réduit les temps de chargement.

Un Aperçu du Code

Voici un extrait représentatif de la simplicité et de la clarté de Slideforge :

import React from 'react';
import Deck from './components/Deck';
import Slide from './components/Slide';
import Title from './components/Title';

function App() {
  return (
    <Deck>
      <Slide type="title">
        <Title>Bienvenue sur Slideforge</Title>
      </Slide>
      <Slide anchor="slide-2">
        <Title>Fonctionnalités Clés</Title>
      </Slide>
    </Deck>
  );
}

Cet exemple illustre la facilité d’ajout de nouvelles diapositives et de composants personnalisés, favorisant une expérience utilisateur fluide.

Apprentissage et Résultats

Travailler sur Slideforge m’a permis de :

Renforcer mes compétences en ReactJS et en conception d’interfaces modulaires.
Apprendre à gérer des outils modernes comme Vite et TailwindCSS.
Optimiser des performances front-end avec des outils de transpilation comme SWC.
Développer une approche rigoureuse de la gestion de projet logiciel.

Conclusion

Slideforge a été bien plus qu’un simple projet académique. Il représente une étape clé de mon parcours, illustrant ma capacité à transformer des idées en solutions concrètes, performantes et élégantes. Ce projet a non seulement consolidé mes compétences techniques, mais il a également renforcé ma passion pour le développement front-end et la création d’expériences utilisateurs engageantes.

Voir le site

Portfolio