OTE ArcaPrompt

Description

OTE ArcaPrompt est une application de gestions de prompts. Elle permet de mettre en avant des prompts disponible sur une base de donnée globale tout en laissant la possibilité à l'utilisateur d'ajouter ses prompts. Les prompts utilisateur sont stockés localement via le localstorage du navigateur avec une possibilité de sauvegarde et d'importantation. Il est possible de rechercher parmis les prompts et de filtrer les prompts par tag. Une Sélection de thème est disponible et est disponible en plusieurs langues (anglais, allemand, espagnol et français).

Tech Stack

• Framework Frontend : React
• Outil de Build : Vite
• Styling : Tailwind CSS, DaisyUI
• Internationalisation : i18next, react-i18next
• Linting & Formatage : ESLint, Prettier

Fonctionnalités Clés

L'application est structurée autour de plusieurs fonctionnalités clés, gérées par des composants dédiés et des contextes pour une meilleure modularité :

• Authentification et Gestion de Profil : Gère l'accès utilisateur et les informations de profil.
  • Auth.jsx, Login.jsx, SignUp.jsx, ForgotPassword.jsx, Profile.jsx, ProfileModal.jsx
• Gestion des Prompts : Permet la création, la modification, la soumission et la gestion des prompts.
  • NewPrompt.jsx, NewPromptModal.jsx, SubmitPromptModal.jsx, PromptManagement.jsx (dans admin/)
• Gestion des Dossiers : Organise les prompts en dossiers pour une meilleure navigation.
  • Folder.jsx, FolderModal.jsx, FolderSelect.jsx, FolderManagement.jsx (dans admin/)
• Paramètres et Personnalisation : Offre des options de configuration pour l'utilisateur (thème, langue, etc.).
  • SettingsModal.jsx, ThemeToggle.jsx, CompactToggle.jsx, LanguageSelect.jsx, HotkeyUpdateModal.jsx
• Interface Utilisateur : Composants de base pour la navigation et l'affichage du contenu principal.
  • Sidebar.jsx, MainContent.jsx, Logo.jsx, Toast.jsx
• Fonctionnalités Administratives : Outils pour les administrateurs de l'application.
  • AdminModal.jsx, AdminPage.jsx
• Autres Utilitaires : Composants de support et de gestion d'erreurs.
  • ErrorBoundary.jsx, Tag.jsx, RemoveTag.jsx, Template.jsx

Gestion des Prompts

L'application OTE ArcaPrompt offre une gestion flexible des prompts, permettant aux utilisateurs de choisir entre un stockage local et une base de données centralisée via Supabase.

• Prompts Locaux :

  • Stockage : Les prompts créés par l'utilisateur sont sauvegardés directement dans le localStorage de leur navigateur.
  • Avantages : Accès rapide et hors ligne, idéal pour les prompts personnels ou sensibles qui n'ont pas besoin d'être partagés.
  • Gestion : Possibilité d'exporter et d'importer ces prompts pour les sauvegarder ou les transférer entre appareils.

• Prompts Supabase (Globaux) :

  • Stockage : Les prompts disponibles globalement sont stockés dans une base de données Supabase.
  • Avantages : Partage et synchronisation des prompts entre différents utilisateurs et appareils, permettant une collaboration et un accès à une bibliothèque de prompts plus large.
  • Accès : Ces prompts sont accessibles à tous les utilisateurs connectés et peuvent être recherchés et filtrés.

Cette dualité permet à l'utilisateur de gérer ses prompts de manière privée et sécurisée, tout en bénéficiant d'une collection de prompts partagés et maintenus centralement.

Architecture et Composants Clés

L'application est construite avec React et utilise une architecture basée sur les hooks et les contextes pour une gestion d'état centralisée et modulaire. Les principaux répertoires et fichiers sont :

