Agora

Contexte

Ce que j’ai construit

• 01Nom et marque « Agora », logo, palette papier / encre / corail, typographies Inter + Bricolage Grotesque
• 02Mode clair et mode sombre complets, tokens CSS, animations discrètes (respect de prefers-reduced-motion)
• 03Barre latérale (Accueil, Explorer, Notifications, Messages, Groupes, Profil) + bouton « Publier » ; rail contextuel avec événements à venir, suggestions « amis d'amis » (calculées à partir du graphe d'abonnements réel) et groupes
• 04Mobile : en-tête compact, barre d'onglets inférieure avec bouton de publication
• 05Nouvelle page Explorer (recherche de personnes via l'API, communautés)
• 06Composeur avec aperçu d'image, compteur, raccourci Ctrl+Entrée et choix d'audience : Public, Abonnés, Cercle choisi (sélection d'abonnés — fonctionnalité du backend jusque-là inaccessible depuis l'interface)
• 07Cartes : hashtags et mentions mis en valeur, like animé avec mise à jour optimiste et retour arrière en cas d'erreur, compteur de commentaires, fil de commentaires, visionneuse d'images, partage, menu (copier, supprimer)
• 08Profils avec couverture générée, statistiques (publications, abonnés, abonnements, j'aime reçus), onglets
• 09Groupes : couverture, membres, invitations depuis son réseau, création d'événements, RSVP avec barre de participation, accès à la discussion de groupe
• 10Messagerie : conversations récentes, groupes, séparateurs de jours, regroupement des messages consécutifs
• 11Notifications regroupées (aujourd'hui / cette semaine / plus tôt), filtres, icônes par type
• 12Squelettes de chargement, états vides, toasts de confirmation et d'erreur ; interface en français
• 13Ajout de comment_count ; médias, likes et commentaires renvoyés aussi sur les publications d'un profil
• 14Bug corrigé : l'aperçu des conversations renvoyait un message arbitraire (GROUP BY) au lieu du dernier — requête réécrite avec ROW_NUMBER()
• 15Notifications en français

Défis techniques

• 01Hub WebSocket et backend Go en couches ; refonte produit complète (design system, navigation, micro-interactions) sans changer le contrat d'API.

Qualité et tests

• —Parcours de bout en bout automatisé (Playwright) : inscription en 2 étapes avec avatar, publication avec image, like, commentaire, abonnement depuis Explorer, message privé, aperçu = dernier message, création de groupe, événement + participation, chat de groupe, suppression, déconnexion → 13/13, aucune erreur console
• —Build de production Vite OK ; backend compilé ; script de démo vérifié sur base vierge

Stack

Go · gorilla/websocket · SQLite · golang-migrate · React 18 · Vite · React Router · axios · react-icons · Docker · nginx

Galerie

Liens