AI talkingdocs

Project Readme: Reactjs mit vite Framework, MongoDB, JWT, Node.js und mehr

Inhaltsverzeichnis

1. Einführung
2. Technologien verwendet
3. Einrichtung und Konfiguration
4. Projektstruktur
5. Authentifizierung und Autorisierung
6. Datenspeicherung
7. Datei -Upload
8. Frontend und UI
9. API -Endpunkte

Einführung

Mein Projekt ist eine PDFChat -Anwendung, die mit ReactJS Vite Framework, MongoDB für die Datenspeicherung, JWT für die Benutzerauthentifizierung und Autorisierung und Node.js mit Express.js für das Backend erstellt wurde. Es wird auch verschiedene Bibliotheken und Tools für eine effiziente Entwicklung verwendet, einschließlich DOTenV für Umgebungsvariablenverwaltung, Langchain und seinen Vektorspeicher für Sprachverarbeitung, Multer für Datei -Uploads und AXIOS, um Anforderungen an das Backend zu stellen. Das Projekt ist mit Rückenwind -CSS und Shadcn -Framework für eine schlanke Benutzeroberfläche gestaltet.

Auf dem Back-End habe ich Node.js mit Express.js für die Bearbeitung von Anforderungen und MongoDB verwendet, um Benutzerinformationen zu speichern und Benutzeranmeldungen zu verwalten. Um die Dinge sicher zu halten, habe ich JSON -Web -Token für die Benutzerauthentifizierung verwendet, um sicherzustellen, dass nur autorisierte Benutzer auf bestimmte Teile des Projekts zugreifen konnten.

Für die Behandlung von PDF -Dateien habe ich ein Tool namens Multer verwendet, um die Dateien und deren Positionen in der Datenbank zu speichern. Dann verarbeitete ich die hochgeladenen PDFs, brach sie in kleinere Teile ein und speicherte sie in einem von Langchain bereitgestellten HNSW -Vektorstore. Diese Reise hat meine Fähigkeiten erweitert und mir ein besseres Verständnis der Möglichkeiten für fortschrittliche Technologie wie Langchain und Rag vermittelt.

Technologien verwendet

• ReactJS : Eine beliebte JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen.
• Vite Framework : Ein schnelles Build -Tool und ein Entwicklungsserver für die moderne Webentwicklung.
• MongoDB : Eine NoSQL -Datenbank zum Speichern von Benutzerinformationen.
• JWT (JSON IB -Token) : Wird zur sicheren Authentifizierung und Autorisierung verwendet.
• Node.js : Eine JavaScript -Laufzeit zum Erstellen des Backends.
• Express.js : Ein minimales und flexibler Node.js -Anwendungsrahmen für die Handhabung von Routen.
• DOTENV : Um Umgebungsvariablen zu verwalten, einschließlich OpenAI -API -Schlüssel, MongoDB -Atlas -Anmeldeinformationen und JWT -Geheimnissen.
• Langchain : Für Sprachverarbeitung und Textanalyse.
• Multer : Eine Middleware für die Bearbeitung von Dateien -Uploads.
• AXIOS : Ein vielversprechender HTTP-Client für Anfragen am Backend.
• Tailwind CSS : Ein Utility-First CSS-Framework zum Styling der Frontend.
• Shadcn Framework : zur Verbesserung der Benutzeroberfläche mit Schatten und Effekten.

Einrichtung und Konfiguration

Vor dem Ausführen des Projekts müssen Sie Umgebungs- und Konfigurationsvariablen einrichten:

1. Klonen Sie das Repository : Starten Sie mit diesem Repository auf die lokale Maschine.

2. Frontend -Setup :

   • Navigieren Sie zum Frontend -Verzeichnis und führen Sie npm install aus, um Frontend -Abhängigkeiten zu installieren.
   • Verwenden Sie npm run dev , um das Frontend zu starten.

3. Backend -Setup :

   • Navigieren Sie zum Backend -Verzeichnis und führen Sie npm install aus, um die Backend -Abhängigkeiten zu installieren.
   • Erstellen Sie eine .env -Datei im Backend -Verzeichnis und legen Sie die folgenden Variablen fest:
     • PORT : Portnummer auf dem Server wird ausgeführt. (Standardmäßig 8080)
     • username : MongoDB Atlas Connection Benutzername.
     • password : MongoDB Atlas -Verbindungskennwort.
     • JWT_SECRET : Geheimnis für die JWT -Token -Generation.
     • OPENAI_API_KEY : OpenAI -API -Schlüssel.

4. Datenbank -Setup :

   • Konfigurieren Sie die MongoDB -Datenbank mithilfe der eigenen Anmeldeinformationen in dotenv.

5. Starten Sie das Backend :

   • Führen Sie npm start um den Backend -Server zu starten.

6. Zugriff auf die Anwendung :

   • Besuchen Sie http://localhost:5173 im Browser, um auf die Anwendung zuzugreifen.
   • Öffnen Sie die Standardeinstellung http://localhost:8080 oder http://localhost:PORT in Ihrem Terminal, um auf die Backend -Teil -Anwendung zuzugreifen.

Projektstruktur

Die Projektstruktur ist in zwei Hauptverzeichnisse organisiert:

• frontend : Enthält alle ReactJS -Code für das Frontend mit TypeScript.
• backend : Enthält den Node.js -Server mit Express.js für die Backend -Logik.

Authentifizierung und Autorisierung

Ich habe JWT (JSON Web Tokens) zur Benutzerauthentifizierung und Autorisierung verwendet. Wenn sich Benutzer registrieren oder sich anmelden, erhalten sie ein Token, das mit nachfolgenden Anfragen zum Zugriff auf autorisierte Routen gesendet werden muss.

Datenspeicherung

Benutzerinformationen werden in MongoDB gespeichert, einer flexiblen NoSQL -Datenbank. Benutzerdaten werden sicher gespeichert und nach Bedarf für Benutzerinteraktionen abgerufen.

Datei -Upload

Ich habe Multer verwendet, eine Middleware für die Bearbeitung von Dateien -Uploads, mit der Benutzer Dateien wie Bilder oder Dokumente hochladen können. Diese Funktion verbessert die Benutzererfahrung durch Unterstützung von Multimedia -Inhalten.

Frontend und UI

Das Frontend wurde mit einer benutzerfreundlichen Schnittstelle mit Tailwind-CSS und dem Shadcn-Framework entwickelt. Es bietet eine reaktionsschnelle und visuell ansprechende Erfahrung für Benutzer.

API -Endpunkte

Das Backend bietet verschiedene API -Endpunkte, um Benutzerdaten, Authentifizierung und Datei -Uploads zu verwalten. Diese Endpunkte sind im Code dokumentiert, und Sie finden weitere Details in der Codebasis des Backend.