chat app client

Chat -App

Es ist eine normale Chat -Web -App wie jede andere App. Vollständig reaktionsschnell, mobiler erster Schach. Bauen Sie mit Mern Stack. Gehostet mit netlify.

Fangen an

Sie können dieses Projekt hier live sehen.

Bauen mit

Dies waren die Haupttechnologien, die in diesem Projekt verwendet wurden.

• MONGODB - NoSQL Dokumentbasierte Datenbank
• ExpressJS - NodeJS Framework für Web- und Mobilanwendungen
• React - JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen
• Redux - Ein vorhersehbarer Zustandsbehälter für JS -Apps
• NodeJS - JavaScript Runtime Engine, die auf Chrome's V8 JavaScript Engine A basiert, das JavaScript außerhalb des Webbrowsers ausführt

Einige andere Technologien sind,

• SASS - Präprozessor -Skriptsprache für CSS
• React-Bootstrap-das beliebteste Front-End-Frontwork für UI-Komponenten
• Bootstrap - das beliebteste Front -End -Framework
• Pusher - Echtzeit -Erlebnisse für Mobile und Web locken
• JWT - JSON -Web -Token sind eine offene Methode zur RFC 7519 -Methode für Branchenstandards zur sicheren Vertretung von Ansprüchen zwischen zwei Parteien
• Mongoose-Mongoose bietet eine einfache, schema-basierte Lösung, um Ihre Anwendungsdaten zu modellieren
• Multer - Paket zum Handeling von Dateien aus Formulardaten
• PUG - Vorlagengenerator für die Serverseite Rendering.

Lokales Setup

Client und Server verfügen über ein separates Repository und daher werden zwei Server gleichzeitig in einem verschiedenen Root -Level -Verzeichnis ausgeführt. Halten Sie sie also getrennt.

Voraussetzungen

Installieren Sie Knoten, NPM und Git.

Server -Setup

 git clone https://github.com/ramankarki/chat-app-api.git

cd chat-app-api

npm install nodemon -g

npm install

Erstellen Sie eine config.Env -Datei im Root und fügen Sie einige Env -Variablen hinzu.

 NODE_ENV=development
DB_STRING=your mongodb database string

// I have used sendgrid to send emails,
// create a sendgrid account and after your setup is done add your credentials here

SENDGRID_USERNAME=your sendgrid username
SENDGRID_PW=your sendgrid password
EMAIL_FROM=email from which you are sending mails.

JWT_SECRET=any random string you want (preferred min 32 strings)
JWT_EXPIRES_IN=expiry date for your jwt tokens
JWT_COOKIE_EXPIRES_IN=expiry date for your cookies

// I have used pusher to make this app real time
// create a pusher account and after your setup is done add your credentials here

PUSHER_APP_ID=your pusher app id
PUSHER_KEY=your pusher app key
PUSHER_SECRET_KEY=your pusher secret key
PUSHER_CLUSTER=your pusher app cluster

Jetzt sind Sie fertig und können Ihren Entwicklungsserver starten

 npm run dev

Client -Setup

git clone https://github.com/ramankarki/chat-app-client.git

cd chat-app-client

npm install

Erstellen Sie eine .env -Datei im Root und fügen Sie eine Env -Variable hinzu, da ich SASS verwendet habe.

 SASS_PATH=node_modules:src/*

Erstellen Sie einen Konfigurationsordner im Ordner "SRC" und erstellen Sie Dev.js -Datei im Konfigurationsordner, um einige geheime Tasten hinzuzufügen.

 module.exports = {
  PUSHER_KEY: "YOUR PUSHER KEY FOR CLIENT SIDE",
  PUSHER_CLUSTER: "YOUR PUSHER CLUTER",
};

Jetzt sind Sie auch für die Client -Seite fertig und können Ihren React Development Server starten

 npm run dev

Jetzt sollte es in Ihrem Standardbrowser die Startseite dieser Chat -App eröffnen