Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abhrajitdas02/snaptalk

SnapTalk is a modern and intuitive real-time chatting website designed to bring people together. With seamless user experience and robust features, SnapTalk allows users to connect, communicate, and share moments effortlessly in real time.
https://github.com/abhrajitdas02/snaptalk

css expressjs html javascript mongodb mongoose nodejs reactjs socket-io vercel

Last synced: about 2 hours ago
JSON representation

SnapTalk is a modern and intuitive real-time chatting website designed to bring people together. With seamless user experience and robust features, SnapTalk allows users to connect, communicate, and share moments effortlessly in real time.

Awesome Lists containing this project

README

        

SnapTalk


"Connect instantly and effortlessly with friends and family on our user-friendly chatting platform!"


chat img

# Project Overview

An online platform where individuals can send text, emojis and messages to each other in real time. This Chat Application allows the users to login and choose an unique avatar as their Profile DP.This project uses ReactJs for the frontend and NodeJs(Express) for Backend Server and MongoDb as Database.

# Web Application

This javascript based application allows users to create an account on the site,send and receive text messages along with emojis in real time, helps them to stay connected with their favourite persons,family and friends.

New Users can Sign-up in the website through the Register page giving their username,email and password.Moreover a user can chhose his/her favourite avatar as thier profile picture which will be displayed along with their name.

## Project Contributors

- [@Sayantan Sen](https://github.com/Sayantan-Sen-2003)

- [@Abhrajit Das](https://github.com/Abhrajitdas02)

## Documentation
Frontend-

[ReactJs](https://react.dev/blog/2023/03/16/introducing-react-dev)
[TailwindCss](https://v2.tailwindcss.com/docs)

Backend-

[NodeJs](https://nodejs.org/docs/latest/api/)
[ExpressJs](https://devdocs.io/express/)
[MongoDb](https://www.mongodb.com/docs/)

chatting img

## Environment Variables

To run this project, you will need to add the following environment variables to your .env file.

For BACKEND (In Server Directory)-

`MONGO`

`PORT`

For FrontEnd (In public Folder)-

`REACT_APP_LOCALHOST_KEY`

## Node modules installation

To install the node modules used in the project,

```bash
npm i
```
or

```bash
npm install
```

in both public directory (frontend) &
in server directory(backend server)

## Run Command

To run this project in local server,

```bash
npm run start
```
in both public directory (frontend) &
in server directory(backend server)

## TECHNOLOGY STACK

FRONTEND

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)

BACKEND

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB)
![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white)

## Features

- Login Page via username-password
- register Page for new Users to sign-up in our website.
- Option to choose a avatar as thier DP of thier account.
- A text input field to type and send text messages and emojis in real time.
- Logout functionality
- Backend encrypted database for user details,passwords,chats,avatar .

## Website Preview