/Hiple-Chat

Primary LanguageJavaScript

Hiple Chat Application

Overview

Hiple Chat is a React.js-based chat application that integrates with Firebase for authentication and Firestore for real-time data storage. The app is designed to be responsive and user-friendly, allowing users to sign in, send messages, and log out seamlessly.

Table of Contents

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/hiple-chat.git
cd hiple-chat

  2. Install dependencies:

    npm install

  3. Configure Firebase:

    • Go to src/firebase.js.
    • Replace the placeholders in firebaseConfig with your Firebase project credentials.

Project Structure

The project is organized as follows:

├── public
├── src
│   ├── components
│   │   ├── Chat.css
│   │   ├── Chat.jsx
│   │   ├── Logout.jsx
│   │   ├── Messages.jsx
│   │   ├── nav.css
│   │   ├── nav.jsx
│   │   ├── SendMessage.jsx
│   │   ├── Signin.jsx
│   ├── App.css
│   ├── App.js
│   ├── App1.js
│   ├── firebase.js
│   ├── index.js
│   ├── index.css
└── README.md

Components Overview

  • Chat.jsx: The main chat interface component.
  • Logout.jsx: Handles user logout functionality.
  • Messages.jsx: Displays chat messages.
  • nav.jsx: Navigation bar component.
  • SendMessage.jsx: Input field for sending messages.
  • Signin.jsx: User authentication component.

Global Files

  • App.js: Entry point with password protection and routing.
  • App1.js: Main application structure after authentication.
  • firebase.js: Firebase configuration and initialization.
  • index.js: React entry point and rendering.
  • index.css: Global styles for the application.

Firebase Configuration

To set up Firebase:

  1. Create a Firebase project at Firebase Console.
  2. Add a web app to your Firebase project.
  3. Copy the configuration details provided and replace the placeholders in src/firebase.js: 
    const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

Usage

  1. Start the development server:

    npm start

  2. Access the application:

    • Open http://localhost:3000 in your browser.
    • Enter the password (admin@123) to access the main chat interface.

Available Scripts

In the project directory, you can run:

  • npm start: Runs the app in the development mode.\
  • npm test: Launches the test runner in the interactive watch mode.\
  • npm run build: Builds the app for production to the build folder.