https://github.com/vikas350/wechat

A Realtime chat Web Application created using React JS concepts such as State, Effects, Props, Hooks etc using jsx, for designing we use SASS and for backend connectivity and user authentication we use Firebase.
https://github.com/vikas350/wechat

firebase-auth firebase-database react-components react-router reactjs sass-framework sass-mixins

Last synced: 16 days ago
JSON representation

A Realtime chat Web Application created using React JS concepts such as State, Effects, Props, Hooks etc using jsx, for designing we use SASS and for backend connectivity and user authentication we use Firebase.

• Host: GitHub
• URL: https://github.com/vikas350/wechat
• Owner: Vikas350
• Created: 2023-03-13T06:14:19.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-10T10:33:56.000Z (11 months ago)
• Last Synced: 2024-10-10T15:21:49.831Z (about 1 month ago)
• Topics: firebase-auth, firebase-database, react-components, react-router, reactjs, sass-framework, sass-mixins
• Language: JavaScript
• Homepage: https://stellar-kheer-991a1b.netlify.app/
• Size: 4.47 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 💬 WeChat : a Realtime based Chat Application

![a](./src/img/WeChat.png)

## 🔰 About

### * WeChat is a realtime based chat application for users where user can chat with different registered users.

## ⚙️ Tech Stack Used

- [React JS](https://reactjs.org/) (States, Effects, Hooks, Props, Function Structure, JSX etc.)

- [SASS](https://sass-lang.com/) (using SCSS syntax and mixins for designing)

- [Firebase](https://firebase.google.com/) (For Backend Connectivity with login Authentication and Firestore Database)

## 🌟 Features

- User can Login/Register on WeChat by just entering first name, email, password and choosing an Avatar.

- User can chat with differnt users by just searching the user name of other person.

- You can Send Messages, Emojis and also send Images(< 300kb).

- No other user can see the chat of between other 2 users.

- Application is design using SASS framework and it is Fully Responsive.

- Firebase Authentication is used for Login Activity.

- All User and Chat Data is Stored in the Firestore Database.

## 🔗 Links

### * [Source Code](https://github.com/Vikas350/WeChat)

### * Live Link - [WeChat](https://vikas-wechat.netlify.app/)

## 🔶 Highlights

- Register Page

![a](./pics/register.png)

- Login Page

![b](./pics/login.png)

- Chat Homepage

![c](./pics/chat.jpeg)

- Fully Responsive

![d](./pics/phone_chat.jpeg)

## 📄 Credit

- Vikas Kushwaha

- Connect with me [LinkedIn](https://linkedin.com/in/vikas-kushwaha-165b95204)