chandankumarm55/final-year-project-frontend

backend code - https://github.com/chandankumarm55/Final-Year-Project-Backend

Chattify: An Instant Messaging Platform

Overview

Chattify is an instant messaging platform built using the MERN stack (MongoDB, Express.js, React.js, Node.js) that allows users to chat in real-time. It supports features like user authentication, profile management, chat history, blocking users, and more.

Screenshots

Features

• User registration and login with email, username, and password.
• Real-time chat functionality.
• Blocking and unblocking users.
• Adding and updating bio.
• Deleting chat history.
• Deleting account permanently.
• Sending emojis.
• Online and offline status indication.
• Profile picture upload and update.
• JWT token-based authentication.
• Responsive design.

Technologies Used

Frontend

• React.js (version 17 or higher)
• Redux (for state management)
• Axios (for making HTTP requests)
• Socket.io-client (for real-time communication)
• Material-UI (for user interface components)
• React Router (for navigation)
• React Icons (for iconography)

Backend

• Express.js (for creating the server)
• Mongoose (for MongoDB object modeling)
• bcryptjs (for password hashing)
• jsonwebtoken (for authentication)
• Multer (for file uploads)
• Socket.io (for real-time communication)
• cookie-parser (for handling cookies)
• cors (for enabling Cross-Origin Resource Sharing)
• body-parser (for parsing incoming request bodies)

Getting Started

Prerequisites

• Node.js and npm installed on your machine.
• MongoDB database (you can use MongoDB Atlas for a cloud-based solution).

Installation

1. Clone the Frontend repository: sh git https://github.com/chandankumarm55/Final-year-project-frontend.git cd chattify 2.Clone the Backend repository: sh git https://github.com/chandankumarm55/Final-Year-Project-Backend.git cd chatt

2. Backend Setup:

   • Navigate to the server directory:

     cd server

   • Install dependencies:

     npm install

   • Create a .env file in the root of the server directory and add the following environment variables:

     PORT=5000
     MONGO_URL=mongodb+srv://<username>:<password>@cluster0.mongodb.net/
     JWT_KEY=<your_jwt_secret_key>
     FRONT_END_URL=http://localhost:3000

   • Start the server:

     npm start

3. Frontend Setup:

   • Navigate to the client directory:

     cd ../client

   • Install dependencies:

     npm install

   • Update the backend URL in src/utilities/constant.js:

     export const BACKEND_URL = 'http://localhost:5000';

   • Start the frontend development server:

     npm start

Running the Application

• Open your browser and navigate to http://localhost:3000 to access the frontend.
• The backend server will be running on http://localhost:5000. ased Authentication Testing
• Objective: Ensure that users cannot send messages without a valid token.
• Example: Test scenarios where the token is missing, expired, or invalid.

References

• React.js Documentation
• Redux Documentation
• Material-UI Documentation
• React Router Documentation
• Axios Documentation
• Socket.io Documentation
• Node.js Documentation
• Express.js Documentation
• MongoDB Documentation
• Mongoose Documentation
• bcryptjs Documentation
• jsonwebtoken Documentation
• Multer Documentation
• cookie-parser Documentation
• cors Documentation
• body-parser Documentation
• Material-UI Documentation
• jsonwebtoken Documentation
• Socket.io-client Documentation

Tools and Editors

• VS Code: A source code editor that provides a range of features including debugging, syntax highlighting, and Git integration.
• MongoDB Atlas: A cloud-based MongoDB service for managing databases.
• Postman: A collaboration platform for API development.