https://github.com/milocartal/tanuclick
Un mini CRM personnel, simple et futé, pour trier, ranger et tisser des liens.
https://github.com/milocartal/tanuclick
crm next-auth nextjs prisma t3-stack typescript
Last synced: about 2 months ago
JSON representation
Un mini CRM personnel, simple et futé, pour trier, ranger et tisser des liens.
- Host: GitHub
- URL: https://github.com/milocartal/tanuclick
- Owner: milocartal
- License: other
- Created: 2025-10-14T17:28:39.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-22T19:03:22.000Z (6 months ago)
- Last Synced: 2025-12-24T08:34:20.306Z (6 months ago)
- Topics: crm, next-auth, nextjs, prisma, t3-stack, typescript
- Language: TypeScript
- Homepage:
- Size: 455 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🚀 TanuClick
CRM professionnel et intuitif pour gérer vos contacts et relations d'affaires
---
## 📋 Table des matières
- [À propos](#-à-propos)
- [Fonctionnalités](#-fonctionnalités)
- [Stack technique](#-stack-technique)
- [Installation](#-installation)
- [Scripts disponibles](#-scripts-disponibles)
- [Structure du projet](#-structure-du-projet)
- [Tests](#-tests)
- [Déploiement](#-déploiement)
- [Documentation](#-documentation)
- [Licence](#-licence)
## 📖 À propos
**TanuClick** est un système de gestion de la relation client (CRM) moderne conçu pour les professionnels et entreprises qui souhaitent gérer efficacement leurs contacts, suivre leurs interactions et organiser leurs relations d'affaires.
Construit avec les technologies web les plus récentes, TanuClick offre une expérience utilisateur fluide, sécurisée et performante, tout en garantissant la protection de vos données.
## ✨ Fonctionnalités
### Gestion des contacts
- **Contacts structurés** : Nom, entreprise, titre, email, téléphone, site web
- **Classification** : Catégorisez vos contacts (Client, Fournisseur, Partenaire, Personnel, Concurrent, Lead)
- **Notes et contexte** : Ajoutez des informations détaillées pour chaque contact
- **Slugs uniques** : URLs propres et SEO-friendly pour chaque contact
### Organisation
- **Tags personnalisés** : Organisez vos contacts avec un système de tags flexible
- **Liens associés** : Attachez des URLs pertinentes à chaque contact (LinkedIn, portfolio, etc.)
- **Recherche et filtres** : Trouvez rapidement vos contacts
### Suivi des activités
- **Timeline d'interactions** : Notes, appels, emails, réunions, tâches
- **Historique complet** : Gardez une trace de toutes vos interactions
- **Horodatage automatique** : Suivez quand chaque activité a eu lieu
### Sécurité
- **Authentification sécurisée** : NextAuth.js avec hash des mots de passe (Argon2)
- **Multi-utilisateurs** : Chaque utilisateur a ses propres données isolées
- **Protection des données** : Validation stricte côté serveur avec Zod
## 🛠 Stack technique
Ce projet est construit avec la [T3 Stack](https://create.t3.gg/), garantissant type-safety et productivité maximale :
- **Framework** : [Next.js 15](https://nextjs.org) avec App Router
- **Frontend** : [React 19](https://react.dev), [Tailwind CSS](https://tailwindcss.com)
- **Backend** : [tRPC](https://trpc.io) pour une API type-safe
- **Base de données** : MySQL avec [Prisma ORM](https://prisma.io)
- **Authentification** : [NextAuth.js](https://next-auth.js.org)
- **Tests** : [Vitest](https://vitest.dev) + [React Testing Library](https://testing-library.com) + [Playwright](https://playwright.dev)
- **UI Components** : [Radix UI](https://www.radix-ui.com/) avec composants personnalisés
- **Validation** : [Zod](https://zod.dev) pour les schémas et validations
- **Formulaires** : [React Hook Form](https://react-hook-form.com/)
- **Gestionnaire de packages** : pnpm
## 📝 Scripts disponibles
```bash
# Développement
pnpm dev # Démarrer en mode développement (avec Turbo)
pnpm build # Construire pour la production
pnpm start # Démarrer en production
# Qualité du code
pnpm lint # Linter le code
pnpm lint:fix # Corriger automatiquement les erreurs de lint
pnpm format:check # Vérifier le formatage
pnpm format:write # Formater le code
pnpm typecheck # Vérifier les types TypeScript
pnpm check # Lint + typecheck
# Base de données
pnpm db:push # Pousser le schéma vers la base de données
pnpm db:generate # Générer et appliquer une migration
pnpm db:studio # Ouvrir Prisma Studio (interface graphique)
# Tests
pnpm test # Lancer les tests unitaires
pnpm test:watch # Mode watch pour les tests
pnpm test:coverage # Tests avec rapport de couverture
pnpm test:ui # Interface graphique Vitest
pnpm test:e2e # Tests E2E avec Playwright
pnpm test:e2e:ui # Interface Playwright
```
## 🗂 Structure du projet
```
tanuclick/
├── prisma/
│ ├── schema.prisma # Schéma de base de données
│ └── seed.js # Données de seed
├── src/
│ ├── app/ # Pages Next.js (App Router)
│ │ ├── _components/ # Composants de l'application
│ │ ├── api/ # Routes API (NextAuth, tRPC)
│ │ ├── dashboard/ # Interface principale
│ │ └── login/ # Authentification
│ ├── lib/
│ │ ├── models/ # Schémas Zod et validations
│ │ └── utils.ts # Utilitaires
│ ├── server/
│ │ ├── api/ # Configuration tRPC et routers
│ │ ├── auth/ # Configuration NextAuth
│ │ └── db.ts # Client Prisma
│ ├── styles/
│ │ └── globals.css # Styles globaux Tailwind
│ └── trpc/ # Configuration client tRPC
├── docs/ # Documentation complète
├── e2e/ # Tests end-to-end Playwright
└── public/ # Fichiers statiques
```
## 🏗️ Architecture
TanuClick est construit selon les principes de la **T3 Stack** avec une architecture modulaire :
- **App Router** : Nouvelle architecture Next.js 15 avec Server Components
- **Type-Safety** : De bout en bout avec TypeScript, tRPC et Zod
- **Server Components** : Optimisation des performances avec React Server Components
- **API Routes** : Routes tRPC pour une API type-safe
- **ORM** : Prisma pour une gestion de base de données type-safe
Voir [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) pour plus de détails.
## 🔐 Authentification
Le système utilise NextAuth.js avec un système de credentials sécurisé :
- Mots de passe hashés avec Argon2
- Sessions sécurisées
- Protection CSRF automatique
## 📊 Base de données
Le schéma Prisma comprend :
- **User** : Utilisateurs de l'application
- **Contact** : Contacts avec informations détaillées
- **Tag** : Tags pour organiser les contacts
- **Link** : Liens associés aux contacts
- **Activity** : Historique des interactions
## 🎨 UI Components
Composants réutilisables basés sur Radix UI :
- Button, Input, Textarea
- Dialog, Popover, Tooltip
- Select, Command (Autocomplete)
- Table, Card, Badge
- Et plus encore...
## 🎯 Statut et Roadmap
### ✅ Version actuelle (v1.0 - Production Ready)
**Interface complète**
- Dashboard avec statistiques en temps réel
- Gestion complète des contacts (CRUD)
- Timeline d'activités et interactions
- Système de tags et organisation
- Paramètres utilisateur
**Sécurité et authentification**
- NextAuth.js avec hash Argon2
- Vérification email
- Protection CSRF
- Sessions sécurisées
- Isolation des données par utilisateur
**Qualité et performance**
- 53 tests unitaires ✅
- Tests E2E Playwright ✅
- Type-safety complète (TypeScript + tRPC + Zod)
- Performance optimisée (Next.js 15, Turbo)
- SEO complet (sitemap, robots.txt, metadata, Open Graph)
**Conformité légale**
- RGPD compliant
- Privacy Policy
- Terms of Service
- Legal Notice
### 🔮 Roadmap v2.0
**Fonctionnalités à venir**
- 📊 **Export/Import** : CSV et Excel
- 📅 **Vue calendrier** : Planification visuelle
- 🌙 **Dark mode** : Thème sombre
- 🎨 **Tags colorés** : Personnalisation visuelle
- 📱 **PWA** : Application installable
- 🔔 **Notifications** : Rappels et alertes
- 📈 **Analytics** : Statistiques avancées
- 🤝 **Collaboration** : Partage d'équipe
- 🌍 **Multilingue** : Support i18n
Voir [TODO.md](TODO.md) pour la liste complète et contribuer.
## 🧪 Tests
Le projet dispose d'une suite de tests complète garantissant la qualité du code :
### Tests unitaires et d'intégration
- ✅ **53 tests unitaires** avec Vitest et React Testing Library
- ✅ Composants UI (Button, Input, Card, Dialog, etc.)
- ✅ Routers tRPC (Contact, Activity, Tag)
- ✅ Validation des données avec Zod
- ✅ Couverture de code avec rapports détaillés
### Tests End-to-End
- ✅ **Tests E2E** avec Playwright
- ✅ Scénarios d'authentification complets
- ✅ Flux de création etet à jour disponible dans le dossier `/docs` :
| Document | Description |
|----------|-------------|
| [Installation](docs/INSTALLATION.md) | Guide d'installation pas à pas |
| [Usage](docs/USAGE.md) | Manuel utilisateur complet |
| [Architecture](docs/ARCHITECTURE.md) | Architecture technique détaillée |
| [Development](docs/DEVELOPMENT.md) | Guide pour les développeurs |
| [API](docs/API.md) | Référence API tRPC complète |
| [Deployment](docs/DEPLOYMENT.md) | Guide de déploiement (Vercel, Docker, etc.) |
| [Testing](docs/TESTING.md) | Guide des tests (unitaires, E2E) |
| [SEO](docs/SEO.md) | Configuration SEO et documents légaux |
| [Favicons](docs/FAVICONS.md) | Guide de génération des icônes |
| [FAQ](docs/FAQ.md) | Questions fréquemment posées |
| [Performance](PERFORMANCE.md) | Optimisations et bonnes pratiques |
## 🤝 Support et Contact
Pour toute question ou support :
- 📧 **Email** : contact@cart-all.com
- 🐛 **Issues** : [GitHub Issues](https://github.com/votre-username/tanuclick/issues)
- 💬 **Discussions** : [GitHub Discussions](https://github.com/votre-username/tanuclick/discussions)
## ⚖️ Licence
**Licence propriétaire - Tous droits réservés**
Copyright © 2025 TanuClick. Tous droits réservés.
Ce logiciel et sa documentation sont la propriété de TanuClick. L'utilisation, la reproduction, la distribution ou la modification de ce logiciel sans autorisation écrite préalable sont strictement interdites.
Pour toute demande de licence commerciale, contactez : contact@tanuclick.com
Voir le fichier [LICENSE](LICENSE) pour plus de détails.
---
Développé avec ❤️ en utilisant la T3 Stack
Next.js •
React •
TypeScript •
tRPC •
Prisma •
Tailwind CSS