diff --git a/.vscode/copilot/project.md b/.vscode/copilot/project.md index 64a0b22..4156aed 100644 --- a/.vscode/copilot/project.md +++ b/.vscode/copilot/project.md @@ -1,4 +1,4 @@ -The project uses TailwindCSS v4 and DaisyUI for it's styling. +The project uses TailwindCSS v4 and daisyUI for it's styling. TSX classes are all in this format: diff --git a/CITATION.cff b/CITATION.cff index 44198b9..598eddb 100644 --- a/CITATION.cff +++ b/CITATION.cff @@ -26,5 +26,5 @@ keywords: - Vite - GitHub - GitHub Actions - - DaisyUI + - daisyUI license: GPL-3.0-or-later diff --git a/README.md b/README.md index c8f4561..5241dce 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Malley is a X-like social media platform. ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) -![DaisyUI](https://img.shields.io/badge/daisyui-5A0EF8?style=for-the-badge&logo=daisyui&logoColor=white) +![daisyUI](https://img.shields.io/badge/daisyui-5A0EF8?style=for-the-badge&logo=daisyui&logoColor=white) ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) diff --git a/presentation/assets/ci.png b/presentation/assets/ci.png new file mode 100644 index 0000000..37b1082 Binary files /dev/null and b/presentation/assets/ci.png differ diff --git a/presentation/assets/mobile_share.png b/presentation/assets/mobile_share.png new file mode 100644 index 0000000..3dddcce Binary files /dev/null and b/presentation/assets/mobile_share.png differ diff --git a/presentation/assets/profiles/AFCMS.png b/presentation/assets/profiles/AFCMS.png new file mode 100644 index 0000000..7985790 Binary files /dev/null and b/presentation/assets/profiles/AFCMS.png differ diff --git a/presentation/assets/profiles/emimi.png b/presentation/assets/profiles/emimi.png new file mode 100644 index 0000000..0c92db1 Binary files /dev/null and b/presentation/assets/profiles/emimi.png differ diff --git a/presentation/assets/profiles/raphael.jpg b/presentation/assets/profiles/raphael.jpg new file mode 100644 index 0000000..9638ef7 Binary files /dev/null and b/presentation/assets/profiles/raphael.jpg differ diff --git a/presentation/assets/pwa.svg b/presentation/assets/pwa.svg new file mode 100644 index 0000000..6bdbe4d --- /dev/null +++ b/presentation/assets/pwa.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/presentation/assets/react.svg b/presentation/assets/react.svg new file mode 100644 index 0000000..9af92b9 --- /dev/null +++ b/presentation/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/presentation/assets/simpleicons/github.svg b/presentation/assets/simpleicons/github.svg new file mode 100644 index 0000000..538ec5b --- /dev/null +++ b/presentation/assets/simpleicons/github.svg @@ -0,0 +1 @@ +GitHub \ No newline at end of file diff --git a/presentation/assets/supabase-schema.png b/presentation/assets/supabase-schema.png new file mode 100644 index 0000000..75ffcba Binary files /dev/null and b/presentation/assets/supabase-schema.png differ diff --git a/presentation/assets/supabase.svg b/presentation/assets/supabase.svg new file mode 100644 index 0000000..86fba46 --- /dev/null +++ b/presentation/assets/supabase.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + diff --git a/presentation/assets/tailwind.svg b/presentation/assets/tailwind.svg new file mode 100644 index 0000000..83a13ff --- /dev/null +++ b/presentation/assets/tailwind.svg @@ -0,0 +1 @@ + diff --git a/presentation/assets/typescript.svg b/presentation/assets/typescript.svg new file mode 100644 index 0000000..a46d53d --- /dev/null +++ b/presentation/assets/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/presentation/assets/vercel-icon-light.svg b/presentation/assets/vercel-icon-light.svg new file mode 100644 index 0000000..72948d0 --- /dev/null +++ b/presentation/assets/vercel-icon-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/presentation/assets/vercel.png b/presentation/assets/vercel.png new file mode 100644 index 0000000..6e3a56f Binary files /dev/null and b/presentation/assets/vercel.png differ diff --git a/presentation/assets/vite.svg b/presentation/assets/vite.svg new file mode 100644 index 0000000..45ac612 --- /dev/null +++ b/presentation/assets/vite.svg @@ -0,0 +1 @@ + diff --git a/presentation/documentation_technique.md b/presentation/documentation_technique.md index d95508c..759a2cb 100644 --- a/presentation/documentation_technique.md +++ b/presentation/documentation_technique.md @@ -23,7 +23,7 @@ Frontend (Vercel + React) ↔ Backend (Supabase Cloud) | **React 19** | Interface utilisateur | | **React Router** | Routage | | **TailwindCSS** | Styles CSS | -| **DaisyUI** | Composants UI | +| **daisyUI** | Composants UI | | **PWA** | Application web installable sur mobile | | **Supabase Client** | Communication avec le Backend | | **Vercel Analytics** | Statistiques utilisateurs | @@ -97,13 +97,13 @@ Voir [README](../README.md) pour les instructions d'installation et de configura - **Écosystème mature** : Large communauté, documentation extensive, et nombreuses librairies disponibles - **Productivité** : Développement rapide grâce aux composants réutilisables et aux hooks -### Choix de TailwindCSS + DaisyUI +### Choix de TailwindCSS + daisyUI **Avantages :** - **Design System** : Le design system de TailwindCSS est très cohérent et permet de ne toucher que rarement au CSS custom. - **Maintenance** : Réduction du CSS custom, moins de code à maintenir. -- **DaisyUI** : Composants préconçus basés sur TailwindCSS accélérant le développement UI pour aller plus vite dans la création de l'interface utilisateur par rapport à l'utilisation directe des classes utilitaires du framework de base. +- **daisyUI** : Composants préconçus basés sur TailwindCSS accélérant le développement UI pour aller plus vite dans la création de l'interface utilisateur par rapport à l'utilisation directe des classes utilitaires du framework de base. ### Choix de Vercel pour l'hébergement Frontend diff --git a/presentation/presentation_fr-FR.md b/presentation/presentation_fr-FR.md index aa61d73..4bc5127 100644 --- a/presentation/presentation_fr-FR.md +++ b/presentation/presentation_fr-FR.md @@ -1,6 +1,7 @@ --- marp: true -author: AFCMS +title: Malley +author: Équipe Malley lang: fr-FR theme: default backgroundImage: url('https://marp.app/assets/hero-background.svg') @@ -12,3 +13,536 @@ paginate: true Une plateforme de réseau social sur le modèle d'X ![w:200 bg right](../public/favicon.svg) + +--- + +## L'équipe + + + +
+
+ Posts +
Louis WALTER
+
Infra & Frontend
+
+ + + @AFCMS + +
+ +
+
+ Interactions +
Émilien DESSARPS
+
Backend & Optimisation
+
+ + + @AKArien0 + +
+ +
+
+ Profils +
Raphaël MALET
+
Frontend & Business
+
+ + + @Roceann + +
+
+
+ +--- + + + +## Présentation du produit + +
+
+
📱
+
Feed personnalisé
+
+
+
⭐
+
Mise en avant
+
+
+
👆
+
Système de swipe +
+
+
+
🤝
+
Co-auteurs
+
+
+ +
+Connexions par centres d'intérêt +
+ +--- + + + +## Valeur commerciale + +
+
+
+
🎯
+
Différenciation
+
+ +
+ +
+
+
🚀
+
Innovation
+
+ +
+ +
+

🔗 Écosystème d'interactions uniques

+
+
+ +--- + +## Architecture + + + +
+
+ Supabase +
Supabase Cloud
+
Backend-as-a-Service
+
+ +
↔
+ +
+ Vercel +
Vercel
+
Frontend SPA
+
+
+ +
+ Moderne, Scalable & développement facile +
+ +--- + +## Technologies + + + +
+
+ React +
React 19
+
Interface utilisateur moderne
+
+ +
+ TypeScript +
TypeScript
+
Typage statique & robustesse
+
+ +
+ TailwindCSS +
TailwindCSS
+
Avec daisyUI pour un CSS moderne et cohérent
+
+ +
+ PWA +
PWA
+
Expérience proche d'une application native, pour une fraction de la complexité
+
+
+ +
+Stack moderne pour une expérience utilisateur optimale +
+ +--- + +## Supabase Cloud + +- Authentification et gestion des utilisateurs (OAuth2, mail, etc) +- Base de données PostgreSQL hébergée + - Système de migrations intégré + - API RESTful et GraphQL + - Accès direct depuis le frontend, sécurisé par des politiques Row Level Security (RLS) +- Stockage de fichiers médias via buckets S3-compatibles +- Edge Functions Typescript pour la logique métier + +--- + +## Vercel + +- Hébergement des fichiers front statiques +- Déploiement simple +- Analytics et monitoring intégrés + +![w:600 bg right](./assets/vercel.png) + +--- + +## CI/CD + +Depuis le début, un système de CI/CD **GitHub Actions** a été mis en place pour automatiser les tests et le déploiement de l'application. + +![w:600 bg right](./assets/ci.png) + +--- + +## PWA + +La plateforme est une **PWA** (Progressive Web App), permettant une expérience utilisateur fluide et rapide, similaire à une application native. + +Les fonctionalités comme le partage natif sont supportées. + +![w:300 bg right](./assets/mobile_share.png) + +--- + +## Base de données + +--- + +## Base de données + +![w:500 bg right](./assets/supabase-schema.png) + +- 3 entités : posts, profils et catégories +- Catégorisation +- Relations entre posts et profils + +--- + +## Base de données + +![w:500 bg right](./assets/supabase-schema.png) + +### Représentation des concepts + +- Co-auteurs : requiert le stockage des auteurs dans une table +- Stockage des invitations dans une autre table +- Catégories : une table de stockage des catégories, deux tables de relations +- Les autres concepts sont représentés par une table + +--- + +## Automatismes et programmations + +- Programation Cron utilisée pour rafraîchir la vue matérialisée (estimations d’usage de catégories) +- Fonctions de DB et edge functions +- Divers triggers sont utilisées pour assurer un respect de contraintes complexes + +--- + +## Sécurité : RLS + +- Sécurité et intégrité des données assurée par des Row Level Security Policies +- RLS : Clauses « where » ajoutées à la requête par le serveur +- Zero trust : par défaut, tout est interdit +- Les politiques autorisent lecture / édition des données selon des conditions précises + +--- + +## Tests + +- Tests disponibles pour assurer le bon fonctionnement de la base de données après modifications +- Cibles séléctionnées par variables d’environnement +- Tests assurant un fonctionnement minimal est respecté +- Tests assurant le bon fonctionnement des politiques RLS + +--- + +## Pistes d'amélioration + +- Support de la traduction de la plateforme ([Lingui](https://lingui.dev) or [i18next](https://i18next.com)) +- Algos de recommendation/recherche avancés (IA et [Supabase Vector](https://supabase.com/modules/vector)) +- Plus d'intégration native pour la PWA diff --git a/src/Components/PostViewer/PostViewer.tsx b/src/Components/PostViewer/PostViewer.tsx index bbf13e1..d063efe 100644 --- a/src/Components/PostViewer/PostViewer.tsx +++ b/src/Components/PostViewer/PostViewer.tsx @@ -1167,7 +1167,7 @@ export default function PostViewer(props: PostViewerProps) { - {/* DaisyUI retweet choice dialog */} + {/* daisyUI retweet choice dialog */}

Retweet this post