Connectify-Chat-App Tailwind Templates

Connectify Chat App

Connectify is a chatting website. Tech Stack: MERN, Tailwind CSS, JWT.

Connectify Chat App

Description

Connectify is a chatting website. Some features:

  1. JWT Authentication
  2. Edit Profile
  3. Add Friends
  4. Send texts, images and videos.

Live Website

Explore the live version of Connectify Chat App here.

Screenshots

Setting Up the Connectify Chat App

This guide will walk you through the process of setting up the Connectify Chat App on your local machine.

Prerequisites

Before you begin, ensure you have Node.js installed on your system.

Cloning the Repository

Start by cloning the repository to your local machine:

git clone https://github.com/Harsh-9000/Connectify-Chat-App.git
cd Connectify-Chat-App

Backend Configuration

  1. Environment Files: Navigate to the backend folder and create a file: .env. Add the following content to the file:

    # MongoDB Variables
    MONGODB_CONNECTION_STRING=
    
    # JWT Variables
    JWT_SECRET_KEY=
    
    # Frontend Variables
    FRONTEND_URL=
    
    # Cloudinary Variables
    CLOUDINARY_CLOUD_NAME=
    CLOUDINARY_API_KEY=
    CLOUDINARY_API_SECRET=
    
  2. MongoDB Setup:

    • Sign up for an account at MongoDB Atlas.
    • Create a new cluster and follow the instructions to set up a new database.
    • Once set up, obtain your MongoDB connection string and add it to the MONGODB_CONNECTION_STRING variable in your .env files.
    • For the .env.e2e setup see "running automated tests" below
  3. Cloudinary Setup:

    • Create an account at Cloudinary.
    • Navigate to your dashboard to find your cloud name, API key, and API secret.
    • Add these details to the respective CLOUDINARY_* variables in your .env files.
  4. JWT_SECRET_KEY:

    • This just needs to be any long, random string. You can google "secret key generator".
  5. Frontend URL:

    • The FRONTEND_URL should point to the URL where your frontend application is running (typically http://localhost:3000 if you're running it locally).

Frontend Configuration

  1. Environment Files: Navigate to the frontend folder and create a file: .env:

    VITE_APP_BACKEND_URL=
    
  2. VITE_APP_BACKEND_URL:

    • The VITE_APP_BACKEND_URL should point to the URL where your backend application is running (typically http://localhost:7000 if you're running it locally).

Running the Application

  1. Backend:

    • Navigate to the backend directory.
    • Install dependencies: npm install.
    • Start the server: node index.js.
  2. Frontend:

    • Open a new terminal and navigate to the frontend directory.
    • Install dependencies: npm install.
    • Start the frontend application: npm run dev.
    • The application should now be running on http://localhost:5173 but verify this in your command line terminal

Top categories

Loading Svelte Themes