Générateur de cartes de profil dynamiques pour les passionnés d'anime et de manga
CardMyAnime est une application web moderne qui permet de créer des cartes de profil personnalisées à partir de vos données sur les principales plateformes d'anime et de manga. Créez des cartes élégantes et dynamiques pour partager vos goûts et statistiques de manière visuelle.
- 🎨 7 types de cartes : Small, Medium, Large, Summary, Neon, Minimal et Glassmorphism
- 🌐 3 plateformes supportées : AniList, MyAnimeList et Nautiljon
- 🖼️ Arrière-plans personnalisés avec le dernier anime regardé
- 📊 Statistiques détaillées : animes vus, mangas lus, notes moyennes
- 🚀 Génération rapide avec cache intelligent
- 📱 Interface responsive et moderne
- 🔒 Conformité RGPD avec gestion des demandes de suppression de données
- 📈 Page tendances avec carrousel et classement des cartes populaires
- 🛡️ Panel d'administration complet avec gestion des cron jobs, logs, statistiques et paramètres
- 🌓 Thème light/dark avec animation de transition circulaire (View Transitions API)
- 🐳 Déploiement Docker prêt à l'emploi
Voir tous les exemples visuels dans la galerie des types de cartes
| Type | Taille | Description |
|---|---|---|
| Small | 400×200 | Avatar + pseudo + 3 derniers animes |
| Medium | 600×300 | Avatar + stats + derniers animes/mangas |
| Large | 800×500 | Profil complet avec images |
| Summary | 800×600 | Profil complet avec stats détaillées |
| Neon | 600×350 | Style cyberpunk avec effets néon |
| Minimal | 500×250 | Design épuré et minimaliste |
| Glassmorphism | 700×400 | Effet verre dépoli moderne |
AniList API GraphQL officielle |
MyAnimeList API Jikan non-officielle |
Nautiljon Scraping de profils publics |
# Cloner le projet
git clone https://github.com/PedroKarim64/cardmyanime.git
cd cardmyanime
# Installer les dépendances
bun install
# Configurer l'environnement
cp .env.example .env
# Éditer .env avec vos configurations
# Initialiser la base de données
bunx prisma generate
bunx prisma db push
# Lancer en développement
bun dev# Utiliser le script de déploiement
chmod +x deploy.sh
# Configurer l'environnement
./deploy.sh setup
# Construire et démarrer
./deploy.sh build
./deploy.sh start
# Voir les logs
./deploy.sh logs# Base de données
DATABASE_URL="file:./dev.db" # SQLite
# ou
DATABASE_URL="postgresql://user:password@localhost:5432/cardmyanime" # PostgreSQL
DIRECT_URL="postgresql://user:password@localhost:5432/cardmyanime" # Pour les migrations Prisma
# NextAuth
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"
# Discord OAuth
DISCORD_CLIENT_ID="your-discord-client-id"
DISCORD_CLIENT_SECRET="your-discord-client-secret"
# Utilisateurs admin autorisés (IDs Discord séparés par des virgules)
AUTHORIZED_USERS="123456789012345678"
# reCAPTCHA
NEXT_PUBLIC_RECAPTCHA_SITE_KEY="your-site-key"
RECAPTCHA_SECRET_KEY="your-secret-key"
# Cron Scheduler
CRON_SCHEDULER_ENABLED=false # true en production
CRON_POLL_INTERVAL_MS=30000
CRON_COMMAND_TIMEOUT_MS=120000
# Port
PORT=3000Le projet supporte plusieurs bases de données :
- SQLite : Parfait pour le développement local
- PostgreSQL : Recommandé pour la production
Voir la documentation complète pour plus de détails :
- Architecture - Services, génération de cartes, providers
- API - Référence complète des endpoints
- Base de données - Schéma Prisma, setup SQLite/PostgreSQL
- Déploiement - Docker, variables d'environnement
- Authentification - Configuration Discord OAuth
src/
├── app/ # Pages Next.js App Router
│ ├── api/ # Routes API
│ │ ├── auth/ # Authentification NextAuth
│ │ ├── trpc/ # API tRPC
│ │ ├── admin/ # Endpoints admin
│ │ ├── card/ # Génération de cartes
│ │ ├── health/ # Health check
│ │ ├── og/ # Images Open Graph
│ │ └── recaptcha/ # Validation reCAPTCHA
│ ├── admin/ # Panel d'administration
│ │ ├── cron/ # Gestion des cron jobs
│ │ ├── logs/ # Logs de vues
│ │ ├── stats/ # Statistiques
│ │ ├── settings/ # Paramètres
│ │ ├── trends/ # Gestion des tendances
│ │ ├── data-deletion/ # Demandes de suppression RGPD
│ │ └── profile/ # Profil utilisateur
│ ├── ranking/ # Page classement
│ ├── tendances/ # Page tendances
│ ├── about/ # Page à propos
│ ├── contact/ # Page contact
│ ├── terms/ # Conditions d'utilisation
│ ├── data-deletion/ # Demande de suppression (public)
│ └── auth/ # Pages d'authentification
├── components/ # Composants React
│ ├── ui/ # Composants UI (Radix UI)
│ ├── tendances/ # Composants page tendances
│ ├── CardPreview.tsx # Prévisualisation des cartes
│ ├── Navbar.tsx # Barre de navigation
│ ├── ShareOptions.tsx # Options de partage
│ └── ThemeToggle.tsx # Bascule light/dark
├── lib/ # Logique métier
│ ├── cards/ # Générateurs de cartes (7 types)
│ ├── providers/ # Intégrations plateformes (3)
│ ├── services/ # Services (cache, tracking, cron, settings)
│ ├── trpc/ # Configuration tRPC client/serveur
│ └── utils/ # Utilitaires (canvas, images, watermark, OG)
├── server/ # Configuration serveur
│ └── trpc.ts # Routes tRPC
└── hooks/ # React hooks
Le système utilise Canvas pour le rendu des cartes côté serveur. Chaque type de carte a son propre générateur dédié avec un style distinct.
- Small : Format compact avec avatar et stats essentielles
- Medium : Format équilibré avec plus de détails
- Large : Format étendu avec profil complet
- Summary : Statistiques détaillées style GitHub Stats
- Neon : Esthétique cyberpunk avec effets lumineux
- Minimal : Design épuré, focus sur l'essentiel
- Glassmorphism : Effet verre dépoli avec transparences
- Cache des données utilisateur pour éviter les appels API répétés
- Cache des données média (anime/manga) avec expiration configurable
- Nettoyage automatique des données expirées
- Compteur de vues total et 24h pour chaque carte générée
- Protection anti-spam avec fingerprinting et suivi IP
- Logs détaillés pour l'administration
- Carrousel des cartes les plus populaires
- Bannières hero dynamiques
- Vérification du contenu adulte
- Snapshots des tendances pour l'historique
- Page publique de demande de suppression de données
- Workflow complet côté admin (pending → processing → completed/rejected)
- Suivi avec notes et historique
Le panel admin (/admin) offre une gestion complète :
- Dashboard : Statistiques en temps réel du cache et des vues
- Cron Jobs : Création, édition, exécution manuelle et planification automatique
- Logs : Historique détaillé des vues avec filtrage
- Statistiques : Métriques d'utilisation de l'application
- Paramètres : Expiration du cache, rétention des logs, mode maintenance, notifications
- Tendances : Gestion et snapshots des tendances
- Suppression de données : Traitement des demandes RGPD
# Développement
bun dev # Serveur de développement (Turbopack)
bun build # Build de production (Turbopack)
bun start # Serveur de production
bun run lint # Linting ESLint
bun run test # Tests Vitest
bun run test:watch # Tests en mode watch
# Base de données
bunx prisma generate # Générer le client Prisma
bunx prisma db push # Appliquer le schéma
bunx prisma studio # Interface d'administration BDD
# Maintenance
bun run reset-views24h # Remettre à zéro les vues 24h
bun run cleanup-view-logs # Nettoyer les logs de vues
bun run snapshot-trends # Capturer un snapshot des tendances
bun run populate # Peupler la BDD avec des données de testLes jobs cron sont gérés directement dans l'admin via /admin/cron (création, édition, exécution manuelle, activation/désactivation).
En production, un scheduler interne les exécute automatiquement selon leur champ schedule.
Notes :
- En développement, le scheduler interne est désactivé par défaut (mettre
CRON_SCHEDULER_ENABLED=truepour tester localement). - Si vous déployez plusieurs instances de l'app, préférez un scheduler externe unique (crontab, GitHub Actions, Vercel Cron) pour éviter les exécutions concurrentes.
# Build et démarrage
docker compose up -d
# Logs
docker compose logs -f
# Arrêt
docker compose downLe fichier docker-compose.yml inclut :
- PostgreSQL 17 Alpine avec health checks
- App Next.js avec limites de ressources (512 Mo RAM, 0.5 CPUs)
- Volumes persistants pour les données et les logs
Le script deploy.sh fournit des commandes pratiques :
./deploy.sh setup # Configuration initiale
./deploy.sh build # Build de l'image
./deploy.sh start # Démarrage
./deploy.sh stop # Arrêt
./deploy.sh restart # Redémarrage
./deploy.sh logs # Voir les logs
./deploy.sh clean # Nettoyage| Catégorie | Technologies |
|---|---|
| Frontend | Next.js 15 (App Router), React 19, TypeScript 5, Tailwind CSS 4 |
| UI | Radix UI, Framer Motion, Lucide Icons |
| State | tRPC + React Query, Nuqs (URL state) |
| Backend | Next.js API Routes, tRPC |
| BDD | Prisma 7.1, PostgreSQL 17 / SQLite |
| Auth | NextAuth 5 (Discord OAuth) |
| Sécurité | reCAPTCHA v2, fingerprinting |
| Tests | Vitest |
| DevOps | Docker, Bun, Turbopack, ESLint |
Les contributions sont les bienvenues ! Voici comment contribuer :
- Fork le projet
- Créer une branche feature (
git checkout -b feature/AmazingFeature) - Commit vos changements (
git commit -m 'Add some AmazingFeature') - Push vers la branche (
git push origin feature/AmazingFeature) - Ouvrir une Pull Request
Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.
PedroKarim64 - @PedroKarim64
- AniList pour leur API GraphQL
- MyAnimeList pour leur plateforme
- Nautiljon pour leur communauté
- Jikan API pour l'accès à MyAnimeList
- Next.js pour le framework
- Prisma pour l'ORM
- Bun pour le runtime JavaScript
- 📧 Email : contact@ascencia.re
- 🐛 Issues : GitHub Issues
- 💬 Discord : Serveur Discord
Fait avec ❤️ par PedroKarim64
© 2024-2026 Ascencia - Tous droits réservés