Let's Chat Together

"Let's Chat Together" is a dynamic chat platform designed for seamless communication, both online and offline. It provides users with a comprehensive suite of features for messaging, managing friends, and handling chat interactions.

lets-chat-together.mp4

Features

• User Registration & Login: Users can sign up and log in to access their profiles and settings.
• Profile Management: Update personal details and configure settings.
• Friend Management: Search for users by name, surname, or username. Send and manage friend requests, view active friends, and handle received and sent requests.
• Real-Time Chat: Engage in live conversations with online friends. Messages are stored and delivered once offline friends return online.
• Message Management: Send, delete, or clear entire chat histories.

Technologies Used

Frontend

• TypeScript: Provides type safety and enhances development productivity.
• React with Vite: For building a fast and interactive user interface.
• Redux & Redux Persist: For global state management and persistence.
• React Router DOM: For handling navigation within the application.
• Tailwind CSS: For styling and responsive design.
• Socket.io-client: For real-time messaging capabilities.
• Toastify: For displaying toast notifications.
• SweetAlert2: For stylish pop-up modals.
• React Hook Form: For efficient form handling.
• jwt-decode: For decoding JWT tokens.
• Axios: For handling API requests.
• Firebase Storage: For storing and serving user-uploaded files securely.

Backend

• TypeScript & Node.js: For a robust and scalable server-side application.
• Express: A minimalist web framework for Node.js.
• MongoDB with Mongoose: For NoSQL database management.
• bcrypt: For secure password hashing.
• body-parser: For parsing incoming request bodies.
• multer: For handling file uploads (now replaced by Firebase Storage for image storage).
• cors: For managing cross-origin requests.
• socket.io: For real-time bidirectional communication.
• jsonwebtoken: For user authentication and token management.
• Firebase: For storage solutions to upload and manage user files securely.

JWT Authentication

• Access & Refresh Tokens: Users receive an access token upon login, which is used for authenticating requests. Refresh tokens are stored in cookies and used to obtain new access tokens when they expire.
• Token Handling: Custom Axios instance manages tokens, including automatic refreshing of expired access tokens using the refresh token.
• Secure Endpoints: JWT tokens are verified for protected routes using middleware to ensure secure access to resources.

Design

The design for "Let's Chat Together" was created using Figma. You can view the full design here.

LIVE DEMO

Client deployment on Vercel: lets-chat-together.vercel.app

Server deployment on Render: lets-chat-together.onrender.com

Server deployment on Adaptable.io: lets-chat-together.adaptable.app

Deployment Note:

Free instances may experience delays of up to 50 seconds or more due to inactivity, as they may spin down when not in use.

Getting Started

1. Clone the repository:

   git clone https://github.com/fbatuhanr/lets-chat-together.git

2. Install dependencies for frontend and backend:

   cd lets-chat-together/client
   npm install

   cd ../server
   npm install

3. Set up environment variables:

• Create a .env file in the server directory with the following variables:

NODE_ENV=development or production
MONGODB_URI=your_mongodb_uri
PORT=your_server_port
CORS_ORIGIN=your_cors_origin
ACCESS_TOKEN_SECRET=your_access_token_secret
REFRESH_TOKEN_SECRET=your_refresh_token_secret
ACCESS_TOKEN_EXPIRATION=your_access_token_expiration
REFRESH_TOKEN_EXPIRATION=your_refresh_token_expiration

• Create a .env file in the client directory with the following variables:

API_URL=your_api_url
REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_firebase_app_id

4. Run the application:

• Start the backend server:

   cd server
   npm start

or

   cd server
   npm run dev

• Start the frontend development server:

  cd ../client
  npm run dev

5. Open your browser and navigate to http://localhost:3000 to see the application in action.

Contributing: Feel free to submit issues or pull requests. Contributions are welcome!

Application Live Demo Screenshots:

Application Figma Design: