/SnapWire

Connect instantly, chat effortlessly!

Primary LanguageJavaScript


Logo

SnapWire

Connect instantly, chat effortlessly!

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Contributing
  4. Contact

About The Project

SnapWire is a feature-rich mobile chat application developed using React Native for the frontend and Express.js with MongoDB for the backend. This project showcases a comprehensive approach to modern mobile app development, incorporating essential chat functionalities along with advanced features. The app utilizes various technologies and libraries such as Expo, React Navigation, Axios, and JWT for authentication. SnapWire demonstrates proficiency in both frontend and backend development, including user authentication, real-time messaging, friend management, and media sharing capabilities. The development process involved tackling various challenges, from setting up the development environment to deploying the final product, making it an excellent example of a full-stack mobile application.

(back to top)

SnapWire Demo

Key Features

  • User authentication (registration and login) with JWT token storage
  • Friend request system (send, receive, and accept requests)
  • Real-time chat functionality
  • Image sharing in chats using device gallery
  • Emoji selector for enhanced messaging experience
  • User profile display with avatar images
  • Friend list and chat history views
  • Message deletion functionality
  • Last message preview in chat list
  • Automatic scroll to bottom in chat rooms
  • Logout functionality
  • Cross-platform compatibility (developed with React Native)
  • Serverless backend deployment on Vercel
  • Image storage using Cloudinary
  • APK build for Android devices
  • Over-the-air updates using Expo

Built With

  • React Native
  • React Navigation
  • Node.js
  • Express.js
  • MongoDB
  • Cloudinary
  • JWT
  • Multer
  • Passport.js
  • Axios

(back to top)

Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

  • Git
  • Node.js
  • npm(Node Package Manager)

Cloning the Repository

git clone https://github.com/debsouryadatta/snapwire-react-native.git
cd snapwire-react-native

Installation

Install the project dependencies using npm both for the frontend app and the backend:

npm install
cd api
npm install

(back to top)

Set Up Environment Variables

Create a .env file in the api folder and add the following environment variables:

MONGO_URI=

# Cloudinary Config
CLOUDINARY_UPLOAD_PRESET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Replace the placeholder values with your actual respective account credentials.

Running the Project

Run the backend server:

cd api
npm start

Run the frontend app:

npm start

Open expo go app on your phone or emulator and scan the QR code shown in the terminal to run the app.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Contact

Debsourya Datta - LinkedIn Profile - debsouryadatta@gmail.com

Project Link: https://github.com/debsouryadatta/snapwire-react-native

(back to top)