cyberkutti-iedc/PingPong

PingPong Notifier provides real-time GitHub notifications and data visualization through a website, server, Chrome extension, and NodeMCU hardware. Stay updated on GitHub activities effortlessly.

PingPong Notifier

Welcome to the PingPong Notifier ecosystem! This tool enhances your GitHub experience with notifications, data visualization, and real-time updates across various platforms. The PingPong system includes a website, server, Chrome extension, and NodeMCU hardware unit.

🌐 Website

PingPong Notifier website features:

• View Recent Notifications: Instant updates on GitHub activities.
• Explore Trending Topics: Browse trending repositories by popular topics.
• Customize Notifications: Tailor notifications to your preferences.
• Manage GitHub Account: Link and manage GitHub accounts.

The website is optimized for both desktop and mobile devices.

💻 Server

PingPong Notifier server capabilities:

• API Endpoints: Access endpoints like /user-info, /topics, and /github-notifications.
• Data Aggregation: Combine information from multiple GitHub endpoints.
• Error Handling: Robust error management.

Powered by Node.js with Express for efficient data processing.

🧩 Chrome Extension

PingPong Notifier Chrome extension features:

• User Input: Enter GitHub username to fetch notifications.
• Notification Display: View recent notifications in a clean interface.
• Real-Time Updates: Receive real-time notifications.

Enhances your browsing experience with GitHub updates directly in your browser.

📡 NodeMCU Hardware Unit

PingPong Notifier hardware unit features:

• Data Fetching: Connects to Wi-Fi and fetches data from the server.
• Display Options: LCD 16x2 I2C or TFT display options.
• Automated Updates: Updates every 20 minutes.

Provides a tangible way to monitor GitHub activities.

---

📚 Documentation

For detailed instructions, refer to these resources:

• Website Documentation
• Server API Documentation
• Chrome Extension Guide
• NodeMCU Hardware Instructions

👥 Team Members

• Sreeraj V Rajesh
• Rahan Michael Judes
• Edwin Raffy
• Sarath Murukan

🎥 Product Walkthrough

Watch the product walkthrough video

---

🔧 How It Works

1. Server

Role: Central component for collecting, processing, and providing user data.

Technology:

• Express: Web application framework for Node.js.
• Node.js: JavaScript runtime for server-side applications.
• Nodemon: Auto-restart tool for development.
• RESTful GitHub API: Standardized format for GitHub data.

Functionality:

• Data Collection: Fetches user data from GitHub.
• API Endpoint: Provides data in JSON format.
• Data Format: Includes fields like name, user, followers, following.

2. Client Website

Role: Provides a GUI for viewing data.

Technology:

• Vue.js: Progressive JavaScript framework.
• CSS: Styling for the website.
• Tailwind CSS: Utility-first CSS framework.

Functionality:

• Data Fetching: Retrieves data from server’s API.
• Data Display: Uses Vue.js reactive components.
• User Interface: Styled with Tailwind CSS.

3. Chrome Extension

Role: Provides data access directly from the browser.

Technology:

• HTML, CSS, JavaScript: Handles UI and logic.

Functionality:

• Data Fetching: Requests data from server’s API.
• Display Data: Shows data within the extension.
• User Interface: Simple and functional design.

4. Hardware Unit

Role: Displays data on a physical screen.

Technology:

• ESP8266 (NodeMCU): Microcontroller with built-in WiFi.
• LCD 16x2 I2C or TFT LCD Display: Display options.

Functionality:

• WiFi Connection: Connects to a network.
• Data Fetching: Periodically requests data.
• Display Data: Shows data on the connected display.

---

📦 Installation Guide

Option 1: Use the Provided Scripts

Automate the installation process with these scripts:

For Windows

• Command Prompt (install.cmd)
• PowerShell (install.ps1)

For Linux/macOS

• Shell Script (install.sh)

Option 2: Manual Installation

1. Navigate to Client Directory:

   cd PingPong/Client

2. Install Client-Side Dependencies:

   npm install

3. Navigate to Server Directory:

   cd ../Server

4. Install Server-Side Dependencies:

   npm install

---

🚀 How to Run

Automatic Startup Scripts

To run the project automatically on startup:

• Windows:

  • Batch Script (start-dev.bat)
  • PowerShell Script (start-dev.ps1)

• Linux/macOS:

  • Shell Script (start-dev.sh)

Manual Running

1. Open Terminal or Command Prompt:
2. Navigate to Server Directory and Run:

   cd /path/to/server
   npm run dev

3. Open a New Terminal or Command Prompt Window:
4. Navigate to Client Directory and Run:

   cd /path/to/client
   npm run dev

Chrome Extension

1. Install the Extension:

   • Go to chrome://extensions/.
   • Enable "Developer mode".
   • Click "Load unpacked" and select the extension directory.

2. Activate the Extension:

   • Ensure the extension is enabled.

NodeMCU Hardware Unit

1. Power On the NodeMCU:

   • Connect to a power source through USB.

2. Ensure Network Connectivity:

   • Ensure the NodeMCU and your server are on the same network.

3. Start the Server:

   • Verify the server is running.

4. Verify Functionality:

   • Check the NodeMCU’s display for correct data.

---

Happy coding with PingPong! 🚀

---