AI talkingdocs

Projet ReadMe: ReactJs avec Vite Framework, MongoDB, JWT, Node.js, et plus encore

Table des matières

1. Introduction
2. Technologies utilisées
3. Configuration et configuration
4. Structure du projet
5. Authentification et autorisation
6. Stockage de données
7. Téléchargement de fichiers
8. Frontend et ui
9. Points de terminaison API

Introduction

Mon projet est une application PDFCHAT construite à l'aide de ReactJS Vite Framework, MongoDB pour le stockage de données, JWT pour l'authentification et l'autorisation des utilisateurs, et Node.js avec express.js pour le backend. Il utilise également diverses bibliothèques et outils pour un développement efficace, notamment DoTenV pour la gestion des variables d'environnement, Langchain et son magasin vectoriel pour le traitement du langage, Multer pour les téléchargements de fichiers et Axios pour faire des demandes au backend. Le projet est conçu avec le framework CSS et Shadcn à vent arrière pour une interface utilisateur élégante.

Sur le back-end, j'ai utilisé Node.js avec express.js pour gérer les demandes et MongoDB pour stocker les informations de l'utilisateur et gérer les connexions des utilisateurs. Pour garder les choses en sécurité, j'ai utilisé des jetons Web JSON pour l'authentification des utilisateurs, en m'assurant que seuls les utilisateurs autorisés pourraient accéder à certaines parties du projet.

Pour gérer les fichiers PDF, j'ai utilisé un outil appelé Multer pour stocker les fichiers et leurs emplacements dans la base de données. Ensuite, j'ai traité les PDF téléchargés, les réalisant en pièces plus petites et les stockant dans un magasin vectoriel HNSW fourni par Langchain. Ce voyage a élargi mes compétences et m'a donné une meilleure compréhension des possibilités offertes par les technologies avancées comme Langchain et Rag.

Technologies utilisées

• ReactJS : une bibliothèque JavaScript populaire pour la construction d'interfaces utilisateur.
• Vite Framework : un outil de construction rapide et un serveur de développement pour le développement Web moderne.
• MongoDB : une base de données NoSQL pour stocker les informations des utilisateurs.
• JWT (jetons JSON IB) : utilisé pour l'authentification et l'autorisation sécurisées.
• Node.js : un runtime javascript pour la construction du backend.
• Express.js : un cadre d'application Node.js minimal et flexible pour la gestion des itinéraires.
• Dotenv : pour gérer les variables environnementales, y compris les clés API OpenAI, les informations d'identification MongoDB ATLAS et les secrets JWT.
• Langchain : pour le traitement du langage et l'analyse de texte.
• Multer : un middleware pour la gestion des téléchargements de fichiers.
• Axios : un client HTTP basé sur des promesses pour faire des demandes au backend.
• Tailwind CSS : Un cadre CSS-First utilitaire pour styliser le frontend.
• Framework Shadcn : pour améliorer l'interface utilisateur avec des ombres et des effets.

Configuration et configuration

Avant d'exécuter le projet, vous devez configurer l'environnement et les variables de configuration:

1. Clone le référentiel : Commencez par cloner ce référentiel vers la machine locale.

2. Configuration du frontend :

   • Accédez au répertoire Frontend et exécutez npm install pour installer les dépendances Frontend.
   • Utilisez npm run dev pour démarrer le frontend.

3. Configuration du backend :

   • Accédez au répertoire backend et exécutez npm install pour installer les dépendances backend.
   • Créez un fichier .env dans le répertoire backend et définissez les variables suivantes:
     • PORT : le numéro de port sur le serveur s'exécutera. (Par défaut 8080)
     • username : MongoDB Atlas Connection Nom d'utilisateur.
     • password : Mot de passe de connexion MongoDB Atlas.
     • JWT_SECRET : Secret pour la génération de jetons JWT.
     • OPENAI_API_KEY : touche API Openai.

4. Configuration de la base de données :

   • Configurez la base de données MongoDB à l'aide de la fourniture de vos propres informations d'identification dans DOTENV.

5. Démarrez le backend :

   • Exécutez npm start pour démarrer le serveur backend.

6. Accéder à l'application :

   • Visitez http://localhost:5173 dans le navigateur pour accéder à l'application.
   • Ouvrez par défaut http://localhost:8080 ou http://localhost:PORT de votre terminal pour accéder à l'application de partie backend.

Structure du projet

La structure du projet est organisée en deux répertoires principaux:

• frontend : contient tout le code ReactJS pour le frontend avec TypeScript.
• backend : contient le serveur Node.js utilisant Express.js pour la logique backend.

Authentification et autorisation

J'ai utilisé JWT (jetons Web JSON) pour l'authentification et l'autorisation des utilisateurs. Lorsque les utilisateurs s'inscrivent ou se connectent, ils reçoivent un jeton qui doit être envoyé avec des demandes ultérieures pour accéder aux itinéraires autorisés.

Stockage de données

Les informations de l'utilisateur sont stockées dans MongoDB, une base de données NOSQL flexible. Les données de l'utilisateur sont stockées et récupérées en toute sécurité selon les besoins pour les interactions utilisateur.

Téléchargement de fichiers

J'ai utilisé Multer, un middleware pour gérer les téléchargements de fichiers, permettant aux utilisateurs de télécharger des fichiers comme des images ou des documents. Cette fonctionnalité améliore l'expérience utilisateur en prenant en charge le contenu multimédia.

Frontend et ui

Le frontend est conçu avec une interface conviviale avec Tailwind CSS et le framework Shadcn. Il offre une expérience réactive et visuellement attrayante pour les utilisateurs.

Points de terminaison API

Le backend fournit divers points de terminaison API pour gérer les données des utilisateurs, l'authentification et les téléchargements de fichiers. Ces points de terminaison sont documentés dans le code et vous pouvez trouver plus de détails dans la base de code du backend.