Vinayhac

 Build & Deploy a Real-Time Chat App with Firebase + Charts If you’ve ever wanted to build your own real-time chat app and host it online for free — this guide is for you. We'll create a live chat app using Firebase Firestore and visualize messages using Chart.js , then deploy the app using Firebase Hosting . 🚀 What We'll Build A simple real-time chat app (like WhatsApp lite 💬) A bar chart showing how many messages are sent per hour Realtime updates (no page refresh needed) Live deployment with Firebase Hosting 🛠 Tech Stack HTML + CSS + JavaScript Firebase Firestore (for real-time DB) Chart.js (for the message chart) Firebase Hosting (for deployment) 🧱 Step 1: Firebase Project Setup Go to Firebase Console Click “Add project” Follow the prompts (you can skip Google Analytics) After it's created, click “</>” Add App (Web App) Copy your Firebase config object (we’ll need this) 📦 Step 2: Create the HTM...

 How to Add "Continue with GitHub" and "Continue with Facebook" Login to Your Firebase Web App Offering social login options can significantly improve user experience and make authentication seamless. In this guide, we’ll walk through how to set up both GitHub and Facebook login using Firebase Authentication , and then host your app using Firebase Hosting . Step 1: Set Up Firebase Project Before we add login options, you need a Firebase project. Go to Firebase Console . Create a new project (or use an existing one). Enable Authentication under "Build" > "Authentication" > "Sign-in method". Step 2: Enable GitHub and Facebook Sign-In Enable GitHub Login Go to Authentication > Sign-in method . Enable GitHub . Add your GitHub Client ID and Client Secret (get these from GitHub Developer Settings ). Enable Facebook Login Still in the Sign-in method section, enable Facebook . Enter your Facebo...

How to Implement GitHub Login and Host Your Web App on Firebase Hosting Firebase is an excellent platform for building and hosting web apps, and in this tutorial, we’ll walk you through how to integrate GitHub login for user authentication and then deploy your app on Firebase Hosting. 1. Firebase Authentication with GitHub Login Firebase Authentication simplifies adding authentication to your web app. With Firebase, you can easily add social login features, including GitHub authentication. This section covers the steps to implement GitHub login in your app. Step 1: Set Up Firebase Project Go to the Firebase Console . Click on “Add Project” and follow the steps to create a new project. Once your project is created, click on "Authentication" in the left sidebar, and enable the GitHub sign-in method under the "Sign-in method" tab. You’ll need to provide the Client ID and Client Secret from GitHub, which you can get by creating a new OAuth application in y...

  Implementing Login with Email/Password and Google Authentication using Firebase Introduction User authentication is a fundamental feature in modern web applications. Firebase Authentication makes it easy to integrate authentication methods like Email/Password login and Google Sign-In. In this tutorial, we will create a simple login page that supports both authentication methods. Live Demo  the url of the login page is provided here once you also check it here   Prerequisites Before we begin, ensure that you have the following: A Firebase project (Create one at Firebase Console ) Basic knowledge of HTML, CSS, and JavaScript Firebase Authentication enabled for Email/Password and Google Sign-In Setting Up Firebase Go to the Firebase Console. Select your project. Navigate to Build > Authentication and enable Email/Password and Google Sign-In methods. Obtain the Firebase configuration object from Project Settings > General > Your Apps . Building ...

  Building a Weather Dashboard with JavaScript Creating a weather dashboard is a great way to learn JavaScript, API integration, and front-end development. In this blog post, we will walk through building a Weather App using HTML, CSS, and JavaScript. Features of the Weather App Search for weather updates by city name Get real-time weather details like temperature, wind speed, and humidity Fetch data using an external API Display a 5-day weather forecast Use the current location to get instant weather updates Project Setup To get started, create three files: index.html , style.css , and script.js . HTML Structure The HTML file defines the structure of the weather dashboard. Below is the basic setup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Weather App</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content=...

  Finger Counting Using Python with MediaPipe Introduction Finger counting using computer vision is a fascinating application of AI and image processing. In this blog post, we will implement a Python program that detects a hand and counts the number of fingers raised using MediaPipe . We will use Python 3.12.8 and MediaPipe 0.10.13 , ensuring compatibility and preventing errors. Prerequisites Before starting, install the required dependencies: pip install mediapipe==0.10.13 opencv-python Make sure you are using Python 3.12.8 to avoid compatibility issues. How Hand Detection Works We use MediaPipe Hands , a deep learning-based model that detects hands in an image or video. The model provides 21 landmark points per detected hand, which include key positions like fingertips and joints. To count the fingers: Detect the hand and obtain the 21 landmark points. Check the position of each fingertip relative to its lower joint. If a fingertip is higher than its joint, the fi...

  Building a Classic Snake Game Using JavaScript Introduction The Snake game is a simple yet fun classic game that has been recreated in various programming languages. In this post, we will walk through a JavaScript implementation of the game using HTML5 Canvas. The game runs on a laptop and is controlled using arrow keys. Note: This game is only playable on a laptop as it requires arrow key controls and does not support mobile touch interactions. Live Demo Click here to play the Snake Game (Replace with actual hosted link) How the Game Works The player controls a snake that moves on a grid. The objective is to eat the red food blocks, which increase the snake's length and score. The game ends if the snake collides with itself. The snake wraps around the screen edges, meaning it appears on the opposite side if it moves beyond the boundary. Screenshots Initial State Playing the Game Game Over Screen   ( Understanding the Code The game is built using HTM...