Skip to content

Latest commit

 

History

History
105 lines (67 loc) · 3.3 KB

README.md

File metadata and controls

105 lines (67 loc) · 3.3 KB

Chatopia - v1.0

Demo Demo Give a visit to below link, you will get the idea about the project through a short video. https://github.com/Nikhilgholap1304/Chatopia/assets/118434064/13e35b58-6beb-4524-ae7c-f1cfc2ebb649

forthebadge   forthebadge   forthebadge   GitHub Repo stars   GitHub forks

Report Bug     ✨ Request Feature

TL;DR

You can fork this repo to modify and make changes of your own. Please give me proper credit by linking back to NikhilGholap1304. Thanks!

Built With

Chatopia is a real-time chat application designed for seamless and instant communication. Built using modern web technologies like React and Vite, Chatopia leverages Firebase for its backend services, including real-time database, authentication, and cloud storage. The app supports text messaging, multimedia sharing (photos, videos, and documents), and ensures a user-friendly experience with features such as message timestamps, read receipts, and blocking functionality.

This project was built using these technologies.

  • React.js
  • Vite.js
  • Firebase
  • Zustand state management
  • Material Tailwind
  • TailwindCss
  • MUI
  • Framer-Motion
  • SCSS
  • VsCode
  • Vercel
  • Context Api

Features

🌘 Stuffed with Modern UI uniquely based on Telegrams Theme

🎫 Implementation of Google and github Auth

😀 Emoji Picker

📥 State management

🧾 Applied Firestore and storage of firebase

🎞 Able to share photo/video/doc/zip and many type of files

📌 Viable Timestamps

🎨 Styled with TailwindCSS

🎗 Upto the Mark UI and UX

🥽 Smooth Effects

📱 Fully Responsive

Getting Started

Clone down this repository. You will need node.js and git installed globally on your machine.

🛠 Installation and Setup Instructions

  1. Installation: npm install

  2. In the project directory, you can run: npm run dev

Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser. The page will reload if you make edits.

Usage Instructions

Open the project folder and Navigate to /src/components/.
You will find all the components used and you can edit your information accordingly.

Show your support

Give a ⭐ if you like this website!

📄 License

This project is licensed under the License. Feel free to use, modify, and distribute the code for both personal and commercial projects.