Anonymous Chat - Building a Local Chat Application on My Own

Anonymous Chat is a real-time messaging application built using HTML, CSS, JavaScript, and Firebase. It allows users to send and receive messages instantly, leveraging Firebase's cloud services for real-time data syncing and storage. This project helped me understand more about how frontend works cohesively with backend and also further extended my knowlege on web servers. It also taught me about security measures and how to defend against hackers.

Preview

This is the login page for the Anonymous Chat app, where users can enter the chat while using a google account.

This shows the chat in action, where users can send and receive messages in real-time.

How I Built It

The Anonymous Chat app was built using the following tools and technologies:

• Firebase: Used for real-time data synchronization, user authentication, and the framework for the whole web server.
• HTML, CSS, JavaScript: Used to create the front-end interface, allowing users to interact with the chat.
• Firebase Authentication: Ensures that users can chat anonymously as long as they create an account for security measures.
• Firebase Realtime Database: Handles storing and retrieving messages in real-time.
• Key files used in the build process:
  • index.html (Main structure and layout of the chat app)
  • style.css (App's visual styling)
  • app.js (Handles Firebase interaction and real-time message updates)
  • firebase-config.js (Configuration for Firebase SDK and database connection)

Future Plans

In the future, I plan to publish my chat app to the internet using either GitHub Pages or Firebase. However, I haven't published it yet because I need proper HTML implementation to do so. Right now, I can only run the app locally since I only have working JavaScript and CSS. Additionally, before making it live, I want to implement additional features, such as the ability to reply to messages, add reactions, and improve the overall user experience. My goal is to make the app cooler, more interactive, and better for users.

Prerequisites

To build and run the Anonymous Chat App, you will need:

• A text editor such as VS Code.
• A web browser (e.g., Chrome, Firefox).
• Firebase if you want to deploy it online (optional for local testing).

Setup

1. Clone or download the repository to your local machine.

2. Open a terminal or command prompt.

3. Navigate to the project directory:

   cd chat

4. Install dependencies:

   npm install

5. Start the app locally using npm:

   npm start

Future Deployment (Optional)

If you want to deploy the app online using Firebase, follow these steps (Only works if there is proper HTML implementation):

1. Install Firebase CLI:

   npm install -g firebase-tools

2. Log in to Firebase:

   firebase login

3. Initialize Firebase in your project folder:

   firebase init

4. Choose the Firebase Hosting option during initialization.

5. Deploy your app:

   firebase deploy

Once deployed, Firebase will provide a URL where your chat app will be live!

Cleanup

If you decide to delete your Firebase project or stop using it, you can run:

firebase projects delete