TsFullStack

English Document 中文文档 Documentation Française

Ceci est mon projet de meilleures pratiques TypeScript full-stack. Après avoir défini les modèles de données, il permet d'opérer directement sur la base de données depuis le frontend sans écrire de code d'API backend, pour un développement rapide de modèles MVP.

Je suis vraiment fatigué des pages administratives traditionnelles, je ne veux plus jamais les écrire.

Démo en Ligne

Documentation AI du Projet

Adresse de la documentation

Fonctionnalités

• Backend
• Stack technique : TypeScript + Prisma + ZenStack + Effect + Fastify

• ZenStack (solution améliorée basée sur Prisma) pour la modélisation de base de données et la sécurité au niveau des lignes (Row Level Security).

• Pont

• Stack technique : TypeScript + SuperJSON + bibliothèque RPC maison
• Le frontend appelle directement les API backend avec une complétion de types TypeScript complète, sans avoir besoin d'écrire de code de couche intermédiaire.

• SuperJSON prend en charge la sérialisation et désérialisation d'objets complexes comme Date, Map, Set, RegExp..., assurant une transmission transparente des paramètres et résultats Prisma.

• Frontend

• Stack technique : TypeScript + Vue 3 + Tailwind CSS + bibliothèque de composants PrimeVue
• Support i18n internationalisation parfait, assurant que chaque détail supporte le changement dynamique de multilingue sans recharger la page.
• Changement de thème clair/sombre, les composants et Tailwind CSS supportent le changement dynamique synchrone.
• Quelques pages fonctionnelles implémentées
• Panneau d'administration de type Prisma Studio (peut servir comme alternative open-source dans une certaine mesure), plus besoin d'écrire des pages CRUD monotones.
• NoteCalc Un bloc-notes de calcul en temps convivial pour le chinois
• AiEnglish Apprendre l'anglais progressivement en lisant

Autres exemples d'applications

• Extension de navigateur - InfoFlow
• Basée sur https://wxt.dev/guide/installation.html, pour démontrer comment utiliser tsfullstack comme support backend pour les extensions de navigateur.

Démarrage rapide

1. Cloner le projet
2. Installer les dépendances : entrer dans le répertoire backend, exécuter pnpm i pour installer les dépendances (ignorer l'erreur : Failed to resolve entry for package "@tsfullstack/backend", nous générerons ce package dans les étapes suivantes)
3. Initialiser la base de données : dans le répertoire backend, exécuter pnpm zenstack generate et pnpm prisma migrate dev
4. Compiler le package API @tsfullstack/backend : dans le répertoire backend, exécuter pnpm build:lib (il y aura des erreurs de types, je n'ai pas encore trouvé de bonne solution, mais cela n'affecte pas l'utilisation, ne vous en souciez pas)
5. Démarrer le service backend : dans le répertoire backend, exécuter pnpm dev
6. Démarrer le service frontend : dans le répertoire website-frontend, exécuter pnpm dev

Conception de la structure du projet

Philosophie de conception

• Base du projet
• apps/website-frontend est le projet de base frontend
• apps/backend est le projet de base backend
• Code projet frontend/backend modulaire
• modules/*
• Le code frontend à l'intérieur d'un module peut directement référencer les interfaces de code backend internes du module