Quote Display App / ENG

A small React (Vite) project to display quotes and longer texts with an interactive skull animation that follows the mouse, sound interactions, and handy controls. Now with Supabase integration for dynamic quote management and admin functionality.

---

Setup & Configuration

1. Install Dependencies

npm install

2. Supabase Configuration

Create a .env file in the project root:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

3. Database Setup

Execute the following SQL commands in Supabase SQL Editor:

Create the quotes table

DROP TABLE IF EXISTS quotes;

CREATE TABLE quotes (
    id SERIAL PRIMARY KEY,
    created_at TIMESTAMPTZ DEFAULT NOW(),
    content TEXT NOT NULL,
    author TEXT
);

Insert default quotes

INSERT INTO quotes (content, author) VALUES
('Le courage n''est pas l''absence de peur, mais la capacité de vaincre ce qui fait peur.', 'Nelson Mandela'),
('La vie est ce qui arrive pendant que vous êtes occupé à faire d''autres projets.', 'John Lennon');

Create function to add quotes

⚠️ Important: Replace 'YOUR_ADMIN_PASSWORD' with your own secure password.

CREATE OR REPLACE FUNCTION add_new_quote(
    p_password TEXT, 
    p_quote TEXT, 
    p_author TEXT
)
RETURNS VOID AS $$
BEGIN
    IF p_password = 'YOUR_ADMIN_PASSWORD' THEN
        INSERT INTO quotes (content, author)
        VALUES (p_quote, p_author);
    ELSE
        RAISE EXCEPTION 'wrong password';
    END IF;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

Create function to delete quotes

CREATE OR REPLACE FUNCTION delete_quote(
    p_password TEXT, 
    p_quote_id INT
)
RETURNS VOID AS $$
BEGIN
    IF p_password = 'YOUR_ADMIN_PASSWORD' THEN
        DELETE FROM quotes WHERE id = p_quote_id;
    ELSE
        RAISE EXCEPTION 'wrong password';
    END IF;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

Enable Row Level Security (Optional but recommended)

ALTER TABLE quotes ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Anyone can read quotes"
ON quotes FOR SELECT
USING (true);

CREATE POLICY "Only function can insert"
ON quotes FOR INSERT
WITH CHECK (false);

CREATE POLICY "Only function can delete"
ON quotes FOR DELETE
USING (false);

Test your setup

SELECT * FROM quotes;
SELECT add_new_quote('YOUR_ADMIN_PASSWORD', 'Test citation', 'Test auteur');
SELECT delete_quote('YOUR_ADMIN_PASSWORD', 3);
SELECT * FROM quotes;

See SUPABASE_SETUP.md for detailed SQL setup instructions.

---

Admin Access

Click on the π symbol in the footer to access the admin panel. Configure your admin password in the SQL functions above.

---

Screens

• Normal view
  

• Long text view
  

---

Features

• Supabase Integration - Dynamic quote loading from database
• Admin Panel - Add and delete quotes with password protection
• Interactive skull animation following the mouse
• Dynamic rotation based on cursor position
• Smooth animations with customizable parameters
• Quote and long text display
• Click sound interaction
• Mute button
• Copy quote to clipboard
• Expandable view for long texts

---

Installation

npm install

Development

npm run dev

Build

npm run build

---

Technologies

• React
• Vite
• Supabase (Database & Authentication)
• CSS3 Animations
• Web Audio API (for sound effects)
• FontAwesome Icons

---

TODO

• Add loading animation
• Add unit tests for Quote component
• Improve accessibility (keyboard navigation, ARIA labels)

---

License & Credits

(wirte song) freesound_community write song (Sound Effect by freesound_community from Pixabay)

(magic song) Sound Effect by Crunchpix Studio from Pixabay

(skull svg) Image by OpenClipart-Vectors from Pixabay

---

LICENSE — MIT

MIT License

Copyright (c) 2025 gleyze jonathan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

Application d'Affichage de Citations / FR

Un projet React (Vite) permettant d'afficher des citations et de longs textes avec une animation interactive de crâne suivant le curseur, des effets sonores et des contrôles pratiques. Maintenant avec intégration Supabase pour la gestion dynamique des citations et un panneau d'administration.

---

Installation & Configuration

1. Installer les dépendances

npm install

2. Configuration Supabase

Créez un fichier .env à la racine du projet :

VITE_SUPABASE_URL=votre_url_supabase
VITE_SUPABASE_ANON_KEY=votre_cle_anon_supabase

3. Configuration de la base de données

Exécutez les commandes SQL suivantes dans l'éditeur SQL de Supabase :

Créer la table quotes

DROP TABLE IF EXISTS quotes;

