Chat App – React Native, Next.js & Node.js

This is a real-time chat application built using React Native for mobile (Android & iOS), Next.js for the web interface and API, and Node.js for the backend. The app provides a smooth and responsive 1-on-1 messaging experience with real-time communication and secure authentication.

🔧 Tech Stack:

• Mobile Frontend: React Native (Android & iOS)
• Web & API: Next.js (React framework)
• Backend Server: Node.js with Express.js
• Real-time Communication: Socket.IO
• Authentication: JWT (JSON Web Token)
• Database: MongoDB or compatible NoSQL database

✨ Features:

• Real-time 1-on-1 chat
• User registration & login with JWT
• Online/offline status indicators
• Typing indicators & read receipts
• Notifications for new messages
• Send text, images, and emojis
• Clean, modern, and responsive UI (mobile & web)

📱 Mobile App:

React Native delivers native-like performance across both Android and iOS platforms.

🌐 Web App:

Next.js powers the web version with server-side rendering and a fully responsive design.

🔒 Security:

• Token-based authentication with JWT
• Passwords stored securely with hashing

✨ Core Features

• 💬 Real-Time 1-on-1 Chat
  Instantly send and receive messages with Socket.IO-powered real-time updates.
• 🔐 Secure Authentication
  User login and registration using JWT tokens for secure and reliable access.
• 👤 User Presence (Online/Offline)
  See when other users are online or offline in real time.
• ✍️ Typing Indicator
  Displays when the other user is typing a message.
• ✅ Read Receipts
  Know when your messages have been seen.
• 🔔 Message Notifications
  Get in-app or push notifications when new messages arrive.
• 📷 Image Messaging
  Share photos directly in the chat.
• 🖥️📱 Cross-Platform UI
  Clean, responsive, and modern UI for both web (Next.js) and mobile (React Native).

🔧 Requirements for Local Installation

1. System Requirements

• Operating System: macOS, Windows, or Linux
• RAM: Minimum 4 GB (8 GB recommended)
• Disk Space: Minimum 10 GB of free space

2. Software Requirements

• Node.js (LTS version): Download and install from nodejs.org
• npm (Node Package Manager): npm comes bundled with Node.js, but ensure it's up-to-date
• Git: Install from git-scm.com

3. React Native Requirements (for Mobile)

• React Native CLI: Install globally via npm
• Android Studio (for Android development): Install Android Studio and set up an emulator
• Xcode (for iOS development, macOS only): Install from the App Store if developing for iOS

4. Next.js Requirements (for Web)

• Next.js: Next.js is a React framework that runs on Node.js

5. Database Requirements

• MongoDB (Local or Cloud): Install MongoDB locally from mongodb.com or use MongoDB Atlas for a cloud solution

6. Additional Tools

• Visual Studio Code (Recommended Editor): Download from code.visualstudio.com

🛠️ How to Run the Project Locally

1. Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (LTS version)
  Download from nodejs.org
• npm (Node Package Manager)
  npm comes bundled with Node.js, ensure it's up-to-date
• Git
  Download from git-scm.com

Additionally, make sure to install the required tools for mobile development:

• React Native CLI
  Follow the installation guide and set up environment for React Native CLI by visiting the official documentation: React Native Environment Setup
• Android Studio (for Android development)
  Install Android Studio and set up an emulator following React Native environment setup.
• Xcode (for iOS development, macOS only)
  Install Xcode from the App Store if you plan to develop for iOS.

2. Extract the Source Code

After purchasing, you will receive main-files.zip. Extract the main-files.zip file, which contains the folder Source Code. Inside the Source Code folder, you will find the following:

• backend.zip
• mobile.zip
• web.zip

3. Install Backend Dependencies (Node.js)

1. Extract backend.zip and navigate to the backend directory (where package.json is located).
2. Install the backend dependencies:

   cd backend
   npm install
   
   

3. To start the backend server, run the following command:

   npm run server
   
   

   This will start your Node.js backend, typically on http://localhost:5000 (or a different port depending on your configuration).

4. Install Frontend Dependencies (React Native & Next.js)

For Mobile (React Native):

1. Extract mobile.zip and navigate to the mobile project directory.
2. Install the mobile dependencies:

   cd mobile
   npm install
   
   

For Web (Next.js):

1. Extract web.zip and navigate to the web project directory.
2. Install the web dependencies:

   cd web
   npm install
   
   

5. Start the Mobile App (React Native)

For iOS (macOS only):

react-native run-ios

For Android:

react-native run-android

6. Start the Web App (Next.js)

Navigate to the web directory and run the web application:

cd web
npm run dev

Your Next.js web app should now be accessible at http://localhost:3000.

🚀 You're Ready to Go!

• The backend API should be running.
• The mobile app should be running on either Android or iOS.
• The web app should be running in your browser.

If you encounter any issues or errors, check the logs in the terminal or let me know for further assistance in the support section!