https://swakabilly-chat.vercel.app/
This is a real-time chat app that utilizes Firebase as its platform. Users can log in to the app to gain authorization to chat, create or join chat rooms, and send messages to all participants in the chat. The app is fully responsive and features great styling. It uses several packages such as framer-motion, react-firebase-hooks, react-toastify, and universal-cookie to provide dynamic UI transitions, integrate Firebase services into React components, and handle browser cookies.
- clone or fork the repo onto your computer
- download and install the latest version of node.js (https://nodejs.org/en/) for your Operating System
- using your Command Line navigate to the folder where the files are saved
- run 'npm i' to install all the dependencies
- next run 'npm run dev' to start the server on localhost:3000
- click the Login Button to get Authorized to chat
- on the main page you can create a new chatroom or join any currently open chat room
- this will bring you to the chat you have either created or joined
- all the messages for that chat will be show in desending order
- on the bottom of the screen you can use the textbox to send a message to all the people in that current chat
- you can delete your chats from the chatroom with a button
- when done you can logout with the header button or click the name of the app to the right to go back to the main page.
- Great styling!
- Fully responsive!
firebase: A platform for developing mobile and web applications, offering services like authentication, real-time database, cloud storage, and hosting.framer-motion: A popular animation library for creating fluid and dynamic UI transitions and animations in React applications.react: A JavaScript library for building user interfaces, developed by Facebook and used for creating dynamic and interactive web applications.react-firebase-hooks: A collection of React hooks that provide an easy way to integrate Firebase services into React components.react-toastify: A notification library for React applications, providing customizable and easy-to-use toast notifications.universal-cookie: A lightweight package for handling browser cookies in React and other JavaScript applications, with support for server-side rendering.