CREATE TABLE quotes (
    id SERIAL PRIMARY KEY,
    created_at TIMESTAMPTZ DEFAULT NOW(),
    content TEXT NOT NULL,
    author TEXT
);

Insérer les citations par défaut

INSERT INTO quotes (content, author) VALUES
('Le courage n''est pas l''absence de peur, mais la capacité de vaincre ce qui fait peur.', 'Nelson Mandela'),
('La vie est ce qui arrive pendant que vous êtes occupé à faire d''autres projets.', 'John Lennon');

Créer la fonction pour ajouter une citation

⚠️ Important: Remplacez 'YOUR_ADMIN_PASSWORD' par votre propre mot de passe sécurisé.

CREATE OR REPLACE FUNCTION add_new_quote(
    p_password TEXT, 
    p_quote TEXT, 
    p_author TEXT
)
RETURNS VOID AS $$
BEGIN
    IF p_password = 'VOTRE_MOT_DE_PASSE_ADMIN' THEN
        INSERT INTO quotes (content, author)
        VALUES (p_quote, p_author);
    ELSE
        RAISE EXCEPTION 'wrong password';
    END IF;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

Créer la fonction pour supprimer une citation

CREATE OR REPLACE FUNCTION delete_quote(
    p_password TEXT, 
    p_quote_id INT
)
RETURNS VOID AS $$
BEGIN
    IF p_password = 'VOTRE_MOT_DE_PASSE_ADMIN' THEN
        DELETE FROM quotes WHERE id = p_quote_id;
    ELSE
        RAISE EXCEPTION 'wrong password';
    END IF;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

Activer Row Level Security (Optionnel mais recommandé)

ALTER TABLE quotes ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Anyone can read quotes"
ON quotes FOR SELECT
USING (true);

CREATE POLICY "Only function can insert"
ON quotes FOR INSERT
WITH CHECK (false);

CREATE POLICY "Only function can delete"
ON quotes FOR DELETE
USING (false);

Tester votre configuration

SELECT * FROM quotes;
SELECT add_new_quote('VOTRE_MOT_DE_PASSE_ADMIN', 'Test citation', 'Test auteur');
SELECT delete_quote('VOTRE_MOT_DE_PASSE_ADMIN', 3);
SELECT * FROM quotes;

Voir SUPABASE_SETUP.md pour les instructions SQL détaillées.

---

Accès Admin

Cliquez sur le symbole π dans le pied de page pour accéder au panneau d'administration. Configurez votre mot de passe admin dans les fonctions SQL ci-dessus.

---

Captures d’écran

• Vue normale
  

• Vue texte long
  

---

Fonctionnalités

• Intégration Supabase - Chargement dynamique des citations depuis la base de données
• Panneau Admin - Ajouter et supprimer des citations avec protection par mot de passe
• Animation de crâne interactive suivant la souris
• Rotation dynamique selon la position du curseur
• Animations fluides et personnalisables
• Affichage des citations et textes longs
• Son de clic interactif
• Bouton muet
• Copier la citation dans le presse-papier
• Vue extensible pour les longs textes

---

Installation

npm install

Développement

npm run dev

Compilation

npm run build

---

Technologies

• React
• Vite
• Supabase (Base de données & Authentification)
• Animations CSS3
• Web Audio API (pour les effets sonores)
• FontAwesome Icons

---

À faire

• Améliorer l'accessibilité (navigation clavier, labels ARIA)
• Ajouter des tests unitaires

---

Licence et Crédits

(wirte song) freesound_community write song (Sound Effect by freesound_community from Pixabay)

(magic song) Sound Effect by Crunchpix Studio from Pixabay

(skull svg) Image by OpenClipart-Vectors from Pixabay

---

LICENCE — MIT

Licence MIT

Copyright (c) 2025 gleyze jonathan

Permission est accordée, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris sans limitation les droits d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et/ou vendre des copies du Logiciel, et de permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :

L'avis de copyright ci-dessus et cet avis d'autorisation seront inclus dans toutes les copies ou parties substantielles du Logiciel.

LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE, Y COMPRIS MAIS SANS S'Y LIMITER AUX GARANTIES DE QUALITÉ MARCHANDE, D'ADÉQUATION À UN USAGE PARTICULIER ET D'ABSENCE DE CONTREFAÇON. EN AUCUN CAS LES AUTEURS OU DÉTENTEURS DU COPYRIGHT NE POURRONT ÊTRE TENUS RESPONSABLES DE TOUT DOMMAGE, RÉCLAMATION OU AUTRE RESPONSABILITÉ, QU’ELLE SOIT CONTRACTUELLE, DÉLICTUELLE OU AUTRE, DÉCOULANT DE L’UTILISATION OU DE L’IMPOSSIBILITÉ D’UTILISER LE LOGICIEL.

---

README version française (mise à jour octobre 2025)