mern chart app

Application de chat

Il s'agit d'une application Web de chat normale comme n'importe quelle autre application. Entièrement réactif, premier aperçu mobile. Construire avec la pile Mern. Hébergé avec netlify.

Commencer

Vous pouvez voir ce projet en direct ici.

Construire avec

Ce sont les principales technologies utilisées dans ce projet.

• MongoDB - base de données basée sur des documents NoSQL
• Framework ExpressJS - Nodejs pour les applications Web et mobiles
• React - bibliothèque JavaScript pour la construction d'interfaces utilisateur
• Redux - Un conteneur d'état prévisible pour les applications JS
• Nodejs - Moteur d'exécution JavaScript construit sur le moteur JavaScript V8 de Chrome qui exécute JavaScript en dehors du navigateur Web

Certaines autres technologies sont,

• SASS - Langue de script de préprocesseur pour CSS
• React-Bootstrap - Le cadre frontal le plus populaire pour les composants de l'interface utilisateur
• Bootstrap - Le cadre frontal le plus populaire
• Pusher - alimenter les expériences en temps réel pour le mobile et le web
• JWT - Les jetons Web JSON sont une méthode ouverte et standard de l'industrie RFC 7519 pour représenter les réclamations en toute sécurité entre deux parties
• Mongoose - Mongoose fournit une solution simple basée sur le schéma pour modéliser vos données d'application
• MULTER - Package pour les fichiers de Handeling à partir de données de formulaire
• PUG - Générateur de modèles pour le rendu côté serveur.

Configuration locale

Le client et le serveur possèdent un référentiel séparé et, par conséquent, deux serveur s'exécuteront en même temps dans différents répertoires de niveau racine. Alors, gardez-les séparément.

Condition préalable

Installez le nœud, le npm et le git.

Configuration du serveur

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

cd chat-app-api

npm install nodemon -g

npm install

Créez un fichier config.env dans root et ajoutez quelques variables env.

 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

Vous avez maintenant terminé et pouvez démarrer votre serveur de développement

 npm run dev

Configuration du client

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

cd chat-app-client

npm install

Créez un fichier .env dans root et ajoutez une variable Env, car j'ai utilisé SASS.

 SASS_PATH=node_modules:src/*

Créez un dossier de configuration dans le dossier / src et créez un fichier dev.js dans le dossier Configuration pour ajouter des touches secrètes.

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

Maintenant, vous avez également terminé le côté client et pouvez démarrer votre serveur de développement React

 npm run dev

Maintenant, il devrait ouvrir la page d'accueil de cette application de chat sur votre navigateur par défaut