• src/ : Contient le code source de l'application.
  • App.jsx : Le composant racine de l'application, responsable du rendu des composants principaux et de la gestion des modales globales.
  • index.jsx : Le point d'entrée de l'application React, où les fournisseurs de contexte (I18nextProvider, ThemeProvider, AuthProvider, AppProvider) sont configurés.
  • supabase.js : Initialise le client Supabase pour l'interaction avec la base de données.
  • services/supabaseService.js : Encapsule toutes les interactions avec l'API Supabase (récupération, insertion, mise à jour, suppression de prompts et dossiers, gestion des utilisateurs et rôles).
  • context/ : Contient les fournisseurs de contexte pour la gestion d'état globale.
    • StateContext.jsx : Gère l'état principal de l'application, y compris les prompts (locaux et Supabase), les dossiers, les filtres de recherche, et les messages toast. Il expose des fonctions pour manipuler ces données.
    • AuthContext.jsx : Gère l'état d'authentification de l'utilisateur (utilisateur connecté, statut de chargement, rôle de l'utilisateur) et expose ces informations aux composants enfants.
  • hooks/useLocalStorage.js : Un hook personnalisé pour simplifier l'interaction avec le localStorage du navigateur, utilisé pour persister les données locales (prompts, dossiers, préférences).
  • components/ : Contient les composants réutilisables de l'interface utilisateur.
    • Auth.jsx : Gère l'affichage des formulaires de connexion, d'inscription et de réinitialisation de mot de passe.
    • Sidebar.jsx : Le composant de la barre latérale de navigation, affichant les dossiers et les options principales.
    • MainContent.jsx : Le composant principal qui affiche la liste des prompts filtrés et gère la recherche.
    • SettingsModal.jsx : La modale des paramètres, permettant de gérer les préférences, d'importer/exporter des prompts locaux et de gérer les dossiers locaux.
    • NewPromptModal.jsx : La modale pour créer ou modifier un prompt local.
    • ProfileModal.jsx : La modale affichant les informations de profil de l'utilisateur.
    • AdminModal.jsx et admin/AdminPage.jsx : Composants pour le panneau d'administration, permettant de gérer les prompts et les dossiers du serveur.
    • Toast.jsx : Composant pour afficher des notifications temporaires à l'utilisateur.
    • Template.jsx : Composant pour l'affichage individuel d'un prompt.
    • Folder.jsx : Composant pour l'affichage individuel d'un dossier dans la barre latérale.
    • ThemeContext.jsx : Gère le thème de l'application.
    • CompactToggle.jsx et ThemeToggle.jsx : Composants pour basculer entre les modes compact et les thèmes.
    • LanguageSelect.jsx : Composant pour changer la langue de l'interface.
    • ErrorBoundary.jsx : Composant de gestion des erreurs pour attraper les erreurs dans l'arbre des composants React.
    • js/utils.js et js/export.js : Fichiers utilitaires pour diverses fonctions (copie, recherche de variables, importation/exportation CSV, etc.).
  • i18n/ : Contient la configuration de l'internationalisation et les fichiers de traduction.
  • images/ : Contient les ressources graphiques de l'application.

Structure du Projet

• src/ : Contient les composants React, la logique de l'application, les styles et les traductions..
• public/ : Contient les ressources statiques.
• scripts/ : Contient les scripts de build et autres.

Installation

Dépendances

Lors de l'installation, 45 paquets ont été ajoutés. Un audit de 428 paquets a été effectué en 924ms.

Audit de Sécurité

npm audit fix a retourné le message suivant :

added 45 packages, and audited 428 packages in 924ms

137 packages are looking for funding
  run `npm fund` for details

Scripts Disponibles

Dans le package.json, les scripts suivants sont disponibles :

• npm run dev : Démarre le serveur de développement Vite.
• npm run build : Compile l'application pour la production.
• npm run css : Génère et minifie le CSS avec Tailwind.
• npm run lint : Formate le code avec Prettier.
• npm run preview : Prévisualise le build de production.

License

Shield:

